從歷史的角度探討多種 SSR（Server-side rendering） - Huli's blog

[utterances-bot]

從歷史的角度探討多種 SSR（Server-side rendering） - Huli's blog

你知道嗎，當你跟朋友在討論 SSR 的時候，很有可能你們對 SSR 的認知其實是不一樣的。直接舉個例子，底下這幾種情境，你覺得哪些算是 SSR？ 由後端 PHP 產生畫面 前端是 React 寫成的 SPA，但後端如果偵測到搜尋引擎，就會切換另一種 template，輸出專門針對搜尋引擎的模板，而非 React

https://blog.huli.tw/2023/11/27/server-side-rendering-ssr-and-isomorphic/

[ray-mj-huang]

謝謝 Huli 大大的分享！

不過我現在看 App Router 版的 Next 文件，好像它不再使用 SSG、SSR 的說法了，而是使用以下的名詞：

• Static Rendering
• Dynamic Rendering
• Streaming

https://nextjs.org/docs/app/building-your-application/rendering/server-components

---

但沒想到 Pages Router 版的文件仍然會使用 SSG、SSR 的說法（也太容易混淆 XD）： https://nextjs.org/docs/pages/building-your-application/rendering

[Eliot5566]

謝謝大大分享，獲益良多

[ShihTingJustin]

最喜歡考古文了，推推推👍🏻👍🏻👍🏻

[thingasd]

強 又學到了👍🏻👍🏻👍🏻

[twozwu]

感謝大大寫了這篇，剛好最近在練習 Astro，看了文章才能終於理解 astro 的架構到底在幹麻....以及水合 hydration 到底是什麼碗糕...，有一種打通經脈的 feel ，不然真的一頭霧水。👍👍👍

[aszx87410]

@ray-mj-huang 是的，Next.js 目前的文件都分兩個版本XD 因為變成 server components 以後整個模型改變滿多的，所以才用了舊版本 Pages Router 的文件，比較符合當時的時代背景

@Eliot5566 @ShihTingJustin @thingasd 感謝留言支持！

@twozwu 滿多新東西其實都是基於舊的演變延伸而來，把脈絡整個搞清楚之後應該就順很多了XD

[weilliao05621]

感謝解釋！

很喜歡在各階段看到對應解法的感覺。當知道「有明確的問題要解決」的時候，比較容易專注。

也很喜歡這篇明確提到 SSR 要解決的 CSR 問題！同時解決了我對於 isomorphic / universal, progressive hydration, island 等等概念的疑惑。

[benq-johnny-yh-lin]

我認為 SSR 這個字開始頻繁出現 是跟 CSR 成對的 畢竟當你今天想要使用 CSR 做 SPA 時 你要怎麼敘述原本非 CSR 的概念(如 php), 那就是 SSR 拉~ 所以我覺得 SSR 開始大量出現時, 並非是為了解決 CSR 的問題 而是 CSR 本身的相反詞就是 SSR