React 学习指南 - 第十天 🚀

主题：React 服务器端渲染（SSR）与 Next.js

今天，我们将学习 服务器端渲染（Server-Side Rendering, SSR） 及 Next.js，它们可以显著提高 SEO 和首屏加载速度。

1. 客户端渲染（CSR） vs 服务器端渲染（SSR）

在传统的 React + CRA（Create React App）中，页面内容由浏览器执行 JS 渲染，不适合 SEO。
Next.js 通过 SSR 提前生成 HTML，提高 SEO 及用户体验。

2. Next.js 基础

Next.js 是一个 React 框架，支持 SSR、静态站点生成（SSG），优化了路由和数据获取。

2.1 安装 Next.js

bash复制编辑npx create-next-app@latest my-next-appcd my-next-app
npm run dev

访问 http://localhost:3000，你会看到 Next.js 欢迎页面。

3. Next.js 页面和路由

Next.js 基于文件的路由，所有 pages/ 目录下的文件都会变成页面。

创建 pages/about.js：

jsx复制编辑export default function About() {  return <h1>About Page</h1>;
}

访问 http://localhost:3000/about，即可看到 About Page。

4. SSR（服务器端渲染）

Next.js 允许在 请求时动态渲染页面，可以使用 getServerSideProps 获取数据：

jsx复制编辑export async function getServerSideProps() {  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');  const post = await res.json();  return { props: { post } };
}export default function PostPage({ post }) {  return (    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

✅ 适用场景：

• 需要每次请求都获取最新数据（如用户个性化内容）

• 适用于 SEO 友好型页面

5. SSG（静态站点生成）

对于不常更新的数据，可以使用 getStaticProps 在 构建时 生成静态页面，提高性能。

jsx复制编辑export async function getStaticProps() {  const res = await fetch('https://jsonplaceholder.typicode.com/posts');  const posts = await res.json();  return { props: { posts }, revalidate: 10 }; // 每 10 秒重新生成}export default function Posts({ posts }) {  return (    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (          <li key={post.id}>{post.title}</li>
        ))}      </ul>
    </div>
  );
}

✅ 适用场景：

• 文章、产品列表等不常变化的内容

• 极致性能，页面在构建时预渲染，访问速度超快

6. Next.js API 路由

Next.js 提供了一个内置后端，可以在 pages/api/ 目录下创建 API。

创建 pages/api/hello.js：

jsx复制编辑export default function handler(req, res) {
  res.status(200).json({ message: "Hello, Next.js API!" });
}

访问 http://localhost:3000/api/hello，即可获得：

json复制编辑{ "message": "Hello, Next.js API!" }

✅ 适用场景：

• 处理表单提交

• 连接数据库（如 MongoDB、PostgreSQL）

🔹 明天预告：React 状态管理进阶（Redux Toolkit + Zustand）！ 🎯