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 DOM Server
- JavaScrip SEO: SSR vs CSR
- SSR with React
- Server Side Rendering with React
- Server Side Rendering with React, Redux, and React-Router
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
Next.js如何結合Firebase Cloud Functions
- Next.js on Cloud Functions for Firebase with Firebase Hosting
- Next-routers with Firebase Hosting on Cloud Functions
- NextJS with Firebase Cloud Functions