NextJS：getInitialProps 方法

Question

使用 NextJS 并看到一个页面示例：

class IndexPage extends Component {
  static async getInitialProps(context) {
    return {};
  }
  render() {
    return <div>hello world</div>;
  }
}
export default withRouter(IndexPage);

NextJS 中的 getInitialProps 方法究竟是什么？

Answer 1

getInitialProps通常是一个异步函数，它适用于服务器上的异步操作，然后将数据作为 props 传递到页面。

它可以在服务器和浏览器上运行（例如，如果您使用Link ）。

我的结论是，当您的组件充当 Page 并且您希望将数据作为 Props 提供时，使用getInitialProps来获取数据。

文档： https : //nextjs.org/learn/basics/fetching-data-for-pages

Answer 2

请注意，要在页面加载时加载数据，我们使用 getInitialProps，它是一个异步静态方法。 它可以异步获取任何解析为 JavaScript 普通对象的内容，该对象填充道具。

从 getInitialProps 返回的数据在服务器渲染时被序列化，类似于 JSON.stringify。 确保从 getInitialProps 返回的对象是一个普通对象，而不是使用 Date、Map 或 Set。

对于初始页面加载，getInitialProps 将仅在服务器上执行。 getInitialProps 只会在通过 Link 组件导航到不同路由或使用路由 API 时在客户端上执行。

注意：getInitialProps 不能在子组件中使用。 仅在页面中。

Answer 3

获取初始道具

• 用于异步获取一些数据，然后填充道具。
• 对于初始页面加载，getInitialProps 将仅在服务器上执行。
• 只有当通过 next/link 组件或使用 next/router 导航到不同的路由时，才会在客户端上执行。
• 不能在子组件中使用，只能在每个页面的默认导出中使用。

如果您使用 Next.js 9.3 或更新版本，建议您使用getStaticProps或getServerSideProps而不是getInitialProps 。

这些新的数据获取方法允许您在静态生成和服务器端渲染之间进行精细的选择。

来源： https : //nextjs.org/docs/api-reference/data-fetching/getInitialProps

Answer 4

使用getInitialProps动机：

所有这些答案都是正确的，但我想补充一点， NextJS服务器端渲染。 这意味着如果您想在向用户显示某些内容之前获取数据，则不能使用componentDidMount （因为这是在渲染之后发生的）。

所以你需要使用getInitialProps因为它首先被执行，然后 NextJS 渲染页面。 然后 NextJS 将生成的组件的 HTML 发送到浏览器。

Answer 5

“getIntialProps”通常用于从服务器获取数据。 它在服务器和客户端都运行，但有一个基本区别，即：要使其在客户端工作，必须从“router.push(/routename)”或下一个 js 'Link' 组件命中路由。

所有这些数据都可以从 props 返回到组件中。

注意： “getIntialProps”无权访问应用程序道具。

Answer 6

当您希望您的页面在服务器端而不是客户端请求数据时使用getInitialProps ，它允许利用 SEO。

Answer 7

我会尽力解释这个问题：

首先你必须问自己什么是服务器端渲染，为什么我们需要服务器端渲染？

React 中的服务器端渲染意味着数据是从服务器而不是客户端渲染的，重要的是要注意 ReactJs（不是 NextJS）总是在浏览器而不是服务器中渲染任何东西。

因此，当用户在浏览器地址栏中填写地址时，来自浏览器的请求被发送到服务器，并且信息在 React 中的服务器到客户端之间传递（而不是下一个）只是一堆 javascript 和一个 div 标签（宽度 id="app" 最时间），这是 SEO 的问题。

因为没有太多信息可供搜索引擎爬虫 (Google) 解析（它会问自己，真的吗？一个带有一堆 JS 的单格 div 标签？真的？这到底是什么东西？？naaahh 我厌倦了这个，我会的去索引另一个页面，下次离开这个页面......等等），搜索引擎感觉难以理解该网站的内容，这意味着它没有针对搜索引擎进行优化（记住 SEO = 搜索引擎优化）。

所以这就是为什么我们需要渲染来自服务器的数据，以便搜索引擎爬虫可以放心地解析站点的信息。

为了在 NextJs 中渲染来自服务器的数据，我们需要从 getIntitialProps 传递道具。 这个 getIntitialProps 是我们将从服务器端呈现数据（例如，一升产品、产品名称、价格...）的地方。