補圖片筆記

reference:
Server-Side Rendering www.heavy.ai

Server-Side Rendering 伺服器端渲染

指的是應用程式在伺服器上呈現網頁，而不是在瀏覽器中進行渲染。
當一個網站的 JavaScript 在伺服器上被渲染時，會將完全渲染的頁面發送到客戶端，然後客戶端的 JavaScript 包會啟動並啟用SPA單頁應用程式框架運作。

伺服器端渲染（SSR）是App將 HTML 檔案在server轉換成完全渲染的 HTML 頁面，提供給客戶端的能力。網頁瀏覽器向server發送資訊請求，server立即回應，將完全渲染的頁面傳送給客戶端。
這樣有利於搜尋引擎在交付之前爬取和索引內容，有助於搜尋引擎優化。

一些常見的伺服器端渲染 JavaScript 框架包括：
Angular 伺服器端渲染、ejs 伺服器端渲染、Express 伺服器端渲染、Gatsby 伺服器端渲染、Google 伺服器端渲染、NestJS 伺服器端渲染、Next 伺服器端渲染、Nuxt 伺服器端渲染、React 伺服器端渲染和 Vue 伺服器端渲染。
React 的 SSR 框架 Next.js

Server-Side Rendering 優點

伺服器端渲染的 App 能夠加快頁面載入速度，提升使用者體驗。
在伺服器端渲染時，搜尋引擎能夠輕鬆索引和爬取內容，因為內容可以在頁面加載前就被渲染，這對於 SEO 是理想的。
網頁因載入速度快而被正確索引，因為網頁瀏覽器優先考慮載入速度較快的網頁。
伺服器端渲染有助於有效地為網速較慢或設備較舊的使用者加載網頁。

Server-Side Rendering 缺點

成本高和資源密集性: 伺服器端渲染不是 JavaScript 網站的預設選項，伺服器需要承擔將內容渲染給使用者和機器人的全部負擔，這可能成本高且資源消耗大。

複雜應用程式的負載時間增加: 雖然在伺服器端渲染靜態 HTML 是有效的，但在渲染更大、更複雜的應用程式時，可能因為瓶頸而增加載入時間。

不適用於第三方 JavaScript 代碼: 伺服器端渲染可能與第三方 JavaScript 代碼不兼容。

不適用於較複雜應用程式: 雖然伺服器端渲染在靜態網站生成方面可能是理想的，但在較複雜的應用程式中，頻繁的伺服器請求和完整的頁面重新載入可能導致整體頁面渲染速度較慢。

頁面由伺服器產生，每次更新頁面都需要全畫面重新渲染。
伺服器取得資料後，需要計算畫面並整頁送出，運算及流量的負荷都太大。

Server-Side Rendering vs Client-Side Rendering (CSR)

在客戶端渲染中，從 HTML 文件中接收所有內容不同，客戶端使用客戶端 JavaScript 庫在瀏覽器中渲染內容。
當新頁面加載時，瀏覽器不會向伺服器發送新請求。
由於在瀏覽器加載頁面之前未渲染內容，這可能會對搜尋引擎排名產生負面影響，但在客戶端渲染的App中，網站渲染速度通常較快。
在考慮伺服器端和客戶端渲染時，開發者將評估項目規模、應用程式的複雜性、使用者數量和使用者體驗優先順序等因素。