如何在getStaticProps中获取referer？若不可行，最优替代方案是什么？

核心结论 #

无法在getStaticProps中获取Referer。

原因 #

getStaticProps是在项目构建阶段（或ISR的批量刷新阶段）执行的，此时没有单个用户的请求上下文，不存在req对象，自然无法读取请求头里的referer字段。而getServerSideProps是每次用户请求时执行，能拿到实时请求上下文；document.referer是客户端浏览器提供的运行时数据，和服务端构建逻辑完全无关。

最优替代方案 #

1. 客户端处理（推荐） #

如果你的逻辑不需要依赖服务端敏感数据，直接在组件挂载后通过document.referer获取并处理，这是最常用的方案：

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    const referer = document.referer;
    if (referer === "https://example.com/") {
      // 执行你的业务逻辑，比如设置状态、展示特定内容等
      console.log('检测到来自example.com的访问');
    }
  }, []);

  return <div>页面内容</div>;
}

2. 服务端处理（适合敏感逻辑） #

如果业务逻辑必须在服务端完成（比如需要访问私有数据、隐藏业务规则），直接使用getServerSideProps即可，你已经掌握的方法完全适用：

export async function getServerSideProps(context) {
  const referer = context.req.headers.referer || '';
  let customData = {};

  if (referer === "https://example.com/") {
    customData = {
      // 这里处理服务端专属逻辑，比如获取特定数据
      accessGranted: true,
      content: '专属内容'
    };
  }

  return {
    props: { customData }
  };
}

补充：ISR场景说明 #

即使使用增量静态再生（ISR），getStaticProps依然无法获取单个用户的Referer——ISR的刷新是批量触发的，不是针对每个用户请求，所以依然没有请求上下文。

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