---
tags: SEO
---

# 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 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。