编辑“︁Next.js fetch API”︁

= Next.js fetch API =

== 介绍 ==
Next.js fetch API 是 Next.js 框架中用于数据获取的核心工具，它基于原生的 JavaScript fetch API，并进行了扩展以支持服务端渲染（SSR）、静态生成（SSG）和增量静态再生（ISR）等特性。fetch API 允许开发者在客户端或服务器端发起 HTTP 请求，获取远程数据并渲染页面内容。

Next.js 对 fetch API 的增强包括：
* 自动去重重复请求
* 内置缓存机制
* 支持动态数据获取（如重新验证）
* 与 React 服务器组件（RSC）深度集成

== 基本用法 ==
以下是 Next.js fetch API 的基本语法：

<syntaxhighlight lang="javascript">
async function getData() {
  const res = await fetch('https://api.example.com/data')
  // 默认会缓存结果
  return res.json()
}

export default async function Page() {
  const data = await getData()
  
  return <div>{data.title}</div>
}
</syntaxhighlight>

=== 输入与输出示例 ===
假设 API 端点返回以下 JSON：
<syntaxhighlight lang="json">
{
  "title": "Next.js Fetch API Guide",
  "author": "Next.js Team"
}
</syntaxhighlight>

页面将渲染为：
<syntaxhighlight lang="html">
<div>Next.js Fetch API Guide</div>
</syntaxhighlight>

== 缓存行为 ==
Next.js fetch API 默认会缓存响应结果。缓存行为可以通过选项控制：

<mermaid>
graph LR
    A[fetch请求] --> B{有缓存?}
    B -->|是| C[返回缓存]
    B -->|否| D[发起网络请求]
    D --> E[存储响应到缓存]
</mermaid>

=== 缓存控制选项 ===
<syntaxhighlight lang="javascript">
// 不缓存
fetch('https://api.example.com/data', { cache: 'no-store' })

// 每10秒重新验证
fetch('https://api.example.com/data', { next: { revalidate: 10 } })
</syntaxhighlight>

== 数据获取策略 ==
Next.js 支持多种数据获取策略：

=== 静态生成 (SSG) ===
<syntaxhighlight lang="javascript">
// 在构建时获取数据
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data')
  const data = await res.json()
  
  return {
    props: { data }
  }
}
</syntaxhighlight>

=== 服务器端渲染 (SSR) ===
<syntaxhighlight lang="javascript">
// 每次请求时获取数据
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/dynamic-data', { 
    cache: 'no-store' 
  })
  const data = await res.json()
  
  return {
    props: { data }
  }
}
</syntaxhighlight>

=== 增量静态再生 (ISR) ===
<syntaxhighlight lang="javascript">
// 静态生成但定期更新
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/isr-data')
  const data = await res.json()
  
  return {
    props: { data },
    // 每60秒重新生成页面
    revalidate: 60 
  }
}
</syntaxhighlight>

== 高级用法 ==
=== 请求去重 ===
Next.js 会自动去重同时发起的相同请求：
<math>
R_{unique} = \bigcup_{i=1}^{n} R_i \quad \text{where} \quad R_i \neq R_j \quad \text{for} \quad i \neq j
</math>

=== 错误处理 ===
<syntaxhighlight lang="javascript">
async function getData() {
  try {
    const res = await fetch('https://api.example.com/data')
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
    return res.json()
  } catch (error) {
    console.error('Error:', error)
    return null
  }
}
</syntaxhighlight>

=== 自定义请求 ===
<syntaxhighlight lang="javascript">
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
</syntaxhighlight>

== 实际应用案例 ==
=== 电商产品页面 ===
<syntaxhighlight lang="javascript">
export async function generateStaticParams() {
  const res = await fetch('https://api.example.com/products')
  const products = await res.json()
  
  return products.map((product) => ({
    id: product.id.toString(),
  }))
}

export default async function ProductPage({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`)
  const product = await res.json()
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  )
}
</syntaxhighlight>

=== 实时仪表盘 ===
<syntaxhighlight lang="javascript">
export const dynamic = 'force-dynamic' // 禁用所有缓存

export default async function Dashboard() {
  const res = await fetch('https://api.example.com/metrics', { 
    cache: 'no-store' 
  })
  const metrics = await res.json()
  
  return (
    <div>
      <h2>实时指标</h2>
      <ul>
        {metrics.map((metric) => (
          <li key={metric.id}>{metric.name}: {metric.value}</li>
        ))}
      </ul>
    </div>
  )
}
</syntaxhighlight>

== 最佳实践 ==
1. 对于不常变化的数据，使用静态生成或ISR
2. 对于敏感数据，使用服务器端获取
3. 合理设置重新验证时间
4. 始终处理错误情况
5. 使用TypeScript增强类型安全

=== TypeScript示例 ===
<syntaxhighlight lang="typescript">
interface Product {
  id: number
  name: string
  price: number
  description: string
}

async function getProduct(id: number): Promise<Product> {
  const res = await fetch(`https://api.example.com/products/${id}`)
  return res.json()
}
</syntaxhighlight>

== 性能考虑 ==
* 批量请求减少网络往返
* 使用流式传输处理大响应
* 考虑CDN缓存策略
* 监控API响应时间

== 常见问题 ==
=== 为什么我的fetch请求没有被缓存？ ===
检查是否设置了<code>cache: 'no-store'</code>选项或在动态渲染的页面中使用了fetch。

=== 如何在客户端组件中使用fetch？ ===
在客户端组件中，可以直接使用原生fetch API，但建议通过API路由中转敏感请求。

=== fetch与第三方库（如axios）比较 ===
Next.js fetch API的优势在于深度框架集成和自动优化，而axios等库提供更多高级功能和浏览器兼容性。

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