本文為 [MTR05] W24 補充影片裡的「補充：SSR 簡介」，主要介紹 SSR 是什麼，為何要執行 SSR，執行的流程及困難，並提到如何解決這個困難的方向。
1. SSR 就是 server side render，主要是為了 SEO 考量
2. 簡單分辨 SSR vs CSR
如果是 SSR，右鍵檢視原始碼會有網站內容，而 CSR 則沒有，因此 CSR 不利於 SEO
3. 當 google 幫你 CSR 時...
雖然 google 會執行 js，但無法保證：
google 執行版本
語法可能會壞掉
執行時，若是需要呼叫 API 或拿資料等行為，google 不見得會等到拿到資料才執行
google 以外的搜尋引擎，可能不會執行 js
4. React 中 SSR 的方法：
在 server 把 html 的部分 DOM render to string，但若是有事件例如 onClick 這種 event listener 屬於 js 的部分，就不能放了。
在 client 端，透過 react 使用 hydrate 的方式，加上 event listener
所以 SSR 的流程就是，在 server 端執行這個 react 提供的 renderToString()，render 出 html 給瀏覽器，接著在瀏覽器裡面，再執行一次 js hydrate，就會有可以動的網站了。
對搜尋引擎來說，可以讀到 html，而對使用者來說沒有差別
hydrate 就像是泡泡麵一樣，加了水以後就還原成完整的東西了。
5. SSR 的難題
只要是動態產生的東西，都必須先拿好資料，因此有一些框架可以解決，例如 prerender，去網站拿資料以後把東西存起來，有搜尋引擎來搜尋時，把結果吐給它，可以用在任何地方，只要是用 js 動態產生的東西都可以。
相關名詞：dehydrate 和 rehydrate
