如何让NextJS每次请求均返回HTML而非JSON响应？

Next.js 默认会对页面数据和渲染结果进行缓存，导致首次请求后后续请求优先通过 _next/data 获取 JSON 数据而非完整 HTML。要实现类似 Express.js 每次请求返回 HTML 的效果，可以通过以下几种方式处理：

1. 用 getServerSideProps 配合缓存控制头禁用缓存 #

getServerSideProps 本身是每次请求都在服务器渲染，但 Next.js 会默认缓存响应数据。通过设置响应头强制禁止缓存，就能确保每次请求都重新生成并返回 HTML：

export async function getServerSideProps({ res }) {
  // 设置缓存控制头，禁止浏览器和CDN缓存响应
  res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');

  // 获取博客内容数据
  const blogContent = await fetchYourBlogData();

  return {
    props: { blogContent }
  };
}

2. 关闭客户端路由的预取与数据缓存 #

Next.js 的 Link 组件默认会预取页面数据，导致后续跳转直接使用客户端缓存的 JSON。可以通过以下方式避免：

• 在 Link 组件中关闭预取：

  <Link href="/posts/[slug]" as={`/posts/${post.slug}`} prefetch={false}>
    <a>{post.title}</a>
  </Link>
  

• 直接使用原生 <a> 标签替代 Link 组件，触发完整的页面跳转请求：

  <a href={`/posts/${post.slug}`}>{post.title}</a>
  

3. 使用自定义服务器（可选） #

如果需要更彻底的控制，可以搭建自定义 Express 服务器，直接接管路由渲染逻辑，确保每次请求都调用 app.render 生成 HTML：

const express = require('express');
const next = require('next');

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

app.prepare().then(() => {
  const server = express();

  // 自定义博客路由，每次请求都渲染页面
  server.get('/posts/:slug', (req, res) => {
    return app.render(req, res, '/posts/[slug]', { slug: req.params.slug });
  });

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

注意：使用自定义服务器会失去 Next.js 自动静态优化、Edge Runtime 等特性，需根据实际需求权衡。

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