Next.js系统性教学：数据获取的全面解析_nextjs是如何从后台获取数据的-CSDN博客

本文链接：https://blog.csdn.net/liuweni/article/details/144312227

1. 数据获取的三种主要方式

Next.js 支持以下三种数据获取方式，根据数据的动态性和使用场景可以选择合适的方法：

1.1 静态生成 (Static Generation)

静态生成是一种在构建时 (build-time) 获取数据并生成静态 HTML 的方法。这种方法适合数据稳定且不频繁变化的场景，例如博客文章、产品列表等。

特点：

数据在构建时获取。
页面在构建后以静态文件的形式提供，速度极快。
适合 SEO 优化和高性能应用。

1.2 服务端渲染 (Server-side Rendering)

服务端渲染允许在每次请求时获取最新数据，并动态生成页面。这种方法适合需要实时数据或对用户定制内容的场景。

特点：

数据在每次请求时获取。
页面在请求后由服务器动态生成，适合对数据时效性要求高的应用。
相比静态生成，首次加载时间稍长。

1.3 客户端渲染 (Client-side Rendering)

客户端渲染在页面加载后，通过浏览器发起 API 请求以获取数据并更新页面。适合需要频繁交互或动态内容更新的场景，例如聊天应用或动态仪表盘。

特点：

数据在浏览器中动态获取。
用户界面与数据获取解耦，增强了页面的交互性。
初次加载时间更短，但数据加载可能略滞后。

2. 数据获取的实现方式

Next.js 提供了以下工具和函数来实现不同的数据获取方式。

2.1 静态生成的实现方式

getStaticProps

getStaticProps 是一个用于在构建时获取数据的特殊函数。它只会在服务器端运行，绝不会出现在客户端代码中。

代码示例：

// pages/blog/[id].js

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

  return {
    props: