SPA 的 SEO

前言

名詞解釋

1. SPA (Single Page Application)：

   • 使用前端框架 (Angular、React、Vue) 產生的單頁應用網頁
   • 所有頁面內容都是透過 Client 端的 JavaScript 產生出來的，Server 端固定輸出同個檔案

2. SEO (Search Engine Optimization)：

   • 改善網站，使搜尋引擎更容易搜尋

SPA 產生的問題

由於 SPA 網頁在進入一開始只有下載幾支資源檔案，並透過執行下載好的 JavaScript 動態產生內容

因此如果對網站檢視原始碼，只會看到空蕩蕩的一片，不利於搜尋引擎的搜尋 (SEO)

解決方案

1. SSR (Server Side Render)：Server 端渲染

   • 優點

     • 更好的 SEO，搜尋引擎可以直接查看完全渲染的頁面
     • 内容更快呈現，特别是對於緩慢的網路或設備
     • 不需等待所有的 JavaScript 都完成下載並執行，就可看到完整渲染的頁面

   • 缺點

     • 瀏覽器專屬的物件或程式碼 (ex: window, document) 無法執行
     • 一些外部套件可能需要特殊處理才能運行
     • 需部署在運行 Node.js 的 Server 上
     • 佔用 Server 的 CPU 資源

2. Prerender：預渲染

   • 優點

     • 改動小，配置簡單 (引入套件、修改打包設定)
     • 不需更改後端 Server 設定

   • 缺點

     • 相比 SSR，Prerender 内容是固定的，在部署時就確定內容
     • 用戶相關或是特定頁面無法預先渲染 (但通常這些頁面也不需 SEO)
     • 如果預渲染的頁面較多時，打包會變慢

Vue 官方怎麼說

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。