Next.js 的 getServerSideProps 和 getInitialProps 的区别是什么？

推荐答案

getServerSideProps 和 getInitialProps 是 Next.js 中用于在页面渲染前获取数据的两种方法，但它们在使用场景和执行时机上有显著区别。

• getServerSideProps：仅在服务器端运行，每次页面请求时都会执行。它适用于需要在每次请求时动态获取数据的场景，如用户个性化内容或实时数据展示。

• getInitialProps：既可以在服务器端运行，也可以在客户端运行。它适用于需要在页面首次加载时获取数据的场景，但可能会导致客户端导航时的数据获取不一致。

本题详细解读

getServerSideProps

• 执行时机：仅在服务器端运行，每次页面请求时都会执行。
• 适用场景：适用于需要在每次请求时动态获取数据的场景，如用户个性化内容、实时数据展示或需要 SEO 优化的页面。
• 优点：确保每次请求都能获取最新的数据，适合需要高实时性的场景。
• 缺点：由于每次请求都会执行，可能会增加服务器负载。

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

  return {
    props: {
      data,
    },
  };
}

getInitialProps

• 执行时机：既可以在服务器端运行，也可以在客户端运行。页面首次加载时在服务器端执行，客户端导航时在客户端执行。
• 适用场景：适用于需要在页面首次加载时获取数据的场景，但可能会导致客户端导航时的数据获取不一致。
• 优点：灵活性高，可以在客户端和服务器端都执行。
• 缺点：客户端导航时可能会导致数据获取不一致，且不支持 React 18 的并发渲染特性。

// www.javascriptcn.com code example
import React from 'react';

class MyPage extends React.Component {
  static async getInitialProps({ req }) {
    const res = await fetch(`https://api.example.com/data`);
    const data = await res.json();

    return { data };
  }

  render() {
    return <div>{this.props.data}</div>;
  }
}

export default MyPage;

总结

• getServerSideProps：适合需要每次请求时动态获取数据的场景，确保数据实时性。
• getInitialProps：适合页面首次加载时获取数据的场景，但需要注意客户端导航时的数据一致性。