请求数据

在 Next.js 中，根据请求获取数据可以通过几种不同的方式实现，具体取决于你希望何时以及如何获取数据。以下是几种常见的场景及其解决方案：

1. 在构建时获取数据（静态生成）

使用 getStaticProps 可以在构建时预取数据，并为每个路径生成静态 HTML 文件。这对于内容不经常变化的页面特别有用。

// pages/posts/[id].js
export async function getStaticProps(context) {
  const { id } = context.params;
  // 根据ID从API或其他数据源获取数据
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // 启用增量静态再生成，每隔60秒尝试更新页面
  };
}

export async function getStaticPaths() {
  // 假设我们预先知道所有可能的文章ID
  const res = await fetch("https://api.example.com/posts/ids");
  const ids = await res.json();

  const paths = ids.map((id) => ({
    params: { id: id.toString() },
  }));

  return { paths, fallback: false }; // 或者 'blocking'/'true' 来处理未预先生成的路径
}

function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

2. 在每次请求时获取数据（服务器端渲染 SSR）

使用 getServerSideProps 函数可以在每次请求时获取数据，这意味着每次用户访问页面时都会重新获取最新数据并渲染页面。

// pages/posts/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  // 根据ID从API或其他数据源获取数据
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

3. 客户端获取数据

有时你可能需要在客户端获取数据，而不是在构建或请求时。这可以通过在组件内部使用 useEffect 钩子和 fetch API 实现。

import { useEffect, useState } from "react";

function Post({ initialData }) {
  const [post, setPost] = useState(initialData);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch(
        `https://api.example.com/posts/${initialData.id}`
      );
      const data = await res.json();
      setPost(data);
    }

    fetchData();
  }, [initialData.id]);

  if (!post) return <div>加载中...</div>;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

总结

• getStaticProps: 适用于内容不经常变化的页面，可在构建时预取数据并生成静态 HTML。
• getServerSideProps: 每次请求时获取数据，适合需要实时数据的应用场景。
• 客户端获取数据: 使用 React 的钩子函数如 useEffect 结合 fetch 或其他 HTTP 客户端库来在客户端获取数据。

选择哪种方法取决于你的应用需求，包括数据更新频率、性能考虑以及 SEO 要求等因素。通过灵活运用这些方法，你可以有效地管理和优化数据获取过程。