Next.js静态生成页面如何兼顾性能与匿名用户IP统计？

不用被迫切换到getServerSideProps，可以通过以下两种方案同时保留getStaticProps的静态生成性能，又完成浏览量统计需求：

方案一：客户端异步上报统计数据 #

页面依然用getStaticProps生成静态内容，在页面加载完成后，通过客户端请求专门的统计接口完成数据上报：

• 在页面组件中使用useEffect，组件挂载后发送POST请求到你的统计API（比如/api/track-view）
• 已登录用户可以在请求体中携带用户ID；未登录用户的IP由统计API的服务端获取（从请求头x-forwarded-for或remoteAddress中提取，注意反向代理场景的处理）
• 统计API处理浏览量记录逻辑，无需影响页面的静态渲染流程

示例代码片段：

import { useEffect } from 'react';

export default function ProductPage({ product }) {
  useEffect(() => {
    // 上报浏览量
    fetch('/api/track-view', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId: product.id,
        userId: typeof window !== 'undefined' ? window.user?.id : null // 假设已登录用户信息存在window.user中
      })
    });
  }, [product.id]);

  return (
    // 页面内容
  );
}

export async function getStaticProps() {
  // 获取产品数据，生成静态页面
  const product = await fetchProductData();
  return {
    props: { product },
    revalidate: 60 // 按需设置重新验证时间
  };
}

注意：该方案依赖客户端JavaScript，若用户禁用JS则无法统计，适合对统计完整性要求不是极高的场景。

方案二：边缘函数（Edge Functions）前置统计逻辑 #

利用Next.js的Edge Runtime（边缘计算），在静态页面返回前触发统计逻辑，既不破坏静态缓存，又能在服务端层面获取用户IP：

• 创建一个Edge中间件（Middleware）或使用Edge Runtime的API Route，拦截产品页面的请求
• 在边缘函数中提取用户IP（从request.headers.get('x-forwarded-for')获取），同时通过Cookie或请求头获取已登录用户ID
• 异步调用统计服务记录浏览量（注意使用非阻塞调用，避免影响页面响应速度）
• 继续返回静态生成的页面内容

示例中间件代码（middleware.js）：

import { NextResponse } from 'next/server';

export async function middleware(request) {
  // 仅拦截产品页面请求
  if (request.nextUrl.pathname.startsWith('/products/')) {
    // 获取用户IP
    const ip = request.headers.get('x-forwarded-for') || request.ip;
    // 获取已登录用户ID（假设存在auth-token Cookie）
    const authToken = request.cookies.get('auth-token')?.value;
    const userId = authToken ? await verifyTokenAndGetUserId(authToken) : null;

    // 异步上报统计，不阻塞页面响应
    fetch('https://your-statistic-service.com/track', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId: request.nextUrl.pathname.split('/')[2],
        userId,
        ip
      })
    }).catch(err => console.error('统计上报失败:', err));
  }

  return NextResponse.next();
}

该方案无需依赖客户端JS，统计更可靠，且边缘函数运行在CDN节点，性能接近静态页面，比getServerSideProps高效得多。

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