# 如何深入淺析CSR和SSR
## 引言
在現代Web開發中，**客戶端渲染（CSR）**和**服務端渲染（SSR）**是兩種核心的頁面渲染策略。理解它們的原理、優缺點及適用場景，對開發者構建高性能、用戶體驗優秀的應用至關重要。本文將從技術實現、性能對比、SEO影響等維度展開分析，并提供實際場景的選擇建議。
---
## 一、基礎概念解析
### 1. 客戶端渲染（CSR）
**定義**：
CSR依賴瀏覽器端的JavaScript動態生成頁面內容。服務器僅返回初始HTML骨架，后續內容通過AJAX/Fetch請求API數據后由前端框架（如React、Vue）渲染。
**典型流程**：
1. 瀏覽器請求HTML（包含空`<div id="root">`）
2. 加載JS腳本
3. JS發起API請求獲取數據
4. 數據渲染為DOM
**代碼示例**：
```javascript
// React CSR示例
import React from 'react';
import { render } from 'react-dom';
fetch('/api/data').then(res => res.json()).then(data => {
render(<App data={data} />, document.getElementById('root'));
});
定義：
SSR在服務器端生成完整HTML后返回給瀏覽器，瀏覽器直接解析顯示。常見于傳統服務端框架（如PHP、Ruby on Rails）或現代方案（如Next.js、Nuxt.js）。
典型流程： 1. 瀏覽器請求URL 2. 服務器執行代碼生成HTML 3. 返回包含完整內容的HTML 4. 瀏覽器直接渲染
代碼示例（Node.js + Express）：
app.get('/', (req, res) => {
const html = renderToString(<App data={serverData} />);
res.send(`
<html>
<body><div id="root">${html}</div></body>
</html>
`);
});
| 指標 | CSR | SSR |
|---|---|---|
| TTFB | 快（靜態HTML） | 較慢（動態生成） |
| FCP | 慢（需等JS執行） | 快（立即顯示內容） |
| TTI | 依賴數據加載 | 通常更快 |
解釋：
SSR的首屏性能優勢明顯，但TTFB（Time to First Byte）可能因服務器計算而延遲；CSR需等待JS加載完成后才能渲染內容。
原理：
首次訪問使用SSR，后續交互轉為CSR?？蚣苋鏝ext.js通過getServerSideProps實現：
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
return { props: { data: await res.json() } };
}
優勢：
兼顧首屏速度與后續交互體驗。
適用場景：
內容不變的頁面（如博客）。構建時生成HTML，運行時直接返回：
// Next.js示例
export async function getStaticProps() {
return { props: { data } };
}
graph TD
A[需要SEO?] -->|是| B[內容是否動態?]
A -->|否| C[CSR]
B -->|是| D[SSR]
B -->|否| E[SSG]
如Vercel、Cloudflare Workers將SSR下沉至CDN邊緣節點，進一步降低延遲。
通過理解核心差異與實際需求，方能做出最優技術選型。 “`
注：本文約1350字，可根據需要調整細節部分。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
