Photo by Lautaro Andreani on Unsplash
嗨大家！连假第一天过得如何？～ 今天想跟大家分享的主题是各种网页渲染模式，就是 SSG、SSR、CSR、ISR。长得都差不多，可是细节都不太一样，在决定要用哪一种之前，我们先看看下面的介绍吧！
Static Site Generation (SSG)
SSG 或是静态生成就是 build 整个项目的时候产生 HTML 文件，这些 HTML 文件已经包含所需要显示的数据。这渲染模式是预渲染 (pre-rendering) 的一种。SSG 很适合做内容不会有变化的静态网站，因为所有数据是 build 时得到的。这些 HTML 文件可以放在 CDN 上然后被 cache 而提升网站性能，除了这点之外，采用 SSG 渲染模式也利于 SEO。
Server-side Rendering (SSR)
SSR 或是服务器端渲染意思是每次浏览器 (客户端 / client-side) 发送请求 (request) 時，服务器才会产生 HTML 文件然后丢回浏览器显示。这渲染模式很适合变化频率高的数据。不过因为服务器需要时间产生 HTML 文件，所以网站响应时间会比较久，用户等待时会看到白屏。SSR 也算是预渲染的一种，所以对 SEO 也蛮友善的～ 可是该注意，这方式需要服务器一直处理用户的请求。
Client-side Rendering (CSR)
CSR 或是客户端渲染跟名字差不多的意思，服务器傳給瀏覽器的 HTML 文件可以算是无内容的。浏览器跟服务器拿完数据才能渲染在画面上。SPA (Single Page Application 像 React 或 Vue) 使用的渲染模式就是 CSR。这模式的最大优点是切换页面的时候不需要再跟服务器拿文件，用户不会看到白屏了，算是很好的用户体验。不过渲染时间会依赖客户端的环境，也因为这样，服务器的负担降低不少。
Incremental Static Regeneration (ISR)
ISR 或是增量静态生成比较少听到的渲染模式，也算是预渲染的一种。ISR 在 build 项目时产生所有 (或部份) HTML 文件，等到有新的 request 而且已经过了预定的时间，服务器会先给浏览器旧文件而在背后重新产生最新文件，产生完之后再丢给浏览器做显示。如果用户到了一个还没被 generate (产生) 的页面，服务器将当下产生该文件也会做 cache，所以下一个到这页面的用户可以直接拿到 cache 里的文件。 ISR 很像 SSG 不过它解决了 SSG 不能更新数据内容的问题，而且 HTML 文件也会被 cache 在 CDN 上，所以也减轻 SSR 对服务器的负担。
该用哪一种呢？
每一种渲染模式各有优缺点，该选哪一种也要看我们的项目，无法说出赢者。
- 数据不断地变化而且不需要 SEO 的内部系统 dashboard 很适合用 CSR，
- 数据变化率不低可是需要 SEO，可以考虑用 SSR，
- 数据几乎不用更新像活动或营销网站，SEO 也很重要，用 SSG 很适合，
- 数据不太需要更新或是有太多页面而且需要 SEO 例如商品页，那 ISR 就是个好选择。
我也有画一个表，不过用英文的ＸＤ 大家可以看看～
Next.js 中的 Pre-render
Next.js 内建支持上面所写的渲染模式，而且还默认用 SSG 渲染不需要抓取 (fetch) 数据的网页，如果需要跟服务器拿数据，那会跟 CSR 混用 (hybrid)。想要使用其他的渲染模式可以用以下 Next.js 提供的 functions：
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | build 项目时抓取所需要的数据而放进 HTML 文件里 |
| getStaticPaths (Static Generation) | 在 build 时间决定哪些动态 (dynamic) routes 需要被产生 HTML 文件 |
| getServerSideProps (Server-side Rendering) | 每次浏览器发请求的时候会跑的 function 拿所需要的数据 |
小结
今天先到这里，我们明天再继续喔～ 明天跟大家分享怎么使用以上那三个 functions 实现不同渲染模式的网站！ 大家对于今天学到的渲染模式有什么想法呢？