上篇文章 淺談 SEO 白帽 & 黑帽有提到如何使用正規白帽的手法讓 SEO 網站排名靠前，增加使用者的觸擊率。今天要聊的主題也是做 SEO 當中常遇到的取捨問題，那就是網頁渲染的問題，到底伺服器端渲染 & 客戶端渲染的優缺點又是什麼呢?!
前端三劍客 : HTML 、 CSS 、 JavaScript ，是現在做網站最基本的元素，也比以前只靠 HTML 、 CSS 做網站讓使用者跟網頁更有互動。
什麼是 JavaScript ?
JavaScript 是一種程式語言，可以創建動態內容，讓網站使用上更豐富。
JavaScript 可以讓網站更加有互動性，當然網站做得好就是要吸引顧客來用，希望流量衝高、關鍵字排名靠前，但是 JavaScript 竟會對 SEO 有影響?!所以在做網頁結構規劃時就要把 JavaScript 對 SEO 的利與弊做平衡的考量，才能兼顧網站體驗以及 SEO 。
JavaScript 是由瀏覽器(客戶端)的引擎做執行，會等 HTML 與 CSS 都生成好後才開始運行，這樣才能確保網頁的結構與樣式在 JavaScript 運行時就全部到位了。
前端框架對 SEO 有影響嗎?
雖然透過伺服器端渲染能讓 SEO 效果不錯，但是使用者體驗較不佳。而近年來前端的技術不斷更新，不少網站開始透過前端三大框架( React、 Vue 、 Angular )來開發，使用者體驗也比以前好，維護速度又快，但也因為是客戶端渲染的關係，讓搜尋引擎的爬蟲更不好爬取，導致 SEO 效果更差。
伺服器端渲染 ( Server-side render )
資料在後端渲染，是傳統的渲染方法
請求頁面後，由伺服器端把渲染的完整頁面返回給客戶端，伺服器端只負責解析 HTML，減少了一次客戶端到伺服器端的 http 請求，加快了相應速度，一般用於 above the fold 的性能優化。但是維護上不方便，通常前端改 HTML 、 CSS 程式碼，後端也要跟著改，所以不好維護。
優點
- 爬蟲容易了解，對 SEO 有利
- 渲染速度快
- 生成緩存片段、靜態化文件
- 省電
缺點
- 用戶體驗差
- 不好維護
客戶端渲染 ( Client-side Render )
資料在前端渲染，新的渲染方式
客戶端(瀏覽器)這邊的 HTML 僅作為靜態檔，當客戶端做請求時，伺服器端不需做任何處理，就可以直接以原檔返回到客戶端，最後根據 JavaScript 生成 DOM 來插入 HTML。體驗好規好，但大規模使用 JavaScript 來做網頁渲染是非常耗能的。
優點
- 前後端分離，維護上也方便
- 部屬較簡單
- 不需要每次都請求頁面重新整理刷新
- 用戶體驗好
缺點
- 對 SEO 的效果差，搜尋引擎的爬蟲不好理解
- 下載完 JavaScript 、 CSS 才渲染，速度比較慢
- 耗能
不過去年 Google 提到現在搜尋引擎的爬蟲更新後已經可以看得懂客戶端渲染了，更厲害的是能夠看懂 ES6 語法，雖然還是有不少人對伺服器渲染的 SEO 優化方法比較有信心。但是 Google 宣布的這個消息一釋出讓不少網頁開發者感到開心，使用客戶端渲染可以兼顧用戶體驗，將來也不必擔心 SEO 的問題。
附上 The new evergreen Googlebot 官方文章，此文有提到新版 Googlebot 可以理解 ES6 以及 新版 JavaScript。
