Server Side Rendering架構

Next.js

CSR和SSR前端架構比較

Client Side Rendering (CSR)

Google和Facebook News Feed看到的網頁完全沒有內容，只有JavaScript檔案

<!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)

react-snap
react-static
gatsby
rendertron
puppetron
pupperender

SSR如何在React.js架構實作

React - Server Side Rendering (SSR)

技術考量於目標

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

線上資源

React - Next.js

建議使用create-next-app來建立新的app

線上資源

Next.js
- The React Framework for Sender-Rendered Apps
- SEO-Friendly Sites
- PWA
Next.js - React Server-side Rendering Done Right
Create Next App

Next.js如何結合Express.js

Buildilng a server-rendered React app with Next.js and Express.js

Next.js如何結合Firebase Cloud Functions

Redux如何資源Server Side Render

Server Side Rendering with Redux