很簡單的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還不太懂，以後會專門寫一篇文章介紹一下，小夥伴們能夠先去本身網上找找資料看看。