這篇文章的主要內容

簡單介紹 SSR & Next.js

CSR( Client Side Rendering)

在前面有提到 react 是一個 CSR( Client Side Rendering) 的前端 Library，什麼是 CSR 呢？

CSR 顧名思義，就是網頁上所有的內容都是在前端透過 JavaScript 來產生的，當用戶對 server 發送 request 的時候後端回覆的 html 文件通常只有非常基礎的內容以及一個 root 的 div tag，沒有其他東西了。

可以在前面示範過的任何一個專案點擊滑鼠右鍵，然後瀏覽網頁原始碼，就會看到這個畫面，不管你網頁的內容有多豐富多精美，在 server 這邊回應的 html 文件就只有這樣。

CSR 有什麼優缺點呢？

優點:

1. 使用者體驗較佳：在 CSR 的網站上做分頁切換時其實背後都只是元件的切換，不需要重新對 server 發送 reques 重新載入頁面，所以速度非常快速，多數的一頁式網站都是這樣。
2. 離線使用：如果網頁的內容只是單純的資料顯示，不需要再次向 server 發送 request 的時候，因為資料都已經載入了，即使用戶的裝置離線一樣可以使用。

缺點:

1. SEO 評分較低：CSR 的網站就像上面看到的一樣，裡面的內容都是空白的，所以在 SEO 的排名上會非常糟糕，因為不知道這個網站的內容是什麼，要推薦這個網站給哪些用戶，大部分的網頁都希望可以接觸到大量的使用者，特別是像電商或是社群的網站。
2. 行動端使用體驗較差：因為所有的內容都是透過 JavaScript 在用戶端運行所產生出來的內容，如果是使用電腦訪問的話影響還不大，但是在現在多數人都使用行動裝置的時候，如果行動裝置的網路不穩定或是裝置的狀況不佳時，可能就會大幅的影響使用者在瀏覽網頁時的狀況。

SSR (Server Side Rendering)

SSR 跟 CSR 不同，SSR 是在 Server 端就執行獲取資料的行為，把取得的資料產生成一份完整的 html 文件，然後才做 response 的動作，所以用戶端這邊就會直接取得完整的 html 文件，不需要透過 JavaScript 產生網頁上的內容。

SSR 有什麼優缺點呢？

優點:

1. SEO評分佳：response 取得的是一份完整的 html 文件，所以 SEO 可以清楚地知道這個網頁的內容是什麼需要推薦給哪一些用戶，在 SEO 的排名會比 CSR 的網站來得更高，可以接觸到更多用戶。
2. 行動端使用體驗較佳：因為大部分的東西都在 server 端處理好了，所以即使是行動端的用戶也可以快速的取得網頁的內容，提升用戶提驗。

缺點:

1. Server 端壓力大：因為大部分的內容都是在 server 端進行處理，當網頁造訪人次較多時，server 除了要同時處理大量的 request 時還要同時處理 html 跟 JavaScript，對 server 的壓力會較大。
2. 首次載入時間較久：因為大部分的東西需要在 server 運行，所以會加長 request 的時間，用戶取得 response 的時間會比 CSR 來得稍微長一些。但是這並不是絕對的，因為 JavaScript 會比 CSR 再小一些，所以也有可能比 CSR 來得快。

另外除了 CSR 跟 SSR 以外還有一個 SSG

Static Site Generation (SSG)

SSG 跟 SSR 有些類似，但是有一點不同，SSR 會在收到 request 的時後執行獲取資料的動作，但是並不是所有的頁面都會有這個需求，有的頁面可能內容是固定不會改變的，比如首頁或是服務中心等...，這個時候就可以透過 SSG 來處理。

SSG 產生的 html 不是在收到 request 的時候才產生的，而是在 build 專案時就產生一份固定的 html，在之後當用戶對 server 發送請求時 server 就會直接回覆 SSG 所產生的 html，藉此來減輕 server 端產生 html 的壓力。

簡單帶過 CSR / SSR / SSG 的差異之後，在 react 的專案裡面要怎麼實現 SSR / SSG 的效果呢？

在 react 裡面如果要實現 SSR 跟 SSG 的效果，會需要透過 express 另外起一個 server，來做 response，還會需要使用到 react-dom/server 所提供的 renderToString 或者是其他 API 來協助做到產生靜態 html，然後在本來的 index.js 裡面的 ReactDOM.createRoot(root).render(<App / >) 也必須要改成 ReactDOM.hydrate(<App />, root) 才可以，跟過去相比會有比較複雜多流程以及較高的學習曲線，但是這些內容我們都可以透過 Next.js 來簡化。

Next.js

Next.js 是由 Vercel 團隊所維護的 react 全端框架，搭配 react 18 之後所推出的 server component 讓我們在開發的過程中可以自行定義 component 要在 server 產生或是在 client 產生，依照不同的情境跟需求來讓我們的產品可以有 SSR / SSG 的結果。

create

我們可以透過簡單的指令來建立一個 next.js 的專案。

npx create-next-app@latest
or
yarn create next-app

輸入完指令之後會出現下面這些問題:

• What is your project named?
• Would you like to use TypeScript?
• Would you like to use ESLint?
• Would you like to use Tailwind CSS?
• Would you like to use src/ directory?
• Would you like to use App Router? (recommended)
• Would you like to customize the default import alias?

都回答完之後就成功建立一個基本的 next.js 專案了。

run

可以 cd 進到路徑啟動專案看看。

npm run dev
or
yarn dev

到 port 3000 看到這個畫面就代表你成功啟動專案了。

上面有提到 Next.js 會幫我們處理 SSR / SSG 的部分，可以點擊滑鼠右鍵看看檢視網頁原始碼。

會發現原始碼不再是空空的只有一個 <div id="root"></div> 元素，而是很多網頁上具備的內容了。

renderToString - react document
Next.js document

下一篇終於結束啦！
如果內容有誤再麻煩大家指教，我會馬上修改。

這個系列的文章會同步更新在我個人的 Medium，歡迎大家來看看 👋👋👋
Medium