Nextjs

看了一下 next.js ，感覺只是將原本 react 提供的 js 檔案先轉成 html 再輸出，還是獨立伺服器處理，不像 express-handlebars 可以跟 node.js 整合在一台伺服器內 [MozTW] 我不太喜歡把 Next.js 的渲染模式歸結成任何形式 (SSR or CSR or SSG)，但想和你分享一下為什麼 Next.js 不是另一個 express-handlebars，以及 Next.js 團隊到底在渲染下做了多少事情。 express-handlebars 通常是純粹的 SSR，不考慮你在頁面中插入的 JavaScript，handlebars 不用往產物增加 JavaScript 恢復互動元素（也就是 Hydration）。 Hydration 是指 React 接管由伺服器產生的靜態 HTML、並為其附加事件監聽器與狀態，使其從無生命的骨架變成可互動應用的關鍵步驟。 純粹的 React，就以搭配 Vite 來說的話，是 CSR。因為背後不用有配合的伺服器，放在可以 host 靜態網站的 web server 上就可以（比如 NGINX、Caddy 這種）。 Next.js 的 Client Components 是怎麼做 SSR 的？ 接下來回頭看 Next.js。如果只看 Client Component，會相對簡單一點，可以分成 SSG (+ISR)、SSR、CSR 的部分1 2 3： 如果是靜態路由（瀏覽器輸入什麼，產物都相同），Next.js 會在編譯期 (build time) 產生頁面，這叫 SSG (Static Site Generation)。另外還有一個叫 ISR (Incremental Static Regeneration) 增量渲染，如果 SSG 的頁面到期了，或者是遇到 SSG 不能推斷的頁面，就重新渲染。 如果是動態路由（比如 ?q=xxx 或 /products/[id]），Next.js 會在存取當下 (request time) 先行渲染不需要瀏覽器的部分（e.g. useEffect），也就是 SSR (Server-side Rendering) 然後留下一些 metadata 指示前端做 hydrate。 如果你在 useEffect 裡面做了 fetch，部分頁面元素是在瀏覽時才渲染，那就是 CSR (Client-side Rendering)。 從這點來看，Next.js 只是把一些瀏覽器該做的事情，放到伺服器上運作，來改善 SEO 和瀏覽器渲染的效能。你也可以大膽猜測，如果沒有 Next.js，你的那堆元件在瀏覽器上依然還是可以正常渲染——舉例來說，如果你用 next/dynamic 搭配 ssr: false 把整個元件變成不 SSR 的懶載入，那元件就不會在伺服器上渲染4。 ...