跳到主要内容

Next.js 服务器端数据获取

介绍​

在 Next.js 中，服务器端数据获取（Server-side Data Fetching）是一种在服务器端渲染页面时动态获取数据的技术。与客户端数据获取不同，服务器端数据获取允许在页面加载之前获取数据，从而生成完整的 HTML 页面并直接发送给客户端。这种方式特别适合需要动态内容且对 SEO 友好的页面。

通过服务器端数据获取，你可以确保页面内容在用户访问时已经准备好，从而减少页面加载时间并提升用户体验。

服务器端数据获取的工作原理​

在 Next.js 中，服务器端数据获取是通过 getServerSideProps 函数实现的。这个函数在每次页面请求时运行，并允许你在服务器端获取数据，然后将数据作为 props 传递给页面组件。

export async function getServerSideProps(context) {
  // 在这里获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // 将数据作为 props 传递给页面
  return {
    props: {
      data,
    },
  };
}

参数说明​

  • context: 一个包含请求相关信息的对象，例如 req（请求对象）、res（响应对象）、query（查询参数）等。
  • props: 返回的对象必须包含 props 属性，该属性将传递给页面组件。

示例​

假设我们有一个博客页面，需要根据 URL 中的 id 参数获取特定的博客文章：

export async function getServerSideProps(context) {
  const { id } = context.query;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

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

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

在这个示例中，getServerSideProps 函数根据 URL 中的 id 参数获取博客文章数据，并将其作为 post 属性传递给 BlogPost 组件。

实际应用场景​

1. 动态内容页面​

服务器端数据获取非常适合动态内容页面，例如博客文章、产品详情页等。这些页面的内容通常需要根据 URL 参数动态生成。

2. 需要 SEO 优化的页面​

由于服务器端数据获取在页面加载之前就生成了完整的 HTML，因此非常适合需要 SEO 优化的页面。搜索引擎可以轻松抓取这些页面的内容。

3. 需要用户认证的页面​

对于需要用户认证的页面，服务器端数据获取可以在服务器端验证用户身份，并根据用户权限动态生成页面内容。

注意事项​

警告
  • 性能影响: 由于 getServerSideProps 在每次请求时都会运行，因此可能会对服务器性能产生影响。如果页面内容不经常变化，可以考虑使用静态生成（Static Generation）或增量静态再生（Incremental Static Regeneration）。
  • 缓存策略: 服务器端数据获取的页面通常不会被缓存，因此需要特别注意缓存策略，以避免不必要的服务器负载。

总结​

服务器端数据获取是 Next.js 中一种强大的数据获取策略，特别适合需要动态内容、SEO 优化或用户认证的页面。通过 getServerSideProps 函数，你可以在服务器端获取数据并将其传递给页面组件，从而生成完整的 HTML 页面。

附加资源​

练习​

  1. 创建一个 Next.js 页面，使用 getServerSideProps 获取用户列表并显示在页面上。
  2. 修改上面的博客示例，使其在获取数据时处理可能的错误（例如文章不存在的情况）。