编辑“︁Next.js服务器端数据获取”︁

= Next.js服务器端数据获取 =

'''Next.js服务器端数据获取'''（Server-side Data Fetching）是Next.js框架中用于在服务器端预加载数据的一种策略。它允许开发者在页面渲染前从外部API、数据库或其他数据源获取数据，并将数据作为props传递给页面组件。这种策略特别适用于需要动态内容但又要保证SEO友好或快速初始加载的场景。

== 介绍 ==

在Next.js中，服务器端数据获取主要通过以下两种方式实现：
* '''getServerSideProps'''：在每次页面请求时运行，适用于需要频繁更新的数据。
* '''getStaticProps'''（结合增量静态再生ISR）：在构建时或按需重新生成静态页面，适合内容不频繁变化的场景。

服务器端数据获取的主要优势包括：
* 更好的SEO：搜索引擎可以抓取预渲染的HTML内容。
* 更快的初始加载：用户直接接收到已填充数据的页面。
* 安全性：敏感数据获取逻辑保留在服务器端。

== getServerSideProps ==

这是最常用的服务器端数据获取方法，它在每次页面请求时执行。

=== 基本语法 ===
<syntaxhighlight lang="javascript">
export async function getServerSideProps(context) {
  // context包含请求参数、查询字符串等
  const { params, req, res, query } = context;
  
  // 获取数据
  const data = await fetchData();
  
  // 返回props对象
  return {
    props: { data }, // 将传递给页面组件
  };
}
</syntaxhighlight>

=== 完整示例 ===
<syntaxhighlight lang="javascript">
// pages/post/[id].js
import React from 'react';

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

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

  if (!post) {
    return {
      notFound: true, // 返回404页面
    };
  }

  return {
    props: { post }, // 传递给Post组件
  };
}

export default Post;
</syntaxhighlight>

=== 上下文对象 ===
getServerSideProps接收的context对象包含以下属性：
* '''params'''：动态路由参数（如[id]）
* '''req'''：HTTP请求对象
* '''res'''：HTTP响应对象
* '''query'''：查询字符串对象
* '''preview'''：预览模式状态
* '''previewData'''：预览数据

== 性能考虑 ==

虽然getServerSideProps提供了动态数据获取能力，但需要注意：
* 每次请求都会执行，可能增加服务器负载
* 比静态生成慢，因为需要等待数据获取
* 不适合高流量页面

优化策略：
* 添加缓存头（Cache-Control）
* 使用CDN缓存
* 对于不常变化的数据，考虑getStaticProps+ISR

== 实际应用场景 ==

=== 场景1：用户个性化页面 ===
电子商务网站的用户仪表盘，显示用户特定的订单历史：
<syntaxhighlight lang="javascript">
export async function getServerSideProps(context) {
  const { req } = context;
  const token = req.cookies.authToken;
  
  if (!token) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  const orders = await fetchUserOrders(token);
  return { props: { orders } };
}
</syntaxhighlight>

=== 场景2：实时数据展示 ===
新闻网站显示最新股市数据：
<syntaxhighlight lang="javascript">
export async function getServerSideProps() {
  const stockData = await fetchStockData();
  return {
    props: { stockData },
    // 设置缓存5秒
    cacheControl: 'public, s-maxage=5, stale-while-revalidate=59',
  };
}
</syntaxhighlight>

== 与客户端获取的比较 ==

<mermaid>
graph TD
    A[数据获取方式] --> B[服务器端获取]
    A --> C[客户端获取]
    B --> D[getServerSideProps]
    B --> E[getStaticProps]
    C --> F[useEffect+fetch]
    C --> G[SWR/React Query]
</mermaid>

对比特征：
{| class="wikitable"
|-
! 特性 !! 服务器端获取 !! 客户端获取
|-
| 执行时机 || 请求时/构建时 || 组件挂载后
|-
| SEO友好 || 是 || 否
|-
| 初始加载速度 || 快（含数据） || 慢（需二次请求）
|-
| 动态性 || 中等 || 高
|-
| 适用场景 || 首屏内容、SEO关键页 || 用户交互内容、私有数据
|}

== 高级用法 ==

=== 类型安全（TypeScript） ===
<syntaxhighlight lang="typescript">
import { GetServerSideProps } from 'next';

type Post = {
  id: string;
  title: string;
  content: string;
};

export const getServerSideProps: GetServerSideProps<{ post: Post }> = async (context) => {
  // 实现...
};
</syntaxhighlight>

=== 错误处理 ===
<syntaxhighlight lang="javascript">
export async function getServerSideProps() {
  try {
    const data = await fetchData();
    return { props: { data } };
  } catch (error) {
    return {
      redirect: {
        destination: '/error',
        permanent: false,
      },
    };
    // 或显示错误状态
    // return { props: { error: error.message } };
  }
}
</syntaxhighlight>

=== 并行数据获取 ===
使用Promise.all并行获取多个数据源：
<syntaxhighlight lang="javascript">
export async function getServerSideProps() {
  const [user, posts] = await Promise.all([
    fetchUser(),
    fetchPosts(),
  ]);
  
  return { props: { user, posts } };
}
</syntaxhighlight>

== 最佳实践 ==

1. '''最小化数据'''：只获取页面必需的数据
2. '''错误边界'''：处理API失败情况
3. '''安全措施'''：敏感操作验证用户权限
4. '''性能监控'''：记录数据获取时间
5. '''缓存策略'''：合理设置Cache-Control

== 数学表达 ==

服务器端获取的响应时间可以表示为：
<math>
T_{total} = T_{network} + T_{server} + T_{render}
</math>
其中：
* <math>T_{network}</math> = 网络延迟
* <math>T_{server}</math> = 服务器处理时间
* <math>T_{render}</math> = 页面渲染时间

== 总结 ==

Next.js的服务器端数据获取提供了强大的工具来构建动态、SEO友好的Web应用。通过getServerSideProps，开发者可以：
* 在渲染前获取所需数据
* 访问完整的请求上下文
* 实现服务器端重定向和错误处理
* 保证内容对搜索引擎可见

对于大多数内容驱动的网站，结合使用getServerSideProps和getStaticProps（带ISR）通常是最佳实践，可以在动态性和性能之间取得良好平衡。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]