第四章：Next.js 基础

数据获取 (Data Fetching)

在 Next.js 中，数据获取是构建动态应用的核心功能之一。Next.js 提供了多种数据获取方法，以适应不同的渲染策略（如 SSR、SSG 或 CSR）。以下是 Next.js 中常用的数据获取方式：

1. getStaticProps（静态生成时获取数据）

  • 用途：在构建时（build time）获取数据，生成静态页面。
  • 适用场景：内容不频繁变化，如博客文章、产品列表等。
  • 示例：
    export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

2. getServerSideProps（服务器端渲染时获取数据）

  • 用途：在每次请求时获取数据，适合动态内容。
  • 适用场景：需要实时数据的页面，如用户仪表盘、个性化推荐等。
  • 示例：
    export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user-data');
  const userData = await res.json();
  return { props: { userData } };
}

3. getStaticPaths（动态路由的静态生成）

  • 用途：为动态路由（如 pages/posts/[id].js）预生成静态页面。
  • 适用场景：动态路由的静态页面，如博客详情页、商品详情页等。
  • 示例：
    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 } }));
  return { paths, fallback: false };
}

4. 客户端数据获取（CSR）

  • 用途：在客户端通过 useEffect 或数据获取库（如 SWR、React Query）获取数据。
  • 适用场景：不需要 SEO 的页面或用户交互触发的数据加载。
  • 示例：
    import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);
  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;
  return <div>Hello, {data.name}!</div>;
}

5. API 路由（Next.js 内置 API）

  • 用途：在 Next.js 应用中直接创建 API 端点，无需额外后端服务。
  • 适用场景：处理表单提交、数据库操作等。
  • 示例：
    // pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

最佳实践

  1. 按需选择方法：根据页面需求选择 getStaticProps、getServerSideProps 或客户端获取。
  2. 缓存策略：结合 revalidate（ISR）实现增量静态更新。
  3. 错误处理：始终处理数据获取中的错误和加载状态。

通过灵活运用这些方法，可以高效地构建高性能的 Next.js 应用。

Last Updated::