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 实作不同渲染模式的网站！
大家对于今天学到的渲染模式有什麽想法呢？