Next.js 13.1（App目录）：实现服务端请求依赖客户端下拉选择

问题背景 #

使用Next.js 13.1 App目录，需添加年份切换下拉框，应用内所有内容、侧边导航、顶部导航均依赖选中年份获取对应路径的数据。当前通过searchParam+中间件转请求头的方式实现，但每次切换都会触发页面完全重载，需更优的设计方案。

当前实现代码：

原下拉选择框代码 #

<StyledTextField select defaultValue={currentYear ?? years.find(year => year.is_active)?.id}>
    {years.map(year=> (
        <MenuItem value={year.id} key={year.id} className="yearSelectItem">
            <Link href={{pathname: pathname, query: {year: year.id}}}
                {year.name} {year.is_active && "(aktiv)"}
            </Link>
        </MenuItem>
    ))}
</StyledTextField>

原中间件代码 #

const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-year", request.nextUrl.searchParams.get("year") ?? "")
const response = NextResponse.next({
    request: {
        headers: requestHeaders
    }
})

return response;

服务端组件获取年份方式 #

headers().get("x-year")

问题根源 #

你把Link嵌套在MenuItem内部，用户点击选项时会触发Next.js服务端导航，导致全页重新渲染；同时select组件的交互逻辑错误，应该通过onChange事件处理值变更，而非用链接跳转。

正确实现方案 #

方案1：服务端渲染优先（无客户端状态，推荐新手使用） #

基于searchParam优化导航方式，避免全页重载，同时让所有服务端组件便捷获取年份参数。

1. 改造下拉选择框为客户端组件
   交互组件需标记为客户端组件（添加'use client'指令），通过useRouter更新searchParam实现软导航：

   'use client';
   
   import { useRouter, useSearchParams } from 'next/navigation';
   import { StyledTextField, MenuItem } from '@mui/material';
   
   export default function YearSelector({ years }) {
     const router = useRouter();
     const searchParams = useSearchParams();
     const currentYear = searchParams.get('year') ?? years.find(y => y.is_active)?.id;
   
     const handleYearChange = (event) => {
       const newYear = event.target.value;
       const newParams = new URLSearchParams(searchParams);
       newParams.set('year', newYear);
       // 软导航更新searchParam，不会触发全页重载
       router.push(`${window.location.pathname}?${newParams.toString()}`);
     };
   
     return (
       <StyledTextField
         select
         value={currentYear}
         onChange={handleYearChange}
       >
         {years.map(year => (
           <MenuItem value={year.id} key={year.id} className="yearSelectItem">
             {year.name} {year.is_active && "(aktiv)"}
           </MenuItem>
         ))}
       </StyledTextField>
     );
   }
   

2. 优化服务端组件获取年份的方式
   无需再用中间件转请求头，可通过两种方式获取年份：

   • Page组件直接解构searchParams：

     export default async function Page({ searchParams }) {
       const selectedYear = searchParams.year ?? '默认年份';
       const data = await fetchDataByYear(selectedYear);
       return <div>{/* 页面内容 */}</div>;
     }
     

   • 子服务端组件通过Page组件传递参数（推荐，减少重复解析）：

     // Page组件
     export default async function Page({ searchParams }) {
       const selectedYear = searchParams.year ?? '默认年份';
       return (
         <div>
           <TopNav year={selectedYear} />
           <SideNav year={selectedYear} />
           <MainContent year={selectedYear} />
         </div>
       );
     }
     
     // TopNav服务端组件
     export async function TopNav({ year }) {
       const navData = await fetchNavDataByYear(year);
       return <nav>{/* 导航内容 */}</nav>;
     }
     

方案2：结合客户端状态（适合局部更新场景） #

若需部分组件在年份切换时不重新请求数据，可在客户端组件维护年份状态，同时保留searchParam确保服务端渲染正确性：

1. 客户端组件用useState维护年份，切换时同步更新searchParam
2. 服务端组件仍通过searchParam或Page传递的参数获取年份
3. 此方案增加状态管理复杂度，新手优先选方案1

关键注意事项 #

• 所有处理交互的组件必须加'use client'指令，App目录下默认是服务端组件
• 用router.push更新searchParam会触发软导航，仅重新渲染需要更新的服务端组件
• 优先从Page组件向下传递年份参数，减少重复解析逻辑

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