NextJS 13/14生产环境：router.replace触发服务端组件重复执行问题

我有一个服务端组件负责处理数据并将其发送至客户端，对应路由为/test。页面初始加载时数据处理正常，但在客户端的useEffect中调用router.replace('/test')时，服务端组件代码会重新执行并向客户端发送新处理的数据。需注意该问题仅在生产构建环境中出现，next dev环境表现符合预期。请问这是预期行为吗？能否避免此次二次重渲染？

简化代码 #

服务端组件 test/page.tsx #

export default function ProductPage() {
  console.log('processing...');
  return (
    <ClientContent />
  );
}

客户端组件 ClientContent #

'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function ClientContent() {
  const router = useRouter();
  
  useEffect(() => {
    router.replace('/test');
  }, [])
  
  return (<></>);
}

我的预期是页面初始加载后会被缓存，调用同路由的router.replace不会触发任何操作。

• 这不是预期行为，是生产环境下Next.js路由缓存优化与同路由router.replace调用的特殊交互导致的——开发环境因为禁用了部分缓存策略，所以没出现这个问题。
• 避免服务端组件二次执行的核心思路是避免无意义的同路由跳转：
  在调用router.replace前先判断当前路由是否已经是目标路由：

  useEffect(() => {
    const currentPath = window.location.pathname;
    if (currentPath !== '/test') {
      router.replace('/test');
    }
  }, [router])
  

• 更根本的解决方式是直接移除这个同路由的replace调用——页面初始加载后已经处于/test路由，这个调用本身就是冗余的，完全没必要执行。

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