🗒️首屏渲染方式
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item
静态页面生成 SSG (Static Site Generation)
在项目构建时生成包含内容的html，之后将相应的html、js、css等静态资源发布到相应的CDN节点，这样当用户进行访问时页面可直接渲染便较好的性能，尤其适合公司官网等变动频率不高的静态资源。
优点
- 静态页面生成的性能较好，适用于变动频率不高的静态资源。
- 服务端渲染可以根据数据生成最新的HTML，首屏渲染速度较快，SEO效果好。
缺点
- 所有用户看到的都是同一个页面，无法生成用户相关内容。
客户端渲染 CSR(Client Side Render)
指在 Web 应用程序中，页面的生成和呈现是在浏览器端（即客户端）完成的一种渲染方式。在浏览器中生成HTML，每次用户请求时只返回一个简单的HTML模板，然后在浏览器中使用JavaScript加载数据，生成和渲染页面。
缺点
- 白屏：客户端渲染需要浏览器先下载HTML和JavaScript资源文件，然后再解析和渲染页面，过程比较耗时，可能会导致白屏时间较长。
白屏时间
是指用户在加载网站或应用时，从页面请求发起到页面架构完毕并且首屏内容显示出来之间的时间。在这段时间内，用户可能直面一片空白，无法察觉到页面正在加载。
- SEO效果差：客户端渲染的页面内容一般是通过JavaScript动态生成的，而搜索引擎爬虫很难获取到这些内容，从而影响网站的SEO排名。
服务端渲染 SSR（Server Side Rendering）
每次用户请求时动态生成HTML，将生成好的HTML返回给用户。这种方式可以在每次请求时根据数据生成最新的HTML，但是相比静态生成，需要更多的服务器资源。
优点
- 首屏渲染速度快：由于页面的生成和呈现是在服务器端完成的，所以用户在访问页面时服务器可以返回已经渲染好的HTML，减少了浏览器的解析和渲染时间，从而可以更快地显示页面内容。
- SEO效果好：由于页面的内容在服务器端已经生成，所以搜索引擎爬虫可以直接获取到页面的内容，提高了网站的SEO排名。
缺点
- 开发中的限制。浏览器端特定的代码只能在某些生命周期钩子中使用；一些外部库可能需要特殊处理才能在服务端渲染的应用中运行。
- 更多的与构建配置和部署相关的要求。服务端渲染的应用需要一个能让 Node.js 服务器运行的环境，不像完全静态的 SPA 那样可以部署在任意的静态文件服务器上。
- 更高的服务端负载。在 Node.js 中渲染一个完整的应用要比仅仅托管静态文件更加占用 CPU 资源，因此如果你预期有高流量，请为相应的服务器负载做好准备，并采用合理的缓存策略。
增量渲染 ISR（Incremental Static Regeneration）
是一种介于静态生成和服务端渲染之间的解决方案。传统的预渲染如果需要更新内容就得将全部页面重新生成 HTML，而 增量生成 允许我们单独设置某一些页面重新生成据过期时，可以再次从 API 获取数据，并且生成静态页面，最适合常见的资讯类、新闻类网站。
总结选择
ㅤ | CSR | SSR | SSG |
运行端 | 浏览器 | 服务器 | 服务器 |
静态文件 | 单页面 | 由服务器即时生成 | 多个页面 |
SEO | 不适合 | 适合 | 适合 |
静态文件CDN | 适合 | 不适合 | 适合 |
适用场景 | 中后台产品 | 信息展示型网站 | 内容较为固定的资讯类网站 |
- 如果没有动态内容，可以使用静态页面生成 SSG。
- 如果有动态内容，但是动态内容和客户端相关，只能用客户端渲染 BSR。
- 如果有动态内容，且动态内容与请求/用户相关，可以使用服务端渲染 SSR 或 BSR。
- 如果以上情况都不符合，可以使用 SSG 或 SSR 或 BSR。
