这是我参与「第五届青训营 」伴学笔记创作活动的第2天
本文主要介绍CSR客户端渲染、SSR服务端渲染、SSG静态站点生成、SSR和SSG的优势与不同和Next.js。
CSR客户端渲染
- 常见B端Web应用开发模式，内网使用，前、后端分离，服务器压力相对较轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作，在每次渲染之后获取数据。
- 缺点：首屏时间较长。
SSR服务端渲染
- 在每次渲染之前获取数据
- 代码耦合度高。
- 模板语言中混杂编程语言，对于一些复杂的功能，较难维护。
- java、PHP负责渲染和逻辑，前端只负责UI和交互。
- 用户体验更好。
同构SSR
- 前后端一体化（一套React代码在服务器运行一遍，到浏览器又运行一次），前后端都参与渲染，且首次渲染出的HTML要相同。
- BFF服务于前端应用的后端，属于前后端的中介。
SSR的实现
基于React提供的相关服务器端渲染API实现，过程较复杂，所以需要一个封装好的集合来实现SSR。
SSG静态站点生成
- 在构建时，直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源，在构建时获取一次数据。
- 优点：相比SSR，可大幅度减轻服务器端的压力，是因为SSG不需要每次请求都由服务器端处理。
- 缺点：只能用于偏静态的页面，无法生成与用户相关的内容（所有用户访问的页面都是相同的）。
- CDN：建立并覆盖在Internet上，由分布在不同区域的边缘节点服务器群组成的分布式网络。
SSR和SSG的优势与不同
优势
- 首屏时间较短
- SSR/SSG只需要请求一个HTML文件，就能展现出页面，不再需要请求大量js文件。
- 虽然在服务器上调取接口，但服务器之间的通信要远比客户端快，甚至是同一台服务器上的本地接口调取。
- 利于SEO
区分
SSR：每次请求都由服务端完成路由html的生成并返回。（需要逐个检查）
SSG：构建时，完成所有路由html的生成，更新页面效果需要重构建。（一次性完成）
Next.js
- 基于Node.js的开源Web开发框架，支持基于React的Web应用程序功能。
例如：服务端渲染和生成静态网址。
- 优点：功能齐全，有足够多的性能优化和生态，有利于开发前后端一体化。
