深入探究 Next.js 中的 getServerSideProps 和 getStaticProps 用法及区别

引言：

Next.js 是一个流行的 React 框架，它提供了许多强大的功能来简化服务器渲染（SSR）和静态生成（SSG）的过程。其中，getServerSideProps 和
getStaticProps 是两个重要的函数，用于在页面渲染之前获取数据。本文将详细解答这两个函数的用法及区别，并结合代码示例进行说明。

一、getServerSideProps 的用法：

Next.js v9.3版本引入了 getServerSideProps 取代 getInitialProps 的使用；
getInitialProps 会根据情况在服务端或者客户端执行，如果在 getInitialProps 中进行一些 node.js 或数据库这种纯服务端的操作，当 getInitialProps 在客户端执行时就会报错，除非自己去做兼容处理，执行环境不一致，导致维护成本增高，故而该 API Next 9.3 后续版本已弃用。

getServerSideProps 是一个异步函数，用于在每个请求时获取数据。它位于页面组件中，并且只能在服务器端执行。下面是一个简单的示例：

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data
    }
  };
}
1
2
3
4
5
6
7
8
9
10

在上述示例中，我们使用 fetch 函数从远程 API 获取数据，并将其作为 props 返回。这样，页面组件就可以通过 props.data 来访问这些数据了。

注：

1. 当 getServerSideProps 所在页面为 SSR 服务端渲染时，getServerSideProps 中的数据将会被放到全局的 _NEXT_DATA 中，用于将服务器端渲染的内容与客户端渲染的内容进行同步，以确保页面在客户端加载后能够保持一致的状态和数据。这样可以提高页面的性能和用户体验。

2. 非 SSR 情况下，进入该页面 next.js 将会自动发请求到： host/_next/data/hash/{url}.json?{query}，其中 host 为当前网站域名， hash 为生产环境下哈希地址，url 为路由地址，query 为路由传参，该接口返回值为：

{
  "pageProps": "返回的 props 数据内容",
  "__N_SSP": true
}
1
2
3
4

客户端拿到 getServerSideProps 返回值在页面挂载时注入进去。

针对情况2举例说明：
当前有这样一个页面 https://www.example.com/word?w=word"，页面路由为 /word，路径中需要接收参数 w，/word 页面中 getServerSideProps 根据参数 w，调取接口获取对应参数数据展示在页面上，当 url 中 w 变化时，浏览器就会发送 https://www.example.com/_next/data/0Lft-1zUH3u6biD0uE-6b/word.json?w=test 这样的 XHR 请求，获取页面需要重新渲染的数据。
/word 页面中 getServerSideProps 代码如下：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { query, req, res } = context;
  // query 路由传参
  const data = await fetch('url', { method:"post", body: {query.w} });
  // 返回数据供页面使用
  return {
    props: {
      query,
      data
    },
  };
};
1
2
3
4
5
6
7
8
9
10
11
12

二、getStaticProps 的用法：

getStaticProps 也是一个异步函数，但它在构建时运行，而不是每次请求时运行。它用于在构建时生成静态页面所需的数据。下面是一个简单的示例：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data
    }
  };
}
1
2
3
4
5
6
7
8
9
10

在上述示例中，我们同样使用 fetch 函数从远程 API 获取数据，并将其作为 props 返回。不同的是，这些数据在构建时就会被预先获取，并在每个静态页面中使用。

三、getServerSideProps 和 getStaticProps 的区别：

1. 执行时机：getServerSideProps 在每个请求时执行，而 getStaticProps 在构建时执行。
2. 执行环境：getServerSideProps，getStaticProps 都只能在服务器端执行。
3. 数据更新：getServerSideProps 可以获取实时数据，因为它在每个请求时都会执行。而 getStaticProps 获取的数据在构建时就确定了，因此在构建后数据的更新需要重新构建。
4. 部署方式：getServerSideProps 的页面需要部署到服务器上，而 getStaticProps 的页面可以部署到静态文件托管服务上，例如 Vercel。
5. 性能：getServerSideProps 的页面每次请求都会执行获取数据的逻辑，可能会影响性能。而 getStaticProps 的页面在构建时就获取了数据，所以访问速度更快。

结论：

getServerSideProps 和 getStaticProps 是 Next.js 中用于获取数据的重要函数。getServerSideProps 适用于需要实时数据的场景，而 getStaticProps 适用于数据不经常变化的场景。合理选择这两个函数可以提高页面性能和用户体验。