工程開發 Engineering > :hamburger: 前端架構 Front-End Stack > SSR前端架構 Server Side Rendering

繁體 | 简体 | English


Server Side Rendering架構 Next.js


CSR和SSR前端架構比較

Client Side Rendering (CSR)


<!DOCTYPE html>
<html>
  <head>
    <title>My SPA APP Title</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/bundle.js"></script>
  </body>
</html>


Server Side Rendering (SSR)


Prerendering (Static Sites)


SSR如何在React.js架構實作

React - Server Side Rendering (SSR)

技術考量於目標

  1. 第一次網頁下載速度要快,CSR會有延遲
  2. 為了SEO考量,網頁資料需要能被Google Crawler/Indexer容易找到,資料不能藏在JavaScript裡
  3. 當網頁被分享到social media時(Facebook, LinkedIn news feeds),HTML需要直接有網頁的內容,不然會沒有preview
  4. 應用SSR程式複雜度不能太嚴重,維持開發程式的簡易及速度

線上資源


React - Next.js

線上資源

Next.js如何結合Express.js

Next.js如何結合Firebase Cloud Functions

Redux如何資源Server Side Render