chatGpt之Next.js 服务端渲染（SSR） + 静态生成（SSG）实战 26天-前端-E先生的博客

React 学习指南 - 第二十六天 🚀

主题：Next.js 服务端渲染（SSR） + 静态生成（SSG）实战

今天开启企业开发必备的 Next.js，解锁 SEO 优化、首屏加速、服务端渲染 的新世界大门！

1. 为什么用 Next.js？

React 是纯前端库，默认是 CSR（客户端渲染），缺点是：

SEO 差（页面源代码为空，搜索引擎难以抓取）
首屏慢（需要等待 JS bundle 加载执行）

Next.js 解决了这些痛点，支持： ✅ SSR（服务端渲染）
✅ SSG（静态页面生成）
✅ ISR（增量静态生成）
✅ API routes（全栈能力）

2. 快速创建 Next.js 项目

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

👉 Next.js 已内置：

React + Webpack + Babel
SSR/SSG 支持
自带路由系统（基于文件夹）
API routes（可以写 API 接口）

3. 页面渲染方式

① SSR - 服务端渲染

每次用户请求时，服务端动态生成 HTML

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

export default function Page({ posts }) {
  return <div>{posts.map(post => <p>{post.title}</p>)}</div>;
}

✅ 适合需要实时数据的页面
✅ 适合 SEO 要求高的页面（如博客、商品详情）

② SSG - 静态生成

构建时就生成 HTML，性能极佳

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

✅ 页面访问速度快，直接读取 HTML
✅ 适合内容不经常变化的页面（如营销页、博客）

③ ISR - 增量静态生成

静态生成 + 定时刷新

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 10, // 10秒后重新生成页面
  };
}

✅ SSG 的速度 + SSR 的实时性
✅ 适合大部分中大型项目

4. Next.js 路由

Next.js 使用 文件系统路由：

/pages/index.tsx       -> 访问 /
/pages/about.tsx       -> 访问 /about
/pages/blog/[id].tsx   -> 动态路由 /blog/123

动态路由

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  const paths = posts.map(post => ({ params: { id: post.id.toString() } }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

✅ getStaticPaths + getStaticProps 搭配动态生成静态页面