【13种模式】NextJS13花式路由攻略：SSG、ISR、SSR、RSC

2023-04-02 05:25:17

Next.js 13：13 种路由渲染模式的终极指南，征服全栈开发

Next.js 是一个深受 React 开发者喜爱的全栈框架，以其出色的性能和灵活性而闻名。在 V13 版本中，Next.js 对其路由功能进行了全面升级，为我们带来了 13 种功能强大的渲染模式。这些模式可以帮助我们构建更快速、更动态且更可定制的应用程序。

1. SSG（静态站点生成）

SSG 是 Next.js 中最基本的渲染模式。它在构建时预渲染页面，并生成静态 HTML 文件。这种模式的优势在于闪电般的页面加载速度，非常适合内容相对静态的页面，例如博客文章和产品详情页。

export async function getStaticProps(context) {
  // 从数据库或 API 中获取数据
  const data = await fetch('...');

  // 将数据传递给页面组件
  return { props: { data } };
}

2. ISR（增量静态再生）

ISR 是一种结合了 SSG 和 SSR 优点的渲染模式。它在构建时生成静态页面，但在首次请求时将其重新验证并更新。这种模式适合内容可能发生变化但更新频率较低的页面，例如新闻动态和活动页面。

export async function getStaticProps(context) {
  const revalidateTime = 100; // 缓存时间（以秒为单位）

  // 从数据库或 API 中获取数据
  const data = await fetch('...');

  // 将数据传递给页面组件并设置缓存时间
  return { props: { data }, revalidate: revalidateTime };
}

3. SSR（服务器端渲染）

SSR 在服务器上渲染页面，并在每次请求时生成动态 HTML。这种模式提供了最动态的交互体验，适合数据实时性要求高的场景，例如购物车、聊天应用和社交媒体平台。

export async function getServerSideProps(context) {
  // 从数据库或 API 中获取数据
  const data = await fetch('...');

  // 将数据传递给页面组件
  return { props: { data } };
}

4. RSC（React Server Components）

RSC 是一种在服务器上渲染 React 组件的技术。它允许我们在服务器端保留组件状态，从而带来更快的页面加载速度。这种模式非常适合复杂交互的页面，例如电子商务网站和游戏应用。

5. 混合模式

混合模式允许我们根据页面内容和用户行为动态选择最合适的渲染模式。这种模式适用于综合性网站，其中包含多种不同类型的内容。

export default function Page({ data }) {
  // 根据数据动态决定渲染模式
  if (isDataStatic) {
    return <SSGPage data={data} />;
  } else {
    return <SSRPage data={data} />;
  }
}

export async function getStaticProps(context) {
  // 获取静态数据
  const staticData = await fetch('...');

  // 检查数据是否足够静态
  if (isDataStaticEnough(staticData)) {
    return { props: { data: staticData } };
  } else {
    return { props: {}, revalidate: 0 }; // 强制 SSR
  }
}

6. 按需 ISR（On-Demand ISR）

按需 ISR 在首次请求页面时进行 ISR，但后续访问将使用缓存结果。这种模式有助于降低服务器负载，适合访问量大且内容更新频繁的页面。

export async function getStaticProps({ req }) {
  const revalidateTime = 100; // 缓存时间（以秒为单位）

  // 仅在首次请求时进行 ISR
  if (req.headers['x-middleware-isr'] === 'true') {
    // 从数据库或 API 中获取数据
    const data = await fetch('...');

    // 将数据传递给页面组件并设置缓存时间
    return { props: { data }, revalidate: revalidateTime };
  } else {
    return { props: {} }; // 返回空 props，使用缓存结果
  }
}

7. 边缘函数（Edge Functions）

边缘函数是在边缘服务器上执行的无服务器函数。它们可以带来更快的响应速度和更高的安全性，非常适合处理 API 请求、身份验证和日志记录等任务。

import { NextRequest, NextResponse } from 'next/server';

export default function middleware(req: NextRequest, res: NextResponse) {
  // 处理请求和响应
}

8. API 路由（API Routes）

API 路由允许我们在 Next.js 应用中创建 API 端点，与后端服务进行交互。这种模式非常适合从后端获取数据和处理用户请求。

export default function handler(req, res) {
  // 处理 API 请求
}

9. 中间件（Middleware）

中间件是在请求和响应之间执行自定义逻辑的函数。它们可以用于身份验证、缓存和其他操作。

export default function middleware(req, res) {
  // 处理请求和响应
  req.next(); // 传递到下一个中间件或处理程序
}

10. 自定义应用（Custom App）

自定义应用允许我们完全掌控 Next.js 应用的配置。我们可以自定义应用的启动逻辑、布局和样式。这种模式适合有特殊需求或想要完全自定义应用架构的开发者。

export default function MyApp({ Component, pageProps }) {
  // 自定义应用逻辑
  return <Component {...pageProps} />;
}

11. 增量静态再生（Incremental Static Regeneration）

增量静态再生在构建时生成静态页面，并在定期间隔内增量更新。这种模式非常适合内容更新频繁但需要快速加载的页面。

export async function getStaticProps(context) {
  const regenerationTime = 100; // 增量再生间隔（以秒为单位）

  // 从数据库或 API 中获取数据
  const data = await fetch('...');

  // 将数据传递给页面组件并设置增量再生间隔
  return { props: { data }, revalidate: regenerationTime };
}

12. 通配符路由（Catch-All Routes）

通配符路由可以处理所有未匹配的路由，并返回 404 页面或自定义错误页面。

export default function NotFoundPage() {
  // 自定义 404 页面
  return <div>页面未找到</div>;
}

13. 国际化（Internationalization）

Next.js 提供了内置的国际化支持，使我们能够创建多语言应用。

import { useRouter } from 'next/router';

export default function MyPage() {
  const router = useRouter();
  const { locale } = router;

  // 根据当前语言加载翻译数据
  const translations = require(`../translations/${locale}.json`);

  return <div>{translations.title}</div>;
}