很简单的next.js数据获取规范-白红宇

前言

还是提前声明，笔者也属于新手，文章内容不会达到一些大佬写的水平，但是希望对入门级小伙伴有所帮助，本文基于的例子基于前面两篇文章搭建的next环境，如果没看过影响应该不大，但是建议对next.js了解很少的小伙伴去看看跟着操作一遍。

数据获取规范getInitialPorps()

在next.js中，数据的获取可以通过getInitialPorps()完成，这个方法可以让我们在进入某个页面之前获取到这个页面所需要的数据，也可以让我们在App组件中获取全局的数据，还可以通过它实现客户端和服务端数据的同步，它是next.js数据获取的规范，在next.js中，不推荐使用componentDidMount()等方式获取数据，而应该使用getInitialPorps()。

getInitialPorps()应该用在哪？ 在前面的文章中提到过next项目中页面存放的位置，我们可以在pages中去写页面，也可以在components目录中去写页面组件，但是只有pages中的页面才在解析后生成对应的路由。getInitialPorps()也是用于pages下的js才会生效。下面看一下具体的例子：

// pages/a.jsimport { withRouter } from 'next/router'import Link from 'next/link'const A =  ({ router, msg }) =>   (
              
     
              here is msg: { msg }      
     
      )    A.getInitialProps = () => {  return {    msg: 'this is test data of getInitialProps()',      }}export default withRouter(A)复制代码

getInitialProps()返回了一个对象，其属性可以作为A的props传递到组件中进行使用

再来看看如果放到组件中会不会生效：

// components/Comp.jsxconst Comp =  ({headerTitle}) => (  
        
     Header title is: { headerTitle }
    
     
      this is header Components
     
  
    
)Comp.getInitialProps = () => {  return {    headerTitle: 'this is header title'  }}export default Comp;// 在a.js中引入并使用......import Comp from '../components/Comp'......
    ......复制代码

说说其中原因 上面也说过pages下的js文件会生成对应的路由，所以在路由切换的时候，pages下的js文件就会被路由功能做一些处理，在这个页面被加载之前，next.js就会去先调用它的getInitialProps()方法，拿出其返回的对象，将里面的属性作为prorps传递给这个页面组件，最后渲染页面。写在components里面的getInitialProps()就没这么幸运被调用了。

getInitialProps执行的时间 getInitialProps既可以在服务端执行，也可以在浏览器端执行，如果是在服务器端执行了，在浏览器中就不会再执行，而是去复用这个服务端渲染的HTML内容。

先来看看例子吧：在getInitialProps中添加一串明显的标记

A.getInitialProps = () => {  console.log('============我是标记=============')  return {    msg: 'this is test data of getInitialProps()',    myName: 'king'  }}复制代码

直接进入localhost:3000/a,打开控制台的network刷新一下，我们可以看到数据是由服务端渲染返回的，控制台也会有我们的标记

那什么时候是由客户端来执行的？我们可以在从首页的按钮直接点进这个页面试试

此时就是在浏览器端进行执行和渲染的，你可以看看你的控制塔，还是之前输出的那条标记。

通过异步方式获取数据

A.getInitialProps = async () => {  const promise = new Promise(resolve => {    setTimeout(function () {      resolve({        msg: 'this is test data of getInitialProps()',        myName: 'king'      })    },2000)  })  return await promise}复制代码

真实情况我们获取数据可能要请求服务器，这里我们用setTimeout模拟请求过程，我们可以使用async await方式来执行异步操作。

结束

这篇文章内容比较少，只说明了一个getInitialProps方法，但是他在next.js中是很重要的。可能有小伙伴对异步，promise,async await还不太懂，之后会专门写一篇文章介绍一下，小伙伴们可以先去自己网上找找资料看看。