Next.js 数据获取：使用 getServerSideProps 进行服务器端渲染 - 实践

小潜牛

关键要点

• 服务器端渲染（SSR） 是 Next.js 的核心功能，通过 getServerSideProps 在每次请求时动态生成页面，适合实时数据场景。
• getServerSideProps 运行于服务器端，用于获取动态数据并传递给页面组件，优化 SEO 和用户体验。
• 支持动态路由、环境变量和错误处理，适用于数据频繁变化的场景。
• 涵盖 SSR 和 getServerSideProps 的工作原理、使用场景、实现方法、优化技巧和常见问题解决方案。
• 提供详细代码示例和最佳实践，适合初学者和进阶开发者。

为什么需要这篇文章？

服务器端渲染（Server-Side Rendering, SSR）是 Next.js 的重要特性，通过在每次请求时生成页面，确保内容实时更新，特别适合需要动态数据（如用户仪表板、实时库存）的场景。getServerSideProps 是 Pages Router（pages/ 目录）中实现 SSR 的核心 API，允许开发者在服务器端获取数据并传递给页面组件。掌握 getServerSideProps 的使用方法，对于构建动态、SEO 友好的 Web 应用至关重要。本文将深入讲解 SSR 和 getServerSideProps 的工作原理，展示其在 Pages Router 中的实现方法，并提供实用示例和优化建议。

目标

• 解释服务器端渲染和 getServerSideProps 的工作原理。
• 展示如何在 Pages Router 中使用 getServerSideProps 实现动态页面。
• 结合动态路由和环境变量处理复杂场景。
• 提供性能优化、错误处理和大型项目组织实践。
• 帮助开发者选择合适的 SSR 策略并构建高效应用。

---

1. 引言

Next.js 是一个基于 React 的全栈框架，其服务器端渲染（Server-Side Rendering, SSR）功能通过在每次请求时动态生成页面，提供了实时数据更新和 SEO 优化的能力。getServerSideProps 是 Next.js Pages Router（pages/ 目录）中的核心 API，用于在服务器端获取数据并将其作为 props 传递给页面组件。与静态生成（SSG）不同，SSR 适合数据频繁变化或需要用户特定内容的场景，如用户仪表板、实时搜索结果或电商库存页面。

getServerSideProps 在每次请求时运行，允许开发者直接访问服务器资源（如数据库、API）并生成动态 HTML。本文将详细讲解 SSR 和 getServerSideProps 的工作原理，展示其在 Pages Router 中的使用方法，结合动态路由、环境变量和错误处理，展示如何构建动态页面，并通过代码示例、最佳实践和常见问题解决方案，帮助开发者掌握这一功能。

通过本文，您将学会：

• 理解服务器端渲染和 getServerSideProps 的运行机制。
• 在 Pages Router 中使用 getServerSideProps 实现动态页面。
• 结合动态路由处理个性化内容。
• 优化 SSR 性能、处理错误并组织大型项目的数据获取逻辑。
• 选择合适的 SSR 策略并构建高效、可扩展的应用。

2. 服务器端渲染与 getServerSideProps 的基本原理

2.1 服务器端渲染（SSR）概述

服务器端渲染是指在每次用户请求时，服务器动态生成 HTML 并返回给浏览器。SSR 的优势包括：

• 实时数据：每次请求获取最新数据，适合动态内容。
• SEO 友好：生成完整的 HTML，易于搜索引擎爬取。
• 个性化内容：根据用户身份（如 cookies、认证令牌）生成页面。
• 用户体验：首屏内容直接显示，无需客户端加载。

SSR 的缺点是增加服务器负载，适合数据频繁变化或需要实时更新的场景。Next.js 通过 getServerSideProps 实现 SSR。

2.2 getServerSideProps 的工作原理

getServerSideProps 是一个异步函数，运行于服务器端，在每次请求时执行，用于获取数据并返回 props。

• 运行环境：服务器端（每次请求）。
• 上下文参数：

  {
  params, // 动态路由参数
  req, // HTTP 请求对象
  res, // HTTP 响应对象
  query, // 查询字符串
  preview, // 预览模式标志
  previewData // 预览模式数据
  }

