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 通常是一个异步函数，适用于服务器上的异步操作，然后将数据作为道具传递给页面。

在服务器端和浏览器端都可以运行（如果你使用Link为例）。

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

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

Answer 2

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

getInitialProps 返回的数据在服务器渲染时被序列化，类似于JSON.stringify。确保从 getInitialProps 返回的对象是普通对象，而不是使用日期、地图或集。

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

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

Answer 3

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

所有这些数据都可以通过 props 返回给组件。

注意："getIntialProps" 无法访问应用道具。

Answer 4

使用getInitialProps的动机：

所有这些答案都是正确的，但我想补充一点，NextJS 进行服务器端渲染。这意味着如果你想在向用户展示你不能使用的东西之前获取数据 componentDidMount （因为这种情况发生在在渲染之后）。

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

Answer 5

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

Answer 6

getInitialProps

用于异步获取一些数据，然后填充 props。
对于初始页面加载，getInitialProps 将仅在服务器上执行。
仅当通过 next/link 组件或使用 next/router.
不能在子组件中使用，只能在每个页面的默认导出中使用。

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

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

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

Answer 7

我会尽力解释这个问题：

首先你要问自己什么是 server-side 渲染，为什么我们需要 server-side 渲染？

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

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

因为搜索引擎爬虫（Google）解析的信息不多（它会问自己，真的吗？一个div标签加上一堆JS？真的吗？什么哎呀这是?? naaahh 我厌倦了这个我会去索引另一个页面并在下次离开这个页面......等等），搜索引擎感觉很难理解该网站的内容，意味着它没有针对搜索引擎（记住 SEO = 搜索引擎优化）。

所以这就是为什么我们需要从服务器渲染数据，这样搜索引擎爬虫肯定会很舒服地解析站点的信息。

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

NextJS: getInitialProps 方法

NextJS: getInitialProps method

javascript

reactjs

next.js