nextjs进阶

nextjs 自定义app.js

作用：
固定layout
保持一些公用的状态
给页面传入一些自定义数据
自定义错误处理

nextjs 自定义document.js

用途：
只有在服务端渲染的时候才会被调用，用来修改服务器渲染的文档内容，
一般用来配合第三方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,
  // 页面内容缓存配置
  onDemandEntries: {
    // 内容在内存中缓存的时长（ms）
    maxInactiveAge: 25 * 1000,
    // 同时缓存多少个页面
    pagesBufferLength: 2
  },
  // 在pages目录下那种后缀的文件会被认为是页面
  pageExtensions: ['jsx', 'js'],
  // 配置buildId
  generateBuildId: async () => {
    if (process.env.YOUR_BUILD_ID) {
      return process.env.YOUR_BUILD_ID
    }
    // 返回null使用默认的unique id
    return null
  },
  // 手动修改webpack config
  webpack(config, options) {
    return config
  },
  // 修改webpackDevMiddleware配置
  webpackDevMiddleware: config => {
    return config
  },
  // 可以在页面上通过 process.env.customKey 获取value
  env: {
    customKey: 'value'
  },
  // 下面俩个要通过 ‘next/config’来读取
  // 只有在服务端渲染时才会获取的配置
  serverRuntimeConfig: {
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET
  },
  // 在服务端渲染和客户端渲染都可获取的配置
  publicRuntimeConfig: {
    staticFolder: '/static'
  }
}

nextjs ssr 流程

浏览器发起/page请求 => koa收到请求并且调用nextjs => nextjs开始渲染
=>调用 app的getInitialProps => 调用页面的getInitialProps=>
渲染出最终html=>返回给浏览器=> end

路由跳转
点击连接按钮=>异步加载页面组件 => 调用页面的getInitialProps=>
数据返回路由变化=>渲染新的页面