网页渲染技术简介
概述
网站渲染可以在服务端和客户端进行。
客户端渲染
在客户端渲染中，客户端会先向服务器请求 HTML 文件，服务器返回一个基础的 HTML 文件，其中包含必要的 JavaScript 脚本。这些脚本在浏览器端运行，动态请求后端的数据，生成网页内容并渲染到页面上。
表现为看到请求的过程是断断续续的。
客户端渲染优点
- 开发方便灵活：开发者不需要区分哪些数据要在服务端加载、哪些数据要在客户端加载，也不用担心哪些 API 无法再服务端使用。
- 减少服务器压力：由于渲染工作由客户端完成，因此服务器的负载相对较小，只需要提供静态资源。
适用场景
如果不需要做 SEO，比如面向企业的、内部的、个人学习用的网站，或者较为复杂、充满各种动态交互的网站，用客户端渲染更好。
服务端渲染
服务端渲染是一种将网页在服务端生成并渲染为 HTML 内容的技术。
在这种方式下，当用户请求一个网页时，服务器会提前调用后端来获取数据并生成完整的 HTML 文档，然后将其发送到客户端（浏览器）。浏览器接收到 HTML 后，直接展示页面内容，不用再动态地向后端发送请求来获取数据。
服务端渲染优点
- 减少页面初始加载时间：首次加载时展示完整内容，减少白屏时间，不用等待 JavaScript 加载和执行后才能展示内容。
- 更有利于 SEO，因为搜索引擎爬虫能够直接抓取完整页面的内容，而不依赖于 JavaScript 的执行。
适用场景
如果网站要做 SEO、希望被更多人搜索到，首选服务端渲染，但堆服务器配置的要求就更高了。
实现技术
以前：JSP、PHP
现在：
- 基于 React 的 Next.js 框架
- 基于 Vue 的 Nuxt.js 框架
静态网站生成
除了服务端渲染和客户端渲染外，还有一种常见的技术——静态网站生成。
静态网站生成是一种在构建阶段生成静态 HTML 文件的技术。注意，是在构建时（而不是用户请求时）就已经请求后端服务器获取了数据并且把页面生成好了，用户请求的时候服务器只需要把文件发出去就行。
搜索引擎最喜欢的就是静态 HTML 文件，可以大幅提升 SEO 效果。此外，这些静态文件还可以通过内容分发网络（CDN 缓存）进行加速，进一步减少服务器的压力。
静态网站生成缺点
- 不适合内容动态变化的网站。
- 随着内容的增多，每次构建要生成大量静态页面，时间会越来越长。
解决方案
随着静态网站内容越来越多，每次构建会越来越慢，这种情况下，可以采用增量静态生成技术。允许部分页面在构建之后进行更新，而无需重新构建整个站点。这种技术适用于那些大多数内容不变、但某些部分需要动态更新的网站。
比如更改博客里的一篇文章，那么只需要重新构建生成这篇文章的 HTML 页面即可。
适用场景
基于以上优缺点，静态网站生成适合内容数量有限、内容基本不变的网站，比如个人博客。像 VuePress、Hugo、Hexo、Astro 都是主流的静态网站生成器。
值得一提的是，很多大型网站为了做 SEO 优化，专门把动态网站转为静态 HTML。
多种方式结合
部分预渲染
部分预渲染 是一种将静态页面生成与客户端渲染结合的技术。
- 在构建阶段或请求阶段，页面的静态部分预先渲染，比如导航栏、页脚等。
- 页面加载时候，静态部分可以直接显示。比如访问某些网站时，内容无论谁访问都是一样的、不变的。
- 然后通过水合过程，客户端的 JavaScript 接管已经渲染的静态内容，并继续处理动态交互。比如请i去后端获取用户登陆状态、并且加载出用户的信息。
这样一来，网站兼具了服务端渲染的 SEO 友好和快速初始加载、以及客户端渲染灵活动态交互的优点。
同构渲染
还有一个跟部分预渲染相似的概念，叫 同构渲染，是指同一套代码可以在服务端和客户端运行，并在服务端渲染页面的初始内容，然后再客户端接管渲染和交互。
作者更推荐这种方式。