代码之家 › 专栏 › 技术社区 › Willem van der Veen

NextJS:getInitialProps方法

next.js reactjs javascript

Willem van der Veen · 技术社区 · 6 年前

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

在NextJS中getInitialProps方法到底是什么?

4 回复 | 直到 6 年前

Joan Albert 6 年前

getInitialProps 通常是一个异步函数,对于

Link 例如)。

获取初始属性 当您的组件充当页面时获取数据,并且您希望将数据作为道具提供。

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

Sean Kim 6 年前

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

从getInitialProps返回的数据在服务器呈现时被序列化,类似于JSON.stringify文件. 确保从getInitialProps返回的对象是普通对象,并且不使用Date、Map或Set。

注意:getInitialProps不能在子组件中使用。只在页面中。

Jerico Pulvera 4 年前

获取初始属性

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

getStaticProps 或 getServerSideProps getInitialProps .

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

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

Styx 6 年前

使用的动机 getInitialProps :

NextJS 执行服务器端渲染。这意味着如果你想在向用户展示你不能使用的东西之前获取数据 componentDidMount 之后渲染)。

因为它首先执行,然后NextJS呈现页面。

RAVINDER MAHAJAN 6 年前

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

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

注: 无法访问应用程序道具。

Vengleab SO 5 年前

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

Cuong Hoang 4 年前

我会尽力解释这个问题:

React中的服务器端呈现意味着数据是从服务器而不是客户端呈现的,需要注意的是ReactJs(不是NextJS)总是在浏览器而不是服务器中呈现任何内容。

因此,当用户在浏览器地址栏中填写地址时,来自浏览器的请求被发送到服务器,信息在服务器和客户端之间传递(而不是下一个),这只是一堆javascript和一个div标记(大多数情况下width id=“app”),这就是SEO的问题。

在这个getInitialProps中,我们将从服务器端呈现数据(例如,产品的lits、产品的名称、价格……)。