SSR vs CSR

本文為 [MTR05] W24 補充影片裡的「補充：SSR 簡介」，主要介紹 SSR 是什麼，為何要執行 SSR，執行的流程及困難，並提到如何解決這個困難的方向。

1. SSR 就是 server side render，主要是為了 SEO 考量

2. 簡單分辨 SSR vs CSR

如果是 SSR，右鍵檢視原始碼會有網站內容，而 CSR 則沒有，因此 CSR 不利於 SEO

3. 當 google 幫你 CSR 時...

雖然 google 會執行 js，但無法保證：

1. google 執行版本

2. 語法可能會壞掉

3. 執行時，若是需要呼叫 API 或拿資料等行為，google 不見得會等到拿到資料才執行

4. google 以外的搜尋引擎，可能不會執行 js

4. React 中 SSR 的方法：

1. 在 server 把 html 的部分 DOM render to string，但若是有事件例如 onClick 這種 event listener 屬於 js 的部分，就不能放了。

2. 在 client 端，透過 react 使用 hydrate 的方式，加上 event listener

所以 SSR 的流程就是，在 server 端執行這個 react 提供的 renderToString()，render 出 html 給瀏覽器，接著在瀏覽器裡面，再執行一次 js hydrate，就會有可以動的網站了。

對搜尋引擎來說，可以讀到 html，而對使用者來說沒有差別

hydrate 就像是泡泡麵一樣，加了水以後就還原成完整的東西了。

5. SSR 的難題

只要是動態產生的東西，都必須先拿好資料，因此有一些框架可以解決，例如 prerender，去網站拿資料以後把東西存起來，有搜尋引擎來搜尋時，把結果吐給它，可以用在任何地方，只要是用 js 動態產生的東西都可以。

相關名詞：dehydrate 和 rehydrate

ReactDOMServer

react中出现的"hydrate"这个单词到底是什么意思?