客户端接收服务器302响应后未触发重定向问题求助

问题分析 #

在SSR流程中直接返回302重定向但客户端未跳转，核心原因是SSR渲染的页面内容已优先发送至浏览器，框架的响应处理逻辑与原生res操作冲突，导致浏览器未识别到重定向指令。Next.js Middleware因功能限制无法满足需求时，需从SSR页面的渲染流程本身调整处理逻辑。

具体处理方案 #

1. App Router（Next.js 13+）场景 #

在页面组件的异步逻辑中完成权限校验，使用框架内置的redirect函数触发重定向：

import { redirect } from 'next/navigation';

async function ProtectedPage() {
  // 执行订阅权限校验逻辑
  const hasSubscription = await checkUserSubscription();

  if (!hasSubscription) {
    redirect('/profile');
  }

  return <div>订阅用户专属内容</div>;
}

export default ProtectedPage;

2. Pages Router场景 #

在页面的getServerSideProps中处理权限校验与重定向，利用框架提供的重定向配置：

export async function getServerSideProps(context) {
  const hasSubscription = await checkUserSubscription(context.req);

  if (!hasSubscription) {
    return {
      redirect: {
        destination: '/profile',
        permanent: false, // 对应302临时重定向
      },
    };
  }

  return { props: {} };
}

function ProtectedPage() {
  return <div>订阅用户专属内容</div>;
}

export default ProtectedPage;

3. 关键注意事项 #

Next.js的SSR流程由框架统一管理响应发送，直接调用res.writeHead或res.redirect会破坏框架的响应处理逻辑，导致重定向指令无法被客户端正确识别。必须使用框架提供的重定向API，才能确保跳转逻辑生效。

复用建议 #

若权限校验逻辑复杂，可封装为通用异步函数，在所有需要保护的页面的SSR逻辑中复用，确保未订阅用户的请求都能被统一拦截重定向。

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