Next.js数据获取指南1：概述与基本概念

📅

loading..🐩🐩🐩🐩

开始之前 🔗

本文基于Next.js 15，后续版本中部分内容可能发生变化。

Next.js的App Router结合现代React功能，提供以服务器为中心的数据获取方式，帮助构建更快速、高效的Web应用。本系列从基础概念到高级用法，深入介绍这些能力。

第1篇将讨论：

App Router中在哪里获取数据。
fetch函数的工作方式。
基于服务器组件的数据流。
基础fetch示例。

数据获取概述 🔗

Next.js的App Router基于React服务器组件（SSR）工作。服务器组件能够使用浏览器中不可用的服务器专用能力，数据获取就是其中之一。

Next.js通常推荐

在服务器端获取数据

。这样，发送给客户端的HTML在到达前已经完成，有利于页面加载速度和SEO。

何时、在哪里获取数据 🔗

Next.js中可以在以下位置获取数据：

服务器组件（默认）
：多数数据推荐在这里获取。
客户端组件
：用于用户交互后需要动态获取数据的场景。
路由处理器（API route）
：作为后端API，与外部系统通信。
App Router基于文件夹定义路由，因此数据获取代码位于app/目录中的组件文件内。

fetch基础 🔗

在Next.js中，最常用的数据获取函数是fetch。它与浏览器原生fetch基本相同，但在Next.js中具有特殊行为。

例如，从JSONPlaceholder API获取文章数据的代码如下。

app/page.tsx

export default async function Page() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

这段代码运行在服务器组件中，在渲染HTML之前获取数据。与客户端获取数据、显示加载状态相比，这种方式可以提供更快速、稳定的体验。

fetch的行为与特点 🔗

Next.js的fetch具有以下特点：

自动缓存：默认对相同的fetch请求执行缓存。
可使缓存失效：可以通过配置关闭缓存，例如cache: 'no-store'。
支持ISR：可以配置定期更新数据，例如next.revalidate。

下一篇会详细介绍这些设置。

结论 🔗

本文介绍了Next.js数据获取的工作方式、可执行的位置，以及fetch的基础用法。通过服务器组件预先渲染数据，对性能和SEO都有帮助。

下一篇将进一步介绍fetch高级选项、缓存行为和ISR。

进一步思考 🔗

React服务器组件如何工作，与客户端组件有什么区别？
为什么在服务器端获取数据通常比在客户端更有利？

参考资料 🔗

Next.js数据获取指南1：概述与基本概念 | PromleeBlog