nextJS数据获取规范

getInitialProps

它是nextJS提供给我们进行数据获取的功能。
它只针对pages/内的component使用。
它可以在路由跳转时提前获取数据，并且可以在App中获取全局数据。
它可以帮助我们把客户端和服务端的数据进行同步，这是我们在服务器端渲染最大的痛点之一。
有了它之后，我们要尽可能的把跟页面数据获取相关的内容放到getInitalProps里面，而不是像以前一样放在componentDidMount里面。因为这是nextJS提供给我们的规范，也是nextJS框架里比较核心的部分。

示例

index.js

import Router from 'next/router'
export default ()=> {
    function gotoTask(){
        Router.push({ pathname: '/task', query:{taskName:'学习nextJS'} })
    }
    return ( <a onClick={gotoTask}>去任务页面</a>)
}

task.js

import { withRouter } from 'next/router'
const Task = ({ router,fzr }) => <span>{router.query.taskName} 任务负责人：{fzr}</span>
Task.getInitialProps = () =>{
    console.log('----------服务器端渲染-------------')
    return { fzr: 'chatwei' }
}
export default withRouter(Task)

如果点击按钮页面跳转，会走浏览器渲染。如果刷新task界面，会走服务器端渲染

异步执行 getInitialProps

task.js

import { withRouter } from 'next/router'
const Task = ({ router,fzr }) => <span>{router.query.taskName} 任务负责人：{fzr}</span>
Task.getInitialProps = async () =>{
    const promise = new Promise((resolve)=>{
        setTimeout(()=>{  resolve({ fzr: 'chatwei' }) },1000)
    })
    return await promise
}
export default withRouter(Task)

这样会导致，请求完了数据才跳转页面，跟目前的需求不太一致。