Next.js：如何在页面渲染之前获取 data？

Next.js 是一个流行的 React 服务器端渲染框架，它提供了一些实用的功能，比如自动代码分割、静态文件导出等等。在使用 Next.js 进行开发时，我们常常需要在页面渲染之前获取一些数据，以便在组件中使用。在本文中，我们将介绍如何在 Next.js 中实现这个功能。

调用 getInitialProps 静态函数

Next.js 提供了一个特殊的静态函数 getInitialProps，可以在组件渲染之前获取组件所需的数据。该函数必须返回一个对象，这个对象将作为组件的 props。注意，只有页面组件才能调用 getInitialProps，而普通组件不能调用此函数。

下面是一个使用 getInitialProps 的示例：

// javascriptcn.com 代码示例
import React from 'react';

function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

Product.getInitialProps = async () => {
  const res = await fetch('https://api.example.com/product/1');
  const product = await res.json();
  return { product };
};

export default Product;

在上面的例子中，我们定义了一个产品组件，并在组件中显示产品名称和描述。在 getInitialProps 函数中，我们使用 fetch 函数从 API 中获取产品数据，并将获取的数据作为 product 的属性返回。在组件渲染期间，我们可以通过 this.props.product 访问这个数据。

使用 next/router 从 URL 中获取数据

在一些情况下，我们可能需要从 URL 中获取一些参数作为组件数据。Next.js 提供了一个路由对象 next/router，它可以从 URL 中获取参数。下面是一个使用路由查询字符串参数的示例：

// javascriptcn.com 代码示例
import React from 'react';
import { useRouter } from 'next/router';

function Product() {
  const router = useRouter();
  const { product } = router.query;
  return (
    <div>
      <h1>{product} details</h1>
    </div>
  );
}

export default Product;

在上面的例子中，我们定义了一个产品组件，并使用 useRouter 钩子从路由中获取查询字符串参数 product。在组件渲染期间，我们可以通过 this.props.product 访问这个数据。

使用 Redux 管理状态

如果你的数据需要在多个组件之间共享，那么你可能需要使用 Redux 管理状态。Redux 可以让你将应用程序的状态存储在一个单一的存储区域（store）中，并以可预测的方式处理应用程序状态的更改。

下面是一个使用 Redux 获取数据的示例：

// javascriptcn.com 代码示例
import React from 'react';
import { connect } from 'react-redux';
import { getProduct } from '../redux/actions';

function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

const mapStateToProps = (state) => ({
  product: state.product,
});

const mapDispatchToProps = {
  getProduct,
};

Product.getInitialProps = async ({ store }) => {
  await store.dispatch(getProduct());
};

export default connect(mapStateToProps, mapDispatchToProps)(Product);

在上面的例子中，我们定义了一个产品组件，并从 Redux 中获取 product 数据。我们使用 mapStateToProps 函数将存储中的 product 映射到组件的 props 上。我们还定义了一个 getProduct 动作来获取产品数据，我们从 mapDispatchToProps 函数中将它作为一个 prop 传递给组件。在 getInitialProps 函数中，我们调用了 getProduct 动作来在页面加载之前获取数据。

总结

在 Next.js 中获取数据非常容易。我们可以使用 getInitialProps 函数从 API 中获取数据，使用 next/router 从 URL 中获取参数，或者使用 Redux 管理状态。这些方法可以让我们在 React 组件内获取必要的数据，并做出相应的渲染。如果你正在使用 Next.js，希望本文能对你有所帮助。

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