avatar
instagramthreads

CSR

Client Side Rendering flow

流程

<!DOCTYPE html>
<html lang="en-US">
  <body>
    <div id="app"></div>
    <script src="/dist/bundle.js"></script>
  </body>
</html>
  • 輸入網址，瀏覽器載入 HTML
  • 解析並開始下載由 React 打包的 bundle.js
  • React runtime 建構 DOM 結構後，用 ReactDOM.render 插入到 id=”app” 中
  • 後續互動由 runtime 處理，並透過 API 與 server 交換資料

優點

  • 提供 SPA 體驗，切換路由時無需刷新頁面

缺點

Client Side Rendering for SEO
  • SEO 不佳：參考上圖，儘管現在搜尋引擎已經能解析 CSR 網站，但當有 large payload、API response 緩慢等問題，會導致有意義內容無無法更快地被渲染，而讓爬蟲無法對其索引，進而影響 SEO
  • 效能問題：隨著應用複雜，bundle size 增加，首屏載入過久，會導致 FCP、TTI 效能指標不佳
  • 維護性：有些商業邏輯被分開放在 client、server side 但其實可能可以共用
  • 資料拉取速度較慢：一定需要等畫面渲染後才能觸發 API 去拉取資料
  • 社群平台 OG 資訊需搭配 pre-render server 協助產生

References

Previous Article

← 渲染模式介紹與前導知識

Next Article

傳統 SSR →