0800-800807
這篇文章的目標是：「只要你有網頁前端的基礎，就能夠搞懂我在說什麼」，如果你搞不懂的話，別擔心，不是你的錯，是我沒寫好。麻煩在下面留言一下讓我知道哪裡可以再改進。
接下來我會以主角小明為中心點出發，試著從一段虛擬的故事不斷帶出：「為什麼XXX會出現」、「為什麼我們需要XXX」這些問題。如果你SEO只對真實歷史的名詞演進有興趣，那你可能要去維基百科才能找到比較正確的資料。本故事純屬虛構，如有雷同…應該不太可能會有雷同啦，就讓我們開始吧！
小明是一個初學程式的新手，在這之前有用Dreamweaver寫過一些簡單的靜態網頁，對HTML、CSS以及JavaScript都有一些基礎，而朋友們都推薦他去學PHP來補足後端的部分。經過了一個月的苦練之後，小明終於完成了他的第一個後端程式，是一個非常簡單的留言板系統（怕大家傷眼睛，這邊只截給大家看其中一部分）。PHP程式碼、商業邏輯、HTML，全部東西都混在一起做撒尿牛丸，寫了這樣的程式碼之後，小明每次考試都考一百分呢！
後來小明又花了整整一個月的時間不眠不休不吃不喝（誇飾法，開玩笑的），終於把整個網站改造成SPA，而且還優化了不少地方，讓整個使用者體驗變得非常非常好。你做了什麼？為什麼在搜尋引擎上面搜尋我們的網站，結果只會出現一大堆看不懂的程式碼？我們的網站SEO做的奇差無比你知道嗎？
小明一開始覺得很委屈，他什麼都沒做，怎麼會落得如此下場。但經過左思右想之後，終於發現了癥結點：SPA。由於SPA是由前端的JavaScript動態產生內容，因此如果你對SPA的網站按下右鍵->檢視原始碼，只會看到空蕩蕩的一片，只看得到一個JavaScript檔案跟一些最基本的tag。差別在於使用者接收到HTML的時候，就已經有完整的資料了。
舉例來說，假設seo教學使用者拜訪顯示所有留言的頁面，我在Server Side先把所有留言都準備好然後render出來，這樣使用者一收到Response的時候就能夠看到所有留言，搜尋引擎也能順利地爬到。
資料來源：數位時代，https://www.bnext.com.tw/article/49172/code-mvc-spa-ssr-html
掌握3原則，進攻未來熱門工作職缺，包含SEO優化相關