SSR 和 CSR 的區別

🔸 示例說明

SSR 流程（Next.js 支持）：
1. 用戶請求頁面
2. 服務端生成 HTML（含內容）
3. 瀏覽器收到渲染好的頁面

// SSR 頁面（默認行為） - app/page.tsx
export default async function Page() {
const res = await fetch(‘https://api.com/data’, { cache: ‘no-store’ });
const data = await res.json();
return

;
}

CSR 流程（React 默認）：
1. 瀏覽器加載空的 HTML
2. 下載 JS、React 渲染頁面
3. 后臺 API 獲取數據并更新頁面

// 純 React 頁面
function App() {
const [data, setData] = useState(null);

useEffect(() => {
fetch(’/api/data’).then(res => res.json()).then(setData);
}, []);

return

;
}

React 和 Next.js 的區別

🔍 舉例對比

React：
? 更自由，需要你自己配置很多東西（如路由、打包、部署）
? 默認 CSR，不適合 SEO 要求高的站點

Next.js：
? 基于 React，提供「約定式」結構和功能
? 更適合企業級、內容型網站、電商等

總結一句話：

React 是造車的零件，Next.js 是組裝好的一輛車，還能讓它跑得更快、更容易維護、更適合上線。