很简单的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.js
import { withRouter } from 'next/router'
import Link from 'next/link'

const A =  ({ router, msg }) => 
  (<Link href="#hello"> <a> <div> here is msg: { msg } </div> </a> </Link>)
  
  A.getInitialProps = () => {
  return {
    msg: 'this is test data of getInitialProps()',
    
  }
}

export default withRouter(A)


复制代码

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

再来看看若是放到组件中会不会生效：

// components/Comp.jsx
const Comp =  ({headerTitle}) => (
  <header> <h1>Header title is: { headerTitle }</h1> <div>this is header Components</div> </header>
)

Comp.getInitialProps = () => {
  return {
    headerTitle: 'this is header title'
  }
}

export default Comp;

// 在a.js中引入并使用
......
import Comp from '../components/Comp'
......
<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还不太懂，以后会专门写一篇文章介绍一下，小伙伴们能够先去本身网上找找资料看看。