or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)
tags:
front-end
Outline
Processing Flow
The processing flow from the Build step on the Server side up to the Client-side rendering.

採用 pre-rendering 預渲染的方式:SSR、SSG、ISR
Reference
Web性能指標
發出 HTTP request 到獲得 HTTP Response 第一個 byte 的時間
任何一個 pixel(像素)被瀏覽器繪製到頁面上的時間。可能是簡單的背景色更新或不引人注意的內容,它並不表示頁面內容完整性
當瀏覽者到達網站之後,首次顯示網站內容需要的時間,內容可以是文本、圖片(包含背景圖)、非白色的 canvas 或 SVG,也包括帶有正在加載中的 Web 字體的文本。
可視區域中最大的內容元素呈現到屏幕上的時間,用以估算頁面的主要內容對用戶可見時間。
頁面從不能互動到可以接收事件產生互動性的時間,瀏覽器已經可以持續性的響應用戶的輸入。
Client Side Render (CSR) 客戶端渲染
Flow
特色
優點
缺點
Code Example
Special Function:
useEffect
Server Side Render (SSR) 伺服器端渲染
Flow
特色
優點
缺點
(1) 網速慢
(2) 有大量 User
(3) Sever 端寫的程式碼太糞
Code Example
Special Function:
getServerSideProps
每次有 request (請求) 的時候在 Server side 執行。除了會產生 HTML 檔案,也會產生 JSON 檔案。
Static Site Generate (SSG) 靜態生成
Flow
特色
優點
缺點
Code Example
Special function:
getStaticProps
getStaticProps
會在執行 npm run build 的時候執行並抓取所需要的資料。伺服器跑完該 function 後,除了產生了 HTML 檔案,會另外產生 JSON 檔案。在 Client-side (客戶端) 瀏覽器會讀取該 JSON 檔案裡面的資料用來顯示 page 內容。Incremental Static Regeneration(ISR) 增量靜態生成
Flow
revalidate
參數設定幾秒後拿新的資料重新 Build 與產生頁面。特色
stale-while-revalidate concept


Reference
Reference
可以在 ISR 重 load 幾次資料,會發現有時 server response status code 是 304,代表瀏覽器直接從本身的 cache 讀取內容,所以檔案傳輸非常小。

若使用 Vercel 服務作部署,可留意 Response Headers 中 x-vercel-cache 的值,若為 STALE 代表目前拿到的是在 cache 中的舊版本。


A background request to the origin was made to get a fresh version.
Reference
ISR 很像 SSG,不過它解決了 SSG 不能在 run time 更新資料內容的問題,而且 HTML 檔案也會被 cache 在 CDN 上,減輕對伺服器的負擔(這部分比 SSR 好),網站效能較佳。
優點
缺點
Code Example
Special function:
getStaticProps
+revalidate
在 Next.js 中要啟用 ISR 跟 SSG 的寫法很像,只是要多指定需要 revalidate 的時間
Demo
Demo
How to Choose
Next.js 可依專案需求支援不同頁面決定要使用 CSR, SSR, SSG, ISR 等不同的渲染方式。
需留意使用了 SSR 就要考慮 Server 端要處理的事情,因此可視專案架構、是否所有頁面都有 SEO 的需求,來決定 SSR 與 CSR 搭配的比例。
Reference
Practice
Ans:
Reference
https://www.patterns.dev/posts/Server-side-rendering/
https://guydumais.digital/blog/next-js-the-ultimate-cheat-sheet-to-page-rendering/
https://theodorusclarence.com/blog/nextjs-fetch-method
https://theodorusclarence.com/blog/nextjs-fetch-usecase?fbclid=IwAR1LXJ-ISy1G1XcFh0CNpwR9MAL-wguj1xspfhIt_094xdCAWWst27URIws
https://vercel.com/docs/concepts/next.js/incremental-static-regeneration
https://ithelp.ithome.com.tw/m/articles/10279519?sc=rss.iron
https://medium.com/starbugs/初探-Server-side-rendering-與-next-js-推坑計畫-d7a9fb48a964
https://codertw.com/程式語言/759865/#outline__2_4
https://ithelp.ithome.com.tw/m/articles/10267249
Further study
https://nextjs.org/docs/basic-features/data-fetching/overview
https://ithelp.ithome.com.tw/m/articles/10267894