#03 No-code 之旅 — 什麽是 SSG、SSR、CSR、ISR？

嗨大家！连假第一天过得如何？～ 今天想跟大家分享的主题是各种网页渲染模式，就是 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：

• getStaticProps (Static Generation): build 专案时抓取所需要的资料而放进 HTML 档案里
• getStaticPaths (Static Generation): 在 build 时间决定哪些动态 (dynamic) routes 需要被产生 HTML 档案
• getServerSideProps (Server-side Rendering): 每次浏览器发请求的时候会跑的 function 拿所需要的资料

小结

今天先到这里，我们明天再继续喔～
明天跟大家分享怎麽使用以上那三个 functions 实作不同渲染模式的网站！
大家对於今天学到的渲染模式有什麽想法呢？

晚安 <3

看更多

• Next.js Data Fetching
• Incremental Static Regeneration