Next.js搭配Guess.js配置后router.prefetch未实现页面预取问题求助

问题1：HTTP1.1是否会导致prefetch失效 #

不会，HTTP1.1不会直接让router.prefetch逻辑失效，你目前预取不生效的核心原因是prefetch参数传错：
你使用的Next.js 6.x版本中，router.prefetch接收的参数是页面路由路径，而非页面源文件名，你传入/index.js、/example.js这类带.js后缀的路径时，Next.js无法匹配到对应路由的打包资源，自然不会触发预取。
你可以先将预取代码修改为如下内容验证：

// 移除路径后的.js后缀，传实际路由
router.prefetch('/')
router.prefetch('/example')
router.prefetch('/about')
router.prefetch('/media')

修改后如果预取逻辑正常，不需要额外切换HTTP2；如果仍有问题，再考虑HTTP2配置。

问题2：Next.js切换HTTP2协议的方法 #

你使用的Next.js 6.x版本原生start命令不支持HTTP2，需要通过自定义服务器实现，步骤如下：

1. 安装HTTP2支持依赖

npm i spdy

2. 生成本地SSL自签证书（生产环境替换为正规CA颁发的证书），在根目录新建cert文件夹，放入生成的server.key和server.crt文件。
3. 根目录新建自定义服务器文件server.js，内容如下：

const spdy = require('spdy')
const next = require('next')
const fs = require('fs')
const path = require('path')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const options = {
  key: fs.readFileSync(path.join(__dirname, './cert/server.key')),
  cert: fs.readFileSync(path.join(__dirname, './cert/server.crt'))
}

app.prepare().then(() => {
  spdy.createServer(options, (req, res) => {
    handle(req, res)
  }).listen(3000, err => {
    if (err) throw err
    console.log('> HTTP2 server running on https://localhost:3000')
  })
})

4. 修改package.json中的启动脚本：

{
  "scripts": {
    "start": "NODE_ENV=production node server.js"
  }
}

配置完成后重新执行npm run build && npm run start，访问https://localhost:3000即可使用HTTP2协议访问。

内容的提问来源于stack exchange，提问作者kodfire