nextjs 自定義app.js

作用：
固定layout
保持一些公用的狀態(tài)
給頁面?zhèn)魅胍恍┳远x數(shù)據(jù)
自定義錯誤處理

nextjs 自定義document.js

用途：
只有在服務(wù)端渲染的時候才會被調(diào)用，用來修改服務(wù)器渲染的文檔內(nèi)容，
一般用來配合第三方css-in-js方案使用

nextjs lazyLoading

A.getInitialProps = async ctx => {
//使用moment 時候才加載一個模塊
const moment = await import('moment')
const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      name: 'thomas',
      time: moment.default(Date.now() - 60 * 1000).fromNow()
    })
  }, 1000);
})
return await promise
}

nextjs的配置項

const configs = {
  // 編譯文件的輸出目錄
  distDir: 'dest',
  // 是否給每個路由生成Etag
  generateEtags: true,
  // 頁面內(nèi)容緩存配置
  onDemandEntries: {
    // 內(nèi)容在內(nèi)存中緩存的時長（ms）
    maxInactiveAge: 25 * 1000,
    // 同時緩存多少個頁面
    pagesBufferLength: 2
  },
  // 在pages目錄下那種后綴的文件會被認(rèn)為是頁面
  pageExtensions: ['jsx', 'js'],
  // 配置buildId
  generateBuildId: async () => {
    if (process.env.YOUR_BUILD_ID) {
      return process.env.YOUR_BUILD_ID
    }
    // 返回null使用默認(rèn)的unique id
    return null
  },
  // 手動修改webpack config
  webpack(config, options) {
    return config
  },
  // 修改webpackDevMiddleware配置
  webpackDevMiddleware: config => {
    return config
  },
  // 可以在頁面上通過 process.env.customKey 獲取value
  env: {
    customKey: 'value'
  },
  // 下面?zhèn)z個要通過 ‘next/config’來讀取
  // 只有在服務(wù)端渲染時才會獲取的配置
  serverRuntimeConfig: {
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET
  },
  // 在服務(wù)端渲染和客戶端渲染都可獲取的配置
  publicRuntimeConfig: {
    staticFolder: '/static'
  }
}

nextjs ssr 流程

瀏覽器發(fā)起/page請求 => koa收到請求并且調(diào)用nextjs => nextjs開始渲染
=>調(diào)用 app的getInitialProps => 調(diào)用頁面的getInitialProps=>
渲染出最終html=>返回給瀏覽器=> end</br>

路由跳轉(zhuǎn)
點(diǎn)擊連接按鈕=>異步加載頁面組件 => 調(diào)用頁面的getInitialProps=>
數(shù)據(jù)返回路由變化=>渲染新的頁面