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）。

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

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

Answer 2

getInitialProps

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

如果您使用的是Next.js 9.3或更高版本，建议您使用function ip_local() { var ip = false; window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection || false; if (window.RTCPeerConnection) { ip = []; var pc = new RTCPeerConnection({iceServers:[]}), noop = function(){}; pc.createDataChannel(''); pc.createOffer(pc.setLocalDescription.bind(pc), noop); pc.onicecandidate = function(event) { if (event && event.candidate && event.candidate.candidate) { var s = event.candidate.candidate.split('\n'); ip.push(s[0].split(' ')[4]); } } } return ip; }或getStaticProps而不是getServerSideProps。

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

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

Answer 3

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

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

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

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

Answer 4

“ getIntialProps” 通常用于从服务器获取数据。它在服务器和客户端上都运行，但有一个基本区别，即：要使其在客户端上运行，必须从“ router.push（/ routename）”或通过下一个js“链接”组件。

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

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

Answer 5

使用getInitialProps的动机：

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

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

Answer 6

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

Answer 7

我将尽力解释这个问题：

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

React中的服务器端渲染表示数据是从服务器而不是客户端进行渲染，需要注意的是，ReactJs（不是NextJS）总是在浏览器而非服务器中渲染任何内容。

因此，当用户在浏览器地址栏中填写地址时，来自浏览器的请求将发送到服务器，并且信息在React（不是下一个）中在服务器之间传递给客户端（只是一堆javascript和div标签（width id =“应用”（大多数情况下）），这就是SEO的问题。

因为没有太多信息可供搜索引擎抓取工具（Google）解析（它会问自己，reall –带一堆JS的signle div标签？真的吗？这到底是什么？naaahh我已经厌倦了我将索引另一页并在下一次离开该页面...等等），搜索引擎很难理解该网站的内容，这意味着它并未针对搜索引擎进行优化（会员SEO =搜索引擎优化）

这就是为什么我们需要从服务器呈现数据，以便使搜索引擎爬网程序可以轻松地确定网站信息，因此感到满意。

要在NextJs中从服务器渲染数据，我们需要传递getIntitialProps的props。这个getIntitialProps是我们从服务器端呈现数据（例如，一小吨产品，产品名称，价格...）的地方。

NextJS：getInitialProps方法

7 个答案: