Client Side Rendering
NextJs 是一個非常流行的 React 框架，其中一個優美的特性是能夠使用不同的呈現技術構建 Web 應用程序，例如
客戶端渲染 CSR 服務器端渲染 SSR 靜態站點生成 SSG 增量靜態再生 ISR 客戶端渲染CSR這就是大多數 Web 框架(如 Angular 和 React)開箱即用的支持。這通常適用于單頁應用程序(SPA)和具有大量用戶交互(如游戲)和高度動態內容(如表單和聊天應用程序)的應用程序。
Client Side Rendering
基本上 web 瀏覽器最初會加載一個空的 html 文件。然后加載的 JAVAscript 和樣式負責在客戶端渲染頁面
服務器端渲染SSR
CSR 的主要缺點是它 seo 不好。因此，大多數的 Web 框架，也提供了在服務器上呈現頁面的能力。
Server Side Rendering
與 CSR 不同的是，每個頁面都會向 AppServer 發起一個請求，然后在 AppServer 中動態呈現并為該頁面提供完整的 HTML。因為每次用戶請求時，它都會請求并呈現頁面，所以頁面服務時間比 CSR 應用程序要長。（需要服務端有比較好的性能）
靜態網站生成SSG
為了避免在每個請求中渲染，為什么我們不在構建時生成這些文件，這樣我們就可以在用戶請求時 立即 為頁面提供服務。
Static Site Generation
如果您想要構建一個充滿靜態內容(如 blog)的 Web 應用程序，這種技術將非常方便。一個缺點是內容可能過時，每次更改內容時都需要構建和部署應用程序。(在 CMS 中)
增量靜態再生ISR
ISR 是 SSG 的下一個改進，它定期構建和重新驗證新頁面，以便內容永遠不會過時。
Incremental Static Regeneration
比較
為了比較這四種技術，我們將考慮以下指標。
構建時間-值越少越好。 適用于動態內容-如果這個值很高，那么該技術更適合于具有大量動態內容的應用程序。 搜索引擎優化-大多數情況下，最好是有一個良好的搜索引擎優化價值。 頁面服務/渲染時間-在網頁瀏覽器中渲染整個頁面需要多長時間。值越低越好。 最新內容-表明它總是提供最新的內容。值越高越好。 靜態服務器/應用程序服務器-這種技術是否需要一個靜態服務器或應用程序服務器。通常，靜態服務器消耗的資源要比應用服務器少得多。
Comparison of CSR,SSR, SSG and ISR
一些關鍵點
與 SSR 相比，Page Serve/Render Time 在 CSR 中的使用時間更短，因為在初始資產加載之后，CSR 可以非常快速地加載其余頁面。但在 SSR 中，每個頁面請求都將由應用服務器提供。 與 SSG 相比，頁面服務/渲染時間在 ISR 中更長，因為 ISR 定期從服務器請求更新的頁面。 ISR 沒有最新的內容，因為有一個小窗口時間，用戶可以在定期內容刷新之前獲得過時的內容。 結論在 Highlevel 中，我們可以根據應用程序的動態交互級別將這些渲染技術分為兩大類。
CSR 和 SSR 可用于開發高度動態的 Web 應用程序，根據場景的不同，它們各有優缺點。 如果您有一個高度靜態的內容，您可以使用 SSG 或 ISR。ISR 更先進和優化，但它需要特定的平臺才能工作。 參考 NextJs作者:速凍魚
出處:https://mp.weixin.qq.com/s/62nsr8Kb0ZgiQVaZjkQC3w
