SSR 簡介
CSR 與 SSR 差異點是甚麼 ?
CSR 是你所看到畫面上的東西基本上都是在前端透過 JS 動態所產生的，所以右鍵檢查原始碼基本上只會看到 JS 不會看到網站上的任何內容，不利於 SEO。SSR 主要是為了 SEO 的考量
搜尋引擎看不到甚麼內容，雖然 GOOGLE 的搜尋引擎會執行 JS 但無法保證他執行的版本是多少，也許某些語法會讓執行壞掉、也無法確定搜尋引擎會等你多久，也許拿個資料回來他就不 render 了，或者 GOOGLE 以外的搜尋引擎不執行 JS
CCR 是在 CLIENT 端執行 JS 然後 REACT 他直接就把 RENDER 出來的元素放到 dom 上面去
SSR 可以怎麼做 ? 當瀏覽器發請求，server 可以用 react 提供的 renderToString 把我的 component 渲染成 html string 的樣子，他可以需要附上一些他自己需要的 tag 去額外辨識東西。
示意圖
但這樣少考慮了一個地方，瀏覽器看到內容但他不會動。ex 加上 onClick，但 renderToString 完後並不能將 eventListener 放上去。eventListener 是 js 的部分，但 renderToString 完成後的是 html，他們一碼歸一碼。
所以，還有一個 hydrate (注水) 的流程。ie 在 client 的時候，透過 react 將 server side 產生出的 html 加上 eventListener 或其他東西讓他變成真正可以動的網站。
SSR 最大問題在我們目前所講的都是在我們的東西是固定的情況。假設 useEffect call fetch api 之類的，server 不會執行 useEffect, useLayoutEffect 因為 server 沒有 mount 這件事情因為他沒有放到 dom 上面去
作為搜尋引擎還是看不到餐廳資料，因為實際拿資料還是在 client side mount 完之後才去拿資料
所以必須做到在 server side 就知道這個 component 需要拿資料，所以先拿好資料，讓這個 restaurant 有 data。如此一來他 render 出來的東西才會是真的有 data 的 html。
解決方式：
- 將 restautant 變成 props，透過外面傳進來。在 server side call fetch 再 render 先拿好 restaurant 將它傳進來。缺點：如果沒有處理好，就要在每個拿資料的地方這麼做。
- 有一些框架可以輔助：prerender.io (幫我起 server 開一個瀏覽器訪問我的網站，把我訪問完的網站拿到的資料結構儲存起來，有搜尋引擎來就將我儲存好的結果吐給他。可以運用在任何 SPA 的東西、任何用 JS 動態產生出網頁內容的網站), next.js
推薦試著做一遍 server side rendering 的東西，會更了解整個流程與架構
Next.js
首先一樣去官網 => 他是 react framework for production
框架相對於 library 他做了更多東西、有更多限制，你要跟著他的規則走。所以學習一個 framework 你第一個需要知道他有甚麼規則
他是以 react 為 base 再加上一些他自己的東西。
內建 server side rendering
沒有甚麼 react routing 可以使用。他有一個設置是 pages 的資料夾底下的檔名就是他的路徑。路由機制是透過檔案結構來決定。
另外動態的怎麼辦 ? 這樣就可以在這個檔案裡面拿到這個 id 是甚麼，類似一個參數的概念。
怎麼在 server side 拿完 data 才 render 出東西出來 ?
Next.js 的解決方案是幫 page 加上一個 function, Next.js 在執行時會幫你執行這個 function。
ex 我幫我的 page 新增屬性叫 getInitialProps, 一個非同步的 funct。Next.js 在 server side rendering 會幫你先執行這個 function，將我 return 的東西變成 page 的 props 傳進去
在 client 他也會幫我再執行這個 funct，只要一到這個頁面就會幫我執行這個 funct。
Next.js 只有頁面有這樣的功能，一般的 component 沒有。
Next.js 背後的公司 Vercel 也提供了可以免費 deploy 的方案。
穩健程式碼的好工具：TypeScript
一樣先去看官網 => Typed Javascript at any scale
可以把它想成一個新的語言，賦予 js 型別的功能，寫完 TypeScript 會需要 compile 成 Javascript。有點像物件導向的寫法。
TypeScript 會做靜態型別的檢查，寫 code 時 editor 會依據 type 分析 code 怎麼跑，一旦跑起來他就不管這些東西了。因為跑起來他會 compile 成 Javascript。
優點是可以讓編輯器提早檢查出一些錯誤
現在有一個 function 叫 add 接收兩個參數，一個型別是數字叫 a 一個型別也是數字叫 b，最後會回傳一個數字型別是 number
通常不會知道 props 裡面有甚麼東西，除非看 code。可以宣告一個 interface 表示我這個物件的長相會是甚麼，寫 code 時就會有提示。
若參數是 optional 可以加 ?
加註解再打時會跳出一些提示，可以做為寫 code 的輔助。
void 表示不會回傳東西
看到 .ts 就知道這是 TypeScript。會有一個檔案叫做 tsconfig.json 決定要怎麼 complie 要 complie 成甚麼，裡面會有一些語法規則的設定
