Next.js 中的数据获取方法

在 Next.js 中，我们需要实现一些数据获取的逻辑来获取数据，以便在渲染页面之前先加载数据。这种集成数据获取和 React 组件的能力是 Next.js 的一大特性。

下面介绍 Next.js 中的数据获取方法。

getStaticProps

通过 getStaticProps 来获取数据，这个方法只在构建阶段运行。通过这个方法，我们可以在构建时预渲染静态 HTML。当用户访问我们的应用程序的页面时，Next.js 可以直接使用构建时生成的 HTML 文件。

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

 return {
  props: {
   data
  }
 };
}

getServerSideProps

通过 getServerSideProps 来获取数据，这个方法在每个请求时都会运行。如果一些数据在构建时不可用，或者不适合预渲染，那么我们可以使用 getServerSideProps 来进行数据获取。

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

 return {
  props: {
   data
  }
 };
}

getStaticPaths

对于一些动态路由的情况，Next.js 中提供了 getStaticPaths 方法。当我们需要使用路由参数生成动态路径时，我们将使用 getStaticPaths，以便 Next.js 静态预渲染页面。

export async function getStaticPaths() {
 const paths = [
  { params: { id: '1' } },
  { params: { id: '2' } },
  { params: { id: '3' } }
 ];
 return { paths, fallback: false };
}

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

 return {
  props: {
   data
  }
 };
}

getInitialProps

过去，Next.js 使用 getInitialProps 来获取数据。然而，由于 getInitialProps 仅适用于类组件，现在该方法已停用。如果需要在函数组件中获取数据，可以使用 getStaticProps 或者 getServerSideProps 方法。

以上就是 Next.js 中的数据获取方法，开发者根据需求选择最适合的方法进行数据获取进行数据获取，以便在构建和渲染页面时更好地运用。