编辑“︁Next.js数据获取概述”︁（章节）

= Next.js数据获取概述 =

'''Next.js数据获取'''是Next.js框架中用于从不同来源（如API、数据库或文件系统）加载数据的核心功能。它提供了多种数据获取方法，使开发者能够根据应用需求选择最适合的方式。本章节将详细介绍Next.js的数据获取机制，包括静态生成（Static Generation）、服务器端渲染（Server-Side Rendering）以及客户端数据获取（Client-Side Data Fetching）。

== 数据获取方法 ==

Next.js支持三种主要的数据获取方式：

=== 1. 静态生成（Static Generation, SSG） ===
静态生成是在构建时预渲染页面的一种方法。生成的HTML文件会被缓存，并在每次请求时重复使用，适用于内容不频繁变化的页面。

==== 代码示例 ====
<syntaxhighlight lang="javascript">
// pages/posts/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return {
    props: {
      post,
    },
  };
}

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.toString() },
  }));
  return { paths, fallback: false };
}
</syntaxhighlight>

'''输入'''：构建时获取所有文章数据并预渲染页面。<br>
'''输出'''：静态HTML文件，可直接由CDN提供服务。

=== 2. 服务器端渲染（Server-Side Rendering, SSR） ===
服务器端渲染是在每次请求时动态生成HTML的方法，适用于需要频繁更新或依赖用户请求数据的页面。

==== 代码示例 ====
<syntaxhighlight lang="javascript">
// pages/profile.js
export async function getServerSideProps(context) {
  const { req } = context;
  const res = await fetch(`https://api.example.com/profile`, {
    headers: {
      cookie: req.headers.cookie,
    },
  });
  const profile = await res.json();
  return {
    props: {
      profile,
    },
  };
}
</syntaxhighlight>

'''输入'''：每次请求时获取用户资料数据。<br>
'''输出'''：动态生成的HTML，包含最新的用户资料。

=== 3. 客户端数据获取（Client-Side Data Fetching） ===
客户端数据获取是在浏览器中运行JavaScript时获取数据的方法，适用于需要动态更新且无需SEO的页面部分。

==== 代码示例 ====
<syntaxhighlight lang="javascript">
// components/UserList.js
import { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
</syntaxhighlight>

'''输入'''：组件挂载后从API获取用户列表。<br>
'''输出'''：动态渲染的用户列表。

== 数据获取策略比较 ==
<mermaid>
flowchart TD
    A[数据获取方式] --> B[静态生成 SSG]
    A --> C[服务器端渲染 SSR]
    A --> D[客户端获取]
    B --> E[构建时获取]
    C --> F[请求时获取]
    D --> G[运行时获取]
</mermaid>

{| class="wikitable"
|-
! 方法 !! 适用场景 !! 优点 !! 缺点
|-
| 静态生成（SSG） || 内容不频繁变化 || 高性能，可缓存 || 数据更新需重新构建
|-
| 服务器端渲染（SSR） || 动态内容，SEO关键页面 || 实时数据，SEO友好 || 服务器负载较高
|-
| 客户端获取 || 用户交互数据 || 减少服务器负载 || 不利于SEO，初始加载慢
|}

== 实际案例 ==

=== 案例1：博客系统 ===
使用静态生成预渲染所有博客文章，使用客户端获取处理评论提交。

=== 案例2：电商平台 ===
产品列表使用静态生成，用户个人资料页面使用服务器端渲染，购物车使用客户端获取。

== 进阶概念 ==

=== 增量静态再生（ISR） ===
Next.js允许在静态生成后按需重新验证和更新页面内容：
<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return {
    props: { products },
    revalidate: 60, // 每60秒重新验证一次
  };
}
</syntaxhighlight>

=== SWR库 ===
Next.js团队推荐的客户端数据获取库，提供缓存、重新验证等功能：
<syntaxhighlight lang="javascript">
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>;
}
</syntaxhighlight>

== 性能优化建议 ==
* 对于不常变化的数据使用SSG
* 对大型数据集使用ISR
* 对用户特定数据使用SSR
* 对交互式功能使用客户端获取
* 合理设置缓存头

== 数学表示 ==
数据获取延迟可以表示为：
<math>
T_{total} = T_{fetch} + T_{render}
</math>
其中：
* <math>T_{fetch}</math> 是数据获取时间
* <math>T_{render}</math> 是渲染时间

== 总结 ==
Next.js提供了灵活的数据获取方案，开发者应根据应用场景选择合适的方法。静态生成适合内容稳定的页面，服务器端渲染适合动态内容，客户端获取则适合交互式功能。理解这些方法的优缺点对于构建高性能Next.js应用至关重要。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js数据获取]]