面试题：JavaScript服务端渲染基础

Question

请简述JavaScript中服务端渲染（SSR）的基本原理，以及与客户端渲染相比，SSR在性能和SEO方面有哪些优势？

Answer 1

JavaScript中服务端渲染（SSR）的基本原理

1. 初始渲染在服务端：当用户请求一个页面时，服务器端的JavaScript代码会在服务器环境中运行。它会根据请求生成完整的HTML页面，包括填充了数据的DOM结构。例如，一个博客页面，服务器会获取文章数据并将其填充到相应的HTML模板中。
2. 数据获取与整合：在服务器端，代码可以方便地从各种数据源（如数据库、API等）获取数据。比如获取用户信息、商品列表等数据，然后将这些数据与HTML模板进行整合，形成完整的HTML页面。
3. 发送完整HTML到客户端：服务器将生成好的完整HTML页面发送给客户端浏览器。客户端收到的是一个已经包含数据的可直接显示的页面，无需等待额外的数据请求和渲染。
4. 客户端激活：页面到达客户端后，JavaScript代码会在客户端激活，使页面具备交互性。这个过程也称为“水合（Hydration）”，即客户端JavaScript代码重新绑定事件等交互逻辑，让页面成为一个动态的应用。

SSR与客户端渲染相比在性能和SEO方面的优势

性能优势

1. 首屏加载速度快：客户端渲染时，浏览器首先加载HTML骨架，然后再加载JavaScript代码，通过JavaScript代码获取数据并渲染页面。这期间会有多次请求和等待，导致首屏加载时间较长。而SSR直接返回包含数据的完整HTML页面，用户能更快看到页面内容，特别是在网络较慢的情况下，这种优势更为明显。
2. 减少客户端负载：由于大部分渲染工作在服务器端完成，客户端只需对已有的HTML进行激活，减少了客户端设备（尤其是移动设备）的计算压力，提高了整体性能。

SEO优势

1. 搜索引擎友好：搜索引擎爬虫在抓取页面时，通常不会执行JavaScript代码。客户端渲染的页面，爬虫可能只能获取到初始的HTML骨架，无法获取到通过JavaScript动态加载的数据，导致页面内容在搜索引擎中收录不完整。而SSR返回的是包含完整数据的HTML页面，搜索引擎爬虫可以直接抓取到页面的全部内容，有利于提高页面在搜索引擎中的排名。