---
tags: React, Next.js
---
# Tech sharing:

## :memo: todo list
1. What’s http request/response ?
2. What’s server/client side render ?
3. Why we need Next.js ?
4. Functional Javascript

### 1. What's http request/response?
HyperText Transfer Protocol 縮寫：HTTP
HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起。
https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

*HTTP 就是一套網路傳輸協定，而今天要學的就是這套協定的內容是什麼，以及如何實作一個簡單的 Client 與 Server 端。要了解全球通訊網的基礎，才有辦法依照標準來實作網站。*

Client & Server
一般來說傳輸資料的兩端會分為 客戶端 ( Client ) 跟 伺服器端 ( Server )

Client： 以網頁來說就是你的瀏覽器、電腦，主要會發送 「 請求 request 」到 Server 端
Server： 收到 request 開始處理資料，完成後會回傳 「回應 response 」到 Client 端

傳統的瀏覽網頁的方法(server side render)
1. 使用者透過瀏覽器(Chrome, IE, Brave...)
2. 輸入網址
(過程會經過網路層，在此不贅述)
3. 透過http協議發送請求給伺服器
4. 伺服器將製作好的網頁(.html file)Response 給瀏覽器
5. 瀏覽器載入取得的html網頁
6. 使用者就可以看到網頁囉
補充: 伺服器是甚麼呢?想像就是一台只做特定事情的電腦

現代的做法(client side render)
1. 直接載入html的框
2. 透過JavaScript發送http request
3. 取得JSON格式的資料
4. 透過JavaScript將純粹的資料放入html中該放的位置

瀏覽器主要做的事情:
1.進行解析 html、css、js、圖片檔案…等等，渲染成可讀性高的網頁內容
補充資料:
1. https://medium.com/pierceshih/%E7%AD%86%E8%A8%98-%E4%BD%95%E8%AC%82-http-%E5%82%B3%E8%BC%B8%E5%8D%94%E5%AE%9A-1d9b5be3fd24
2. https://yakimhsu.com/project/project_w4_Network_http.html

### 2. What's server/client side render?

1. Pure server side render
1) 在後端取得所需資料後，把完整的HTML組成
2) 傳回瀏覽器

透過伺服器端渲染能讓 SEO 效果不錯，但是使用者體驗較不佳
Framework type: PHP(Lareval) JSP(Spring) .NET Node.js(Express, Kao)

範例:https://www.nkust.edu.tw/index.php
2. Pure client side render
1) 只會有一頁html, 製作組成內容都靠JavaScriptt

2.1 CSR - Client-Side Rendering（客戶端渲染）
渲染過程全部交給 Client 端的瀏覽器去處理，Server 端不參與任何渲染。一開始的 HTML 是空白的，需要等待 JavaScript 下載並執行後瀏覽器才會顯示畫面。

優點
1. 減少 Server 端的壓力因為 JavaScript 及 CSS 在第一次都已經發送到 Client 端，之後只需要向 Server 端取得相關頁面的 data 即可。
2. 頁面切換速度快
`因為 HTML 頁面都是 Client 端自己編譯的，所以頁面切換時不需要像 SSR 等待 Server 端回傳 HTML；而且網頁內容的改變通常都是局部的，這樣就避免了不必要的跳轉及重複渲染。`

缺點
1. 首屏顯示慢，明明首頁只有一點內容卻下載了所有頁面的資源。
2. SEO 較差
`因爲一開始的 HTML 頁面是空白的；儘管現在 Google 的爬蟲也會等 JavaScript 編譯好再爬，但這塊對 SEO 的實際幫助還需要時間驗證。`

應用場景
1. 會高頻操作且不需 SEO 的網站
2. 像是社群網站（Facebook, IG），如果這類型的系統採取 SSR 會造成 Server 端較大的負荷。

4.2 SSR - Server-Side Rendering（伺服器端渲染）
HTML 由 Server 端編譯出來返回 Client 端，所以 Client 看到的畫面就是最終版 HTML。

優點
1. SEO 排名更高
2. 因為 Google 爬蟲可以直接抓到網站的資訊。
3. 首屏渲染快
`因為不需要下載一堆 JavaScript 及 CSS ，還要等待它們編譯後才看到頁面。
減少 Client 端的耗電量，因為編譯的步驟都在 Server 端執行。`

缺點
1. Server 端承受比較大的壓力
2. 由於頁面都是在 Server 端進行編譯，在高併發場景中會消耗相當大的資源。

應用場景

低頻操作但需要 SEO 優化的網站
像是媒體類型的網站（部落格、新聞網站、技術文件），因為文章要被搜尋到才會有流量及話題，而且大部分的時候 Client 端都在閱讀，很少有高頻操作的情境。

Framework : React.js, Angular.js, Vue.js
https://www.facebook.com/

### 3. Why we need Next.js ?

Next.js 是 React 的 SSR 框架，Vue 也有類似的 SSR 框架叫做 Nuxt，如果要一句話解釋它們為什麼存在：
## 自己實作 SSR 真的太痛苦了！