Next.js基础

核心渲染模式
- 一、SSR-服务端渲染
- [二、SSG- 静态站点生成](#二、SSG- 静态站点生成)
- [三、ISR- 增量静态再生](#三、ISR- 增量静态再生)

核心渲染模式

Next.js 提供了多种渲染模式，其中最核心的是 SSR 和 SSG，以及后来新增的 ISR。

一、SSR-服务端渲染

工作原理：每次用户请求时，在服务器上实时生成 HTML，返回给客户端。

代码示例

js 复制代码

// pages/index.js 或 app/page.js (App Router)
export default function Page({ data }) {
  return <div>{data.title}</div>;
}

// 每次请求都会执行
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return { props: { data } };
}

优缺点

优点：数据始终是最新的、SEO友好、适合个性化内容

缺点：响应速度较慢、服务器压力大、TTFB（首字节时间）较长

使用场景

用户个性化页面（如个人中心、购物车）

数据实时变化的内容（如股票行情、实时比分）

需要根据请求头（如 User-Agent、Cookie）动态生成内容

二、SSG- 静态站点生成

工作原理：构建时（next build）就生成静态 HTML 文件，直接部署到 CDN。

代码示例

js 复制代码

// pages/index.js (Pages Router)
export default function Page({ data }) {
  return <div>{data.title}</div>;
}

// 构建时执行一次
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return {
    props: { data },
    revalidate: 60,  // ISR: 60秒后重新生成（可选）
  };
}

// 生成动态路由
export async function getStaticPaths() {
  const paths = await getPostIds();
  return { paths, fallback: false };
}

优缺点

优点：性能极快（CDN 缓存）、SEO 极佳、服务器压力小、成本低（可部署在 CDN）

缺点：构建时间长（内容多时）、数据不是实时的、适合频繁更新的内容

使用场景

博客、文档网站

电商商品详情页（数据变化不频繁）

营销落地页

任何不经常变化的内容

三、ISR- 增量静态再生

工作原理： SSG 的增强版，允许在运行时更新静态页面，无需重新构建整个站点。

代码示例

js 复制代码

export async function getStaticProps() {
  const data = await fetchData();
  
  return {
    props: { data },
    revalidate: 60,  // 60秒后触发后台重新生成
  };
}

工作流程

用户访问 → 返回缓存的旧页面

60秒后，下次访问 → 触发后台重新生成

新页面生成后 → 替换旧缓存

优点：兼顾性能和数据实时性、大站构建时间可控（只重新生成变更的页面）、可以处理数百万页面

使用场景

博客、文档网站

电商商品详情页（数据变化不频繁）

营销落地页

任何不经常变化的内容