如何在Nginx代理的自托管NextJS应用中启用Streaming？

要在Nginx代理的自托管Next.js应用中启用Streaming，让页面加载时显示Suspense的fallback状态，需要从Next.js项目配置和Nginx代理配置两方面调整，步骤如下：

1. 确保Next.js项目支持Streaming #

• 采用Next.js 13+的App Router（Streaming为App Router原生特性，Pages Router需自定义实现，推荐优先使用App Router）。
• 在next.config.js中确认App Router已启用（默认已开启，若手动关闭需重新打开）：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      appDir: true,
    },
  };
  
  module.exports = nextConfig;
  

• 在组件中正确使用Suspense包裹异步加载的内容，示例：

  import { Suspense } from 'react';
  import LoadingSpinner from './LoadingSpinner';
  
  export default function HomePage() {
    return (
      <main>
        <h1>欢迎页</h1>
        {/* Suspense包裹异步组件，加载时显示fallback */}
        <Suspense fallback={<LoadingSpinner />}>
          <AsyncDataComponent />
        </Suspense>
      </main>
    );
  }
  
  // 异步组件：模拟数据请求
  async function AsyncDataComponent() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    return <section><p>加载完成的异步内容</p></section>;
  }
  

2. 调整Nginx代理配置（核心） #

Nginx默认会缓冲响应，阻止分块传输，必须关闭缓冲并启用分块编码。修改Nginx配置文件（通常位于/etc/nginx/nginx.conf或站点配置文件/etc/nginx/sites-available/your-site），在代理Next.js的location块中添加以下配置：

location / {
  # 指向你的Next.js服务地址（本地端口或内部地址）
  proxy_pass http://localhost:3000;
  
  # 启用HTTP/1.1，支持分块传输
  proxy_http_version 1.1;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  
  # 关键：关闭缓冲，立即转发分块响应
  proxy_buffering off;
  proxy_cache off;
  # 强制启用分块传输编码
  chunked_transfer_encoding on;
  # 禁用压缩，避免Nginx修改分块响应结构
  proxy_set_header Accept-Encoding '';
}

3. 验证生效 #

• 重启Nginx使配置生效：sudo systemctl restart nginx
• 构建并启动Next.js生产服务：next build && next start
• 访问页面，观察是否在异步内容加载过程中显示Suspense的fallback组件，而非等待整个页面加载完成。

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