前端页面渲染方式

1、CSR 客户端渲染

客户端渲染是指浏览器在请求页面 URL 后，服务端直接返回一个空的静态 HTML 文件，这个 HTML 文件需要再加载 JavaScript 脚本和 CSS 样式表， 浏览器加载和执行这些文件去动态改变 DOM 树的结构， 使页面渲染成用户所需要的界面，这种动态渲染的方式就是客户端渲染 （CSR）

优点 局部刷新：无需每次都进行完整页面请求 懒加载：首次加载时可以只加载可视区域内的数据 丰富的站点交互 减轻服务器压力 前后端分离 缺点 不利于 SEO 首屏渲染慢：需要等待 JavaScript 脚本文件加载完毕后才开始渲染页面

2、SSR 服务端渲染

服务端渲染是指浏览器在请求页面 URL 时，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后， 不需要经过 JavaScript 脚本的下载过程，就能直接构建出我们所希望的 DOM 树并展示到页面中。这个服务端组装 HTML 的过程就叫做服务端渲染（SSR）

优点 有利于 SEO 首屏渲染快 缺点 占用服务器资源 用户体验不好：新页面都需要在服务端重新渲染整个页面，不能局部渲染 模板维护成本高

SSR 框架 Next.js React 应用开发框架 Nuxt.js Vue.js 通用应用框架

3、同构渲染

同构渲染是一种现代化服务端渲染方案，实际上是将 CSR 客户端渲染和 SSR 服务端渲染的优势结合起来实现互补； 其流程是先在 Node.js 中进行服务端渲染生成 HTML，然后通过客户端渲染接管页面交互

同构：是指同一套代码可以同时运行在服务端和客户端 路由同构 数据同构 渲染同构 脱水（dehydrate）：在服务端渲染直出 HTML 前将预取的数据注入到 window 中 注水（hydrate）：在客户端进行渲染前将 window 上绑定的数据传入到对应组件中

优点 有利于 SEO 首屏渲染快 局部刷新：无需每次都进行完整页面请求 缺点 Node 服务的性能压力 服务端和浏览器环境的差异

4、SSG静态站点

静态站点生成是指在构建时就会为每个页面生成包含内容的 HTML 文件，当浏览器在请求页面 URL 时，服务端直接返回 HTML 即可。

优点 有利于 SEO 首屏渲染快 减轻服务器压力 缺点 每次更改内容时都需要重新构建和部署应用程序 无法生成用户相关内容