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</br>
路由跳转
点击连接按钮=>异步加载页面组件 => 调用页面的getInitialProps=>
数据返回路由变化=>渲染新的页面
