渲染模式：SSR、SSG、ISR、CSR、SPA

#SSR 服务端渲染(Server-Side Rendering)

#原理

• 将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML “激活”(hydrate) 为能够交互的客户端应用

#优势

• 更快的首屏加载、更好的SEO

#考量

• 更高的服务端负载、合理的缓存策略

#SSG 静态站点生成(Static-Site Generation)

#原理

• 也被称为预渲染，如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的，那么我们可以只渲染一次，提前在构建过程中完成，预渲染的页面生成后作为静态HTML文件被服务器托管

#优势

• 性能高、更易部署

#考量

• SSG 仅可以用于提供静态数据的页面，即数据在构建期间就是已知的，并且在多次请求之间不能被改变。每当数据变化时，都需要重新部署

#场景

• 构建基于内容的网站，比如文档站点或者博客
• ...

#ISR 增量静态再生(Incremental Static Regeneration)

#原理

• 详见Next.js，SSG 和 SSR 的组合，提供一种机制能够在 Server 中自动的执行 SSG，主要形式是静态访问

#优势

• 通过为大多数请求提供预渲染的静态页面来减少服务器负载，能让内容尽量保持更新同时从访问行为上仍然保持静态访问

#考量

• 未预渲染的页面会先看到 fallback 页面，有可能访问数据过期的页面

#CSR 客户端渲染(Client-Side Rendering)

#原理

• 在浏览器上执行 JavaScript 以生成 DOM 并显示内容的渲染方法，通过数据 API 进行交互

#优势

• 部署成本低、动态交互丰富

#考量

• 首屏加载时间长、SEO不友好

#SPA 单页应用(Single Page Application)

• 操作的页面仅一个，其它类同 CSR...