CSR (客户端渲染)

已完成

在浏览器中通过 JavaScript 渲染内容，支持实时数据和高交互性

难度：初级

预计时间：20分钟

Next.js

React

JavaScript

交互

核心特性：

浏览器端渲染

实时数据获取

高交互性

用户特定内容

返回 React 实验列表返回首页

🌐 CSR (Client-Side Rendering) 示例

这个页面在浏览器中渲染，数据通过客户端 API 调用获取。

客户端组件

运行时渲染

动态数据

可交互

实时产品列表

💡 CSR 核心特点

客户端渲染: 数据在浏览器中通过 JavaScript 获取和渲染
实时数据: 每次访问都会获取最新数据（点击"刷新数据"查看变化）
交互性强: 可以使用 React Hooks 和浏览器 API
初始加载慢: 需要先加载 JavaScript，再获取数据，再渲染
SEO 不友好: 搜索引擎爬虫看到的是空白页面

🔧 如何使用

1. 创建客户端组件：

'use client';  // 必须添加这一行！

import { useState, useEffect } from 'react';

export default function ProductList() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 在客户端获取数据
    fetch('https://api.example.com/products')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  return <div>{/* 渲染数据 */}</div>;
}

2. 关键要点：

必须在文件顶部添加 'use client' 指令
可以使用 useState、useEffect 等 Hooks
可以访问 window、document 等浏览器 API
数据在每次页面加载时都会重新获取

⚖️ CSR vs SSG 对比

特性	CSR	SSG
渲染时机	浏览器运行时	构建时
数据新鲜度	实时最新	构建时的数据
首屏速度	较慢（需加载JS+数据）	最快（纯HTML）
SEO	不友好	非常友好
适用场景	用户仪表板、实时数据	博客、文档、产品页

📚 相关学习资源

💡 学习建议：

完成实验后，建议查看页面源代码（右键 → 查看页面源代码），对比 SSG 和 CSR 在 HTML 内容上的差异，理解它们的工作原理。