NextJS生产环境getStaticProps构建后页面刷新内容变化问题

我为Next.js应用搭建了Node.js服务器，执行build构建后通过自定义命令启动服务，但使用getStaticProps的页面刷新时内容仍会变化，明明构建阶段应该已经生成静态内容了。

服务器代码 #

const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer(async (req, res) => {
        try {
            const parsedUrl = parse(req.url, true)
            const { pathname, query } = parsedUrl
            await handle(req, res, parsedUrl)
        } catch (err) {
            console.error('Error occurred handling', req.url, err)
            res.statusCode = 500
            res.end('internal server error')
        }
    }).listen(port, (err) => {
        if (err) throw err
        console.log(`> Ready on http://${hostname}:${port}`)
    })
});

package.json 配置 #

"build": "next build",
"start:server": "SET NODE_ENV=production && node server.js"

页面代码（使用getStaticProps） #

export async function getStaticProps() {
  const userRequest =
    await fetch('https://catfact.ninja/fact');
  const userData = await userRequest.json();
  return {
    props: {
      data: userData
    }
  };
}

export default function Home({ data }) {
  return (
    <div>
        <h1>
          Welcome 
        </h1>
       random info {data.fact}
    </div>
  )
}

原因分析 #

问题出在自定义服务器代码中——你没有明确指定dev参数的值，导致Next.js无法正确识别当前是生产环境。

当dev参数未设置时，Next.js会尝试根据NODE_ENV判断环境，但你的启动命令是先设置NODE_ENV=production再执行node server.js，如果服务器代码里的dev变量没有被正确赋值为false，Next.js会误以为当前是开发环境，从而在每次请求时重新运行getStaticProps，而非直接使用构建阶段生成的静态HTML文件。

解决方法 #

方案1：直接指定生产环境 #

修改服务器代码，明确将dev参数设置为false：

// 明确指定dev为false，对应生产环境
const app = next({ dev: false, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer(async (req, res) => {
        try {
            const parsedUrl = parse(req.url, true)
            const { pathname, query } = parsedUrl
            await handle(req, res, parsedUrl)
        } catch (err) {
            console.error('Error occurred handling', req.url, err)
            res.statusCode = 500
            res.end('internal server error')
        }
    }).listen(port, (err) => {
        if (err) throw err
        console.log(`> Ready on http://${hostname}:${port}`)
    })
});

方案2：通过环境变量动态判断 #

让dev的值与NODE_ENV自动匹配，增加灵活性：

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev, hostname, port })
// 后续代码保持不变

修改后，生产环境下Next.js会直接使用next build阶段生成的静态HTML，不会在每次请求时重新执行getStaticProps，页面内容也就不会在刷新时变化了。

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