網頁前端畫面渲染(Rendering)方式介紹:SSR/CSR/SSG/ISP
網頁渲染(Rendering)是將 HTML、JavaScript、資料等代碼,轉換為使用者肉眼可見網頁畫面的過程。 從網頁開發的角度中,渲染通常涉及將資料和網頁模板結合,生成最終顯示在瀏覽器中的 DOM(Document Object Model)結構。 渲染的方式有很多,雖然對使用者而言都大同小異,都是點擊網頁後,等待頁面載入後看到畫面。但不同渲染方式背後的處理邏輯、影響卻大不相同。 渲染處理得好不好,會直接影響到UX、SEO 與伺服器效能。 目前在網頁開發上,主要有 4 種頁面渲染技術, 每種方式在資料傳遞與適用情境上都略有差異。 渲染方式 全名 中文名稱 CSR Client-Side Rendering 客戶端渲染 SSR Server-Side Rendering 伺服器端渲染 SSG Static Site Generation 靜態網站生成 ISR Incremental Static Regeneration 增量靜態重新生成 本文會介紹以上提及的 4 種渲染方式,並且以 React 框架開發網頁為範例說明。 客戶端渲染 CSR CSR(Client-Side Rendering)是將所有的渲染工作交由瀏覽器(客戶端)進行,伺服器僅提供一個基礎的 HTML 文件,瀏覽器通過 JavaScript 動態渲染呈現畫面,能透過 API 取得資料,並且更新頁面內容。 CSR 的特色是能對於伺服器的負擔較小,可以將部分的網頁載入需求分配給瀏覽器完成,因此對瀏覽器負擔較大,畫面的載入時間也會相對較慢。 由於多數的網路爬蟲、搜尋引擎爬蟲都是直接透伺服器跟網站 request 網頁資料,直接透過對方 response … Read more