SSR, SSG, ISR, CSR and Next.js 13

今天要來做一下筆記，紀錄一下搞了許久才搞懂的 SSR, SSG, ISR, CSR 這幾個概念。
當初轉職時曾使用過 PHP 寫網頁體驗過 SSR，但也只是 advanced hello world 那種體驗，之後沒多久就進階學了 jQuery, 學習了使用 javascript 操作 DOM，之後就一直學 React, 然後第一份工作繼續 React，直到現在這份工作才有機會接觸到 Next.js。

前端 Rendering Patterns 的演進

首先我們要先來談談 Rendering Patterns 的演進，我就盡力列，列一些我知道的，當然可能會有許多我沒涉獵我連聽都沒聽過的，所以這部分有興趣的可以再多查資訊研究一下。

1. Static Website
   靜態網站僅包含固定的內容，沒有動態資料的變化。這種網站在訪問時每次載入相同的內容。
2. Multi page App, MPA
   fetch data 與 HTML 都在 server 完成，所以在每次訪問新頁面時都會有白畫面(閃爍的感覺)，因為要等 server 回傳
   eg, django, laravel, wordpress
3. Single page app, SPA
   在瀏覽器 javascript 執行時才 fetch data。
   SEO 不友善、js bundle 如果太大包時渲染會很慢。
   eg. react, vue, angular
4. Server-side rendering with hydration, SSR
   server 負責 fetch data 以及 HTML，然後在瀏覽器執行 javascript。
   有點像是 MPA + SPA = SSR，且 SEO 是友善的唷
   eg. next, svelte kit, nuxt
5. Static site generation with hydration, SSG
   在 build 的時候就 fetch data, 也就是說在 build 完就會產生含有 data 的 html 檔案。
   所以說當資料有變時，就需要 rebuild again.
   eg. Jamstack, next, nuxt
6. Incremental static regeneration, ISR
   跟上面的 SSG 一樣，不過多了 invalidated 功能，例如說可以設置幾秒鐘後要重新 fetch data。
   eg. next
7. Partial Hydration
   利用 code splitting 來實現部分先渲染，部分等 user 需要的時候才渲染
8. islands
   不需要互動的 component 使用 html, 需要互動的使用 javascript 。
   eg. astro
9. streaming SSR
   next.js 13 新的 hydration 方式。
10. resumablitiy
    no hydration needed
    eg. qwik

7~10 我不是很了解，sry.

好的，接下來就要針對 Next.js 來介紹 ISR, SSR, SSG, ISR。

CSR

也就是一般寫 react 時的方式。

• 缺點： SEO 不友善
• 使用方式 : useEffect
• 適用場景：不需要SEO, 資訊非常的 dynamic, Admin Dashboard 等

SSR

每一次訪問頁面或者是重新整理頁面，都會發送 request 給 server，然後 server fetch data 後加上 markup 再給 client。

• 缺點：每一次 request，就會重新獲取資料，server 負擔太重
• 使用方式 : getServerSideProps 在 server 獲取 data, 在 component 的 props 可以拿到 data 來像純 react 一樣使用`
• 適用場景：需要SEO, 資訊是 dynamic, facebook, redit... 等

in next.js 13

const demoResponse = await fetch("http://.....", { cache: "no-store"})

SSG

每一次 build 或者是 rebuild 時會 fetch data, 產生出靜態網頁，並且在 client request 頁面時，傳送靜態網頁給 client。
也就是說，client 每一次 request 或重新整理頁面時，並不會像 SSR 一樣重新 fetch data。

• 缺點：如果 data 改變了， 已經變成靜態化的 data 並不會跟著更新，除非再 build 一次。
• 使用方式 : getStaticProps, getStaticPath 來獲取 data, 在 component 的 props 可以拿到 data 來像純 react 一樣使用。
• 適用場景：需要SEO, 資訊不會頻繁更新, blog, 官方網站... 等

in next.js 13 (預設方式就是 SSG)

const demoResponse = await fetch("http://.....", { cache: "force-cache"})

ISR

結合了 SSR 和 SSG 的優點。
像 SSG 一樣會在 build 的時候，將 data 靜態化，但是可以設置 revalidate 的時間，去重新獲取新 data，例如設定五秒 rebuild 一次。

• 缺點：如果 data 改變了， 已經變成靜態化的 data 並不會跟著更新，除非再 build 一次。
• 使用方式 : getStaticProps 來獲取 data, 並且在 component 的 props 可以拿到 data 來像純 react 一樣使用，跟 SSG 不同的是，會在 getStaticProps 回傳一個 revlidate 的參數來控制幾秒後要 re-generate page。
• 適用場景：需要SEO, 資訊相較頻繁更新, 購物網站... 等

in next.js 13 (預設方式就是 SSG)

const demoResponse = await fetch("http://.....", { next: { revalidate: 5 }})

之後有空會補上 demo 加深印象一下