• 返回值：

  {
  props: {
  }, // 传递给页面组件的 props
  notFound?: boolean, // 触发 404
  redirect?: { destination: string, permanent: boolean
  } // 重定向
  }

• 限制：
  • 仅在 Pages Router 的页面文件中使用（pages/*.js）。
  • 不能在组件或客户端代码中使用。
  • 无法访问浏览器 API（如 window）。

2.3 与其他数据获取方法的比较

方法	运行时间	适用场景	优点	缺点
getServerSideProps	请求时	动态内容、实时数据	实时更新、SEO 友好	增加服务器负载
getStaticProps	构建时	静态内容、SEO 优先	高性能、低服务器负载	动态内容需 ISR 或重新构建
getInitialProps	构建时/请求时	兼容旧项目	灵活性高	性能较差，已不推荐
客户端获取（如 SWR）	客户端运行时	交互式 UI、动态更新	适合客户端交互	SEO 较差，增加客户端负担

3. 使用 getServerSideProps 实现服务器端渲染

getServerSideProps 在 Pages Router 中用于生成动态页面，适合实时数据场景。

3.1 基本使用

• 项目结构：

  pages/
  ├── index.js          # /
  ├── dashboard.js      # /dashboard

• 代码示例（pages/dashboard.js）：

  export async function getServerSideProps(context) {
  // 模拟获取用户数据
  const res = await fetch('https://api.example.com/user', {
  headers: {
  cookie: context.req.headers.cookie || '',
  },
  });
  const user = await res.json();
  return {
  props: {
  user,
  },
  };
  }
  export default function Dashboard({ user
  }) {
  return (
  <main className="flex min-h-screen flex-col items-center justify-center p-8">
    <h1 className="text-4xl font-bold">用户仪表板<
      /h1>
      <p>欢迎, {user.name
        }<
        /p>
        <p>邮箱: {user.email
          }<
          /p>
          <
          /main>
          );
          }

• 效果：

  • 每次请求时从 API 获取用户数据，生成动态 HTML。
  • 页面显示用户特定内容，支持 SEO。

3.2 处理错误和 404

• 代码示例（pages/profile/[id].js）：

  export async function getServerSideProps({ params
  }) {
  const res = await fetch(`https://api.example.com/users/${params.id
  }`);
  const user = await res.json();
  if (!user) {
  return {
  notFound: true, // 触发 404
  };
  }
  return {
  props: {
  user,
  },
  };
  }
  export default function Profile({ user
  }) {
  return (
  <main className="p-8">
    <h1 className="text-4xl font-bold">
      {user.name
      }<
      /h1>
      <p>邮箱: {user.email
        }<
        /p>
        <
        /main>
        );
        }

• 效果：

  • 如果用户不存在，页面返回 404。

3.3 重定向

• 代码示例：

  export async function getServerSideProps({ params, req
  }) {
  const user = await fetchUser(params.id);
  if (!user.isAuthenticated) {
  return {
  redirect: {
  destination: '/login',
  permanent: false, // 临时重定向
  },
  };
  }
  return {
  props: { user
  },
  };
  }

• 效果：

  • 未认证用户重定向到登录页面。

3.4 访问请求上下文

getServerSideProps 可通过上下文访问请求信息（如 cookies、查询参数）。

• 代码示例：

  export async function getServerSideProps({ req, query
  }) {
  const token = req.cookies.token || '';
  const searchTerm = query.search || '';
  const res = await fetch(`https://api.example.com/search?q=${searchTerm
  }`, {
  headers: { Authorization: `Bearer ${token
  }`
  },
  });
  const results = await res.json();
  return {
  props: {
  results,
  searchTerm,
  },
  };
  }
  export default function Search({ results, searchTerm
  }) {
  return (
  <main className="p-8">
    <h1 className="text-4xl font-bold">搜索: {searchTerm
      }<
      /h1>
      <ul>
        {results.map((item) =>
        (
        <li key={item.id
        }>
        {item.title
        }<
        /li>
        ))
        }
        <
        /ul>
        <
        /main>
        );
        }

• 效果：

  • 根据查询参数和 cookies 获取搜索结果，生成动态页面。

4. 结合动态路由

getServerSideProps 支持动态路由，通过 params 获取路由参数。

• 项目结构：

  pages/
  ├── products/
  │   ├── [id].js      # /products/:id

• 代码示例（pages/products/[id].js）：

  export async function getServerSideProps({ params
  }) {
  const res = await fetch(`https://api.example.com/products/${params.id
  }`);
  const product = await res.json();
  if (!product) {
  return { notFound: true
  };
  }
  return {
  props: {
  product,
  },
  };
  }
  export default function Product({ product
  }) {
  return (
  <main className="p-8">
    <h1 className="text-4xl font-bold">
      {product.name
      }<
      /h1>
      <p>价格: {product.price
        }<
        /p>
        <p>描述: {product.description
          }<
          /p>
          <
          /main>
          );
          }

• 效果：

  • 每次请求 /products/123 时，服务器动态获取产品数据并渲染页面。

5. 优化与配置

5.1 性能优化

• 缓存响应：

  • 使用 HTTP 缓存头或 CDN 缓存：

    export async function getServerSideProps({ res
    }) {
    const data = await fetch('https://api.example.com/data', {
    headers: {
    'Cache-Control': 's-maxage=60, stale-while-revalidate'
    },
    }).then((res) => res.json());
    // 设置响应缓存
    res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');
    return { props: { data
    }
    };
    }

• 减少数据请求：

  • 合并多个 API 调用：

    export async function getServerSideProps() {
    const [user, settings] = await Promise.all([
    fetch('https://api.example.com/user').then((res) => res.json()),
    fetch('https://api.example.com/settings').then((res) => res.json()),
    ]);
    return {
    props: { user, settings
    },
    };
    }

• 客户端缓存：

  • 结合客户端数据获取（如 SWR）减少重复请求：

    import useSWR from 'swr';
    const fetcher = (url) =>
    fetch(url).then((res) => res.json());
    export default function Page({ initialData
    }) {
    const { data
    } = useSWR('/api/data', fetcher, { initialData
    });
    return <div>
      {data.message
      }<
      /div>
      ;
      }

5.2 环境变量

为数据获取配置 API 端点：

• .env.local：

  API_URL=https://api.example.com

• 使用：

  export async function getServerSideProps() {
  const res = await fetch(`${process.env.API_URL
  }/data`);
  const data = await res.json();
  return { props: { data
  }
  };
  }

5.3 错误处理

• 捕获异常：

  export async function getServerSideProps() {
  try {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data
  }
  };
  } catch (error) {
  console.error('获取数据失败:', error);
  return { notFound: true
  };
  }
  }

• 自定义错误页面：

  export async function getServerSideProps() {
  const data = await fetchData();
  if (!data) {
  return {
  redirect: {
  destination: '/error',
  permanent: false,
  },
  };
  }
  return { props: { data
  }
  };
  }

6. 使用场景

6.1 用户仪表板

• 需求：根据用户身份渲染仪表板。
• 代码示例（pages/dashboard.js）：

  export async function getServerSideProps({ req
  }) {
  const token = req.cookies.token;
  const user = await fetch(`https://api.example.com/user`, {
  headers: { Authorization: `Bearer ${token
  }`
  },
  }).then((res) => res.json());
  if (!user) {
  return {
  redirect: { destination: '/login', permanent: false
  },
  };
  }
  return {
  props: { user
  },
  };
  }
  export default function Dashboard({ user
  }) {
  return (
  <main className="p-8">
    <h1>欢迎, {user.name
      }<
      /h1>
      <p>您的角色: {user.role
        }<
        /p>
        <
        /main>
        );
        }

6.2 实时搜索结果

• 需求：根据查询参数显示搜索结果。
• 代码示例（pages/search.js）：

  export async function getServerSideProps({ query
  }) {
  const searchTerm = query.q || '';
  const results = await fetch(`https://api.example.com/search?q=${searchTerm
  }`).then((res) => res.json());
  return {
  props: {
  results,
  searchTerm,
  },
  };
  }
  export default function Search({ results, searchTerm
  }) {
  return (
  <main className="p-8">
    <h1>搜索: {searchTerm
      }<
      /h1>
      <ul>
        {results.map((item) =>
        (
        <li key={item.id
        }>
        {item.title
        }<
        /li>
        ))
        }
        <
        /ul>
        <
        /main>
        );
        }

6.3 动态产品页面

• 需求：为电商网站生成产品详情页。
• 代码示例（pages/products/[id].js）：

  export async function getServerSideProps({ params
  }) {
  const product = await fetch(`https://api.example.com/products/${params.id
  }`).then((res) => res.json());
  if (!product) {
  return { notFound: true
  };
  }
  return {
  props: { product
  },
  };
  }
  export default function Product({ product
  }) {
  return (
  <main className="p-8">
    <h1>
      {product.name
      }<
      /h1>
      <p>价格: {product.price
        }<
        /p>
        <
        /main>
        );
        }

7. 最佳实践

• 模块化数据获取：

  // lib/fetchData.js
  export async function fetchUser(id) {
  const res = await fetch(`https://api.example.com/users/${id
  }`);
  return res.json();
  }

• 类型安全（TypeScript）：

  interface User {
  id: string;
  name: string;
  email: string;
  }
  export async function getServerSideProps({ params
  }: { params: { id: string
  }
  }) {
  const user: User = await fetchUser(params.id);
  return { props: { user
  }
  };
  }

• 性能优化：

  • 使用 HTTP 缓存或 CDN。
  • 合并 API 请求。
  • 结合客户端缓存（如 SWR）。

• SEO 优化：

  • 使用 Head 组件设置元数据：

    import Head from 'next/head';
    export default function Page({ data
    }) {
    return (
    <
    >
    <Head>
      <title>
        {data.title
        }<
        /title>
        <meta name="description" content={data.description
        } />
        <
        /Head>
        <main>
          <h1>
            {data.title
            }<
            /h1>
            <
            /main>
            <
            />
            );
            }

8. 常见问题及解决方案

问题	解决方案
getServerSideProps 未执行	确保函数在页面文件中导出，检查文件名是否正确。
数据未实时更新	验证 API 端点和数据源，确保请求正确。
服务器负载过高	使用缓存（HTTP 缓存或 CDN），或考虑 SSG/ISR。
API 请求失败	添加错误处理，使用 try-catch 或 notFound。
动态路由参数丢失	检查 params 是否正确传递，验证路由配置。

9. 大型项目中的组织

对于大型项目，推荐以下结构：

pages/
├── dashboard.js
├── products/
│   ├── [id].js
├── lib/
│   ├── fetchData.js
├── styles/
│   ├── globals.css

• 模块化数据获取：

  // lib/fetchData.js
  export async function fetchProduct(id) {
  const res = await fetch(`${process.env.API_URL
  }/products/${id
  }`);
  return res.json();
  }

• 全局样式：

  /* styles/globals.css */
  body {
  margin: 0;
  font-family: Arial, sans-serif;
  }

• 类型定义：

  // types/product.ts
  export interface Product {
  id: string;
  name: string;
  price: number;
  }

10. 下一步

掌握 getServerSideProps 后，您可以：

• 结合客户端数据获取（如 SWR）优化交互。
• 集成认证系统（如 NextAuth.js）支持用户特定内容。
• 配置 CDN 优化 SSR 性能。
• 部署应用并测试动态页面和 SEO。

总结

Next.js 的 getServerSideProps 是实现服务器端渲染的核心工具，通过在每次请求时获取数据并生成动态 HTML，提供了实时更新和 SEO 优势。本文通过详细代码示例，讲解了 getServerSideProps 的工作原理和使用方法，结合动态路由、环境变量和错误处理展示了其灵活性。性能优化、错误处理和最佳实践进一步帮助开发者构建高效、可扩展的应用。掌握 getServerSideProps 将为您的 Next.js 开发提供强大支持，助力构建动态、用户友好的 Web 应用。

来源：https://www.cnblogs.com/yfceshi/p/19030665