Next.js异步服务端函数引发客户端组件二次重渲染问题咨询

开发首个Next.js项目时，遇到如下渲染行为：项目混合使用服务端组件与客户端组件，将部分状态存储在URL查询参数中。某服务端组件依赖查询参数异步获取数据，点击链接修改URL查询参数后，即便客户端组件与该服务端组件无关联，在Promise resolved后客户端组件仍会二次重渲染。以下是代码示例、日志输出及问题分析：

示例代码 #

page.tsx（访问地址：http://localhost:3000/another-test-page） #

export default function Home({ params, searchParams }: HomeProps) {
    console.log("Render HomePage");

    return (
        <main>            
            <Suspense fallback={<div>Loading...</div>}>
                <TestServerComponent text={searchParams["text"]} />
            </Suspense>
            <TestClientComponent text={searchParams["text"]} />
            <TestTwoClientComponent />

            <div>
                <Link href="/another-test-page?text=test">
                    Add
                </Link>
                <Link href="/another-test-page">
                    Remove
                </Link>
            </div>
        </main>
    );
}

TestServerComponent.tsx #

export default async function TestServerComponent({text}: TestServerComponentProps){
    console.log("Render TestServerComponent");
     
    await new Promise(resolve => {
        setTimeout(() => resolve(true), 3000);
    });

    return (
        <div>
            I am a <strong>server</strong> component<br />
            Text: {text}
        </div>
    );
}

客户端组件示例（TestClientComponent/TestTwoClientComponent） #

export default function TestClientComponent({text}: TestClientComponentProps){
    console.log("Render TestClientComponent");    

    return (
        <div>
            I am a <strong>client</strong> component<br />    
            Text: {text}        
        </div>
    );
}

TestTwoClientComponent为无props、无额外逻辑的纯展示组件，结构与上述示例一致

日志输出 #

服务端日志 #

\On page load
Render HomePage
Render TestServerComponent
Render TestClientComponent
Render TestTwoClientComponent
 
\ Immediately after click on the "Add"-button which adds some query params
Render HomePage
Render TestServerComponent

浏览器日志 #

\On page load
Render TestClientComponent
Render TestTwoClientComponent 

\ Immediately after click on the "Add"-button which adds some query params
Render TestClientComponent
Render TestTwoClientComponent 

\ After 3 seconds -> resolve of promise
Render TestClientComponent
Render TestTwoClientComponent 

问题解答 #

这是Next.js App Router的预期行为，核心原因如下：

1. 导航触发页面重渲染：点击链接修改查询参数时，Next.js会触发页面服务端组件的重新渲染，此时服务端会重新执行Home组件逻辑并启动异步请求；同时客户端会立即基于新的searchParams渲染客户端组件（对应日志中点击后的第一次客户端渲染）。
2. 异步请求完成后的树同步：当服务端组件的Promise resolve后，Next.js会完成服务端渲染片段的更新并将结果发送到客户端。此时客户端会同步更新整个页面的React树，所有客户端子组件会随之重新渲染——即使它们没有直接依赖异步服务端组件的返回结果。

优化建议 #

如果想避免无意义的客户端组件重渲染，可以：

• 使用React.memo包裹客户端组件，仅当组件props发生变化时才触发重渲染。比如给TestTwoClientComponent添加memo：

  import { memo } from 'react';
  
  export default memo(function TestTwoClientComponent(){
      console.log("Render TestTwoClientComponent");    
      return <div>I am another client component</div>;
  });
  

• 进一步隔离服务端异步逻辑与客户端组件，比如将服务端组件的异步部分封装在更细粒度的Suspense边界内，减少页面整体更新的影响范围。

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