Next.js 14 App Router服务端如何获取精确查询字符串？

如果你需要在服务端拿到和客户端useSearchParams完全一致的精确查询字符串（包括参数顺序、重复键、原始编码格式），不要依赖searchParams普通对象，直接从请求的URL中提取是最可靠的方式：

1. 服务端组件（Server Components） #

在app/目录下的服务端组件（比如page.tsx）中，你可以直接通过request对象获取完整URL，再提取查询字符串部分：

async function Page({ request }: { request: Request }) {
  // 获取带?的完整查询字符串，比如"?a=1&b=2&a=3"
  const exactSearchString = new URL(request.url).search;
  
  // 如果需要不带?的纯参数部分，用search.slice(1)
  const searchParamsOnly = exactSearchString.slice(1);

  return <div>精确查询字符串：{exactSearchString}</div>;
}

export default Page;

2. API路由（Route Handlers） #

在app/api/下的路由处理函数中，同样通过request对象提取：

export async function GET(request: Request) {
  const exactSearchString = new URL(request.url).search;
  return new Response(`精确查询字符串：${exactSearchString}`);
}

注意事项 #

• 不要尝试通过searchParams普通对象还原精确字符串：因为searchParams对象会自动合并重复参数、丢失原始顺序，无法还原出和客户端完全一致的查询串格式。
• 客户端的useSearchParams()返回的是URLSearchParams实例，你可以通过searchParams.toString()得到精确字符串，和服务端用上述方法拿到的结果完全一致。

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