Next.js 中常见 API 接口的请求方式-JavaScript中文网-JavaScript教程资源分享门户

Next.js 是一款支持 SSR（服务器端渲染）的 React 框架，对于构建小型到中型应用是非常有优势的。在进行 SSR 的同时，Next.js 还有一些常见的 API 接口能够向服务端发送请求，本文将介绍 Next.js 中常见的 API 请求方式，并附上相应的示例代码。

前置知识

在了解 Next.js 中 API 接口的请求方式之前，需要对以下的前置知识进行了解。

React 基础知识
Node.js 基础知识
HTTP 协议基础知识

常见 API 接口请求方式

在 Next.js 中，常用的 API 接口请求方式有两种：

getServerSideProps
getStaticProps

1. getServerSideProps

getServerSideProps 是一种在服务端渲染页面返回数据的 API 接口。

使用该 API 时，只需要在需要进行渲染的页面组件中加入一个异步函数，在函数中返回一个包含数据的对象即可，如下所示：

// javascriptcn.com 代码示例
export async function getServerSideProps(context) {
  const { id } = context.query; // 获取参数
  const res = await fetch(`https://example.com/api/data/${id}`);
  const data = await res.json(); // 获取数据
  return {
    props: {
      data,
    },
  };
}

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

export default MyComponent;

需要注意的是，该方法只有在服务端运行时才会执行，在客户端进行路由跳转时不会执行。

2. getStaticProps

getStaticProps 是一种在静态生成页面返回数据的 API 接口。

使用该 API 时，需要先生成页面静态文件，然后在静态文件返回数据，如下所示：

// javascriptcn.com 代码示例
export async function getStaticProps({ params }) {
  const { id } = params; // 获取参数
  const res = await fetch(`https://example.com/api/data/${id}`);
  const data = await res.json(); // 获取数据
  return {
    props: {
      data,
    },
  };
}

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

export default MyComponent;

export async function getStaticPaths() {
  const ids = [1, 2, 3]; // 生成静态页面的参数
  const paths = ids.map((id) => ({ params: { id: id.toString() } }));
  return {
    paths,
    fallback: false,
  };
}

在上面的代码中，我们使用了 getStaticPaths 来生成静态页，其中 paths 是一个数组，存放的是生成静态页需要的参数，fallback 则是用来控制如果使用了未知参数时的行为（如是否重试获取数据，是否返回 404 状态码等）。

需要注意的是，使用该方法生成的静态页会缓存在客户端，当客户端再次访问该页面时不需要再次进行服务端渲染，提高了响应速度。

总结

本文介绍了 Next.js 中常见的 API 请求方式，包括 getServerSideProps 和 getStaticProps，同时给出了相应的代码示例，并对 Next.js 程序员进行了深度的解析和指导，希望借此能够帮助读者更好的了解 Next.js。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654ae3837d4982a6eb4dd3e0