關於SSR（Server Side Rendering 、CSR（Client Side Rendering）、Pre Rendering

# 前言

最近我們正好要開始執行新產品計畫，應該說此項計畫的想法已經盤旋超過一年了，卻又花了一年才取得勇氣要開始認真執行，不過這是另外一個故事了。

總之有天正好要思考並選擇這次計畫的使用技術時，原本打算使用我比較熟悉也是唯一使用過的前端框架 Vue.js 時，突然看到社團有人發問 Vue SEO 的問題，於是我就開始思考，恩對阿、為什麼要有 Vue 的出現呢？以及 SEO 與他的關係是什麼？然後就展開一場奇幻旅程！ （學習新知跟吸狗一樣令人上癮 R ）

# 進入主題

關於傳統的 Server Side Rendering ( SSR )

很久以前人們上網是在瀏覽器輸入網址 ( 在 client 端提出請求 )， server 收到請求後去拿取網頁資料，並且在 server 端的時候就已經把 html 編譯好，再回傳給瀏覽器，最後把網頁資料呈現給使用者觀看與瀏覽。而網頁資訊要改變的時候就必須再向 server 發出請求，再拿取整頁資料、編譯，然後回傳給瀏覽器。

大家就發現一個嚴重的問題啦！像購物網站或商品資訊網站，有時候整個頁面的差異度可能只有些許文字跟圖片而已，但還是得重新回到與 server 溝通的步驟，因此換頁速度就比較慢，效能也比較差，整個網站的使用者體驗也很不好，過去大家還會使用 catch 的方式，不過本篇不討論此範圍

Client Side Rendering ( CSR ) 的由來

於是就發展出 Client Side Rendering 的架構，希望 client 端也能分擔 server 端所要處理的事情，於是後來就演變為，使用者上網在瀏覽器向 server 發出請求後， server 先給一個網頁的空殼，瀏覽器再下載網頁中的指定檔案並解析裡面的 html 最後呈現在瀏覽器上供使用者瀏覽網站，我們現在常見的前端語言 Javascript 以及由這個語言為基礎的前端框架 Vue.js、React.js 就是基於這樣的架構下開發的。

但 CSR 也是有缺點的，由於 server 一開始回傳的是一份沒有 html 的網頁空殼，所以 Googlebot 爬蟲爬不到任何資訊，目前 Google 有針對 Javascript SEO 做一些改變，但最終因為速度的問題造成 CSR 架構的網站總要等到幾小時或幾星期後才能被編譯完才能拿到所需資料。

而且因為 server 一開始給了網頁空殼後，瀏覽器讀取到裡面的檔案才開始執行下載，下載完成後再編譯為 html ，就算之後換頁或操作都能在 client 端執行會快很多，但第一次下載的速度明顯比 SSR 第一次下載網頁的速度來的慢，而且使用者如果使用手機上網，速度又不夠快的話，就會看到整頁空白的網頁，就算只有一秒的對使用者來說影響都很大阿！

Pre Rendering 的誕生

最終就出現了 Pre Rendering 的方式，Pre Rendering 簡單來說就是編譯一個靜態的 html 網頁給 Googlebot ，為了去解決 CSR 的不足，而使用 Pre Rendering 的方式並不需要一個真正的 server 就能產生靜態的 html ，提高了SEO也提升了使用者體驗

# 結語

為了解決前端框架的不足， zeit.co 基於Pre Rendering的架構分別開發出 Next.js ( React.js )以及Nuxt.js ( Vue.js )，而Angular派系的開發者可以使用Angular Universal，之後針對 Nuxt.js 會再做篇詳解瞜，來去吸狗了掰掰～

#延伸閱讀（還沒寫不要亂點）

→ 前端工程師都該懂的 Javascript SEO

→ 那個是! Nuxt.js