如何在服务端渲染（SSR）的Layout组件中使用searchParams？

下面按主流SSR框架的不同场景，给出具体实现方式：

Next.js App Router（App目录） #

App Router下的Layout默认是服务端组件，只需将Layout改为异步函数，即可直接接收searchParams参数：

// app/layout.js
async function RootLayout({ children, searchParams }) {
  // 处理分页参数，默认第一页
  const currentPage = searchParams?.page || '1';
  
  // 可在此处基于页码发起服务端数据请求，比如获取对应页的列表数据
  // const pageData = await fetchPageData(currentPage);

  return (
    <html lang="zh-CN">
      <body>
        <div className="pagination-bar">当前页码：{currentPage}</div>
        {children}
      </body>
    </html>
  );
}

export default RootLayout;

注意：searchParams是可选参数，使用时建议加可选链或默认值，避免参数不存在时报错。

Next.js Pages Router #

Pages Router的全局Layout（_app.js）本身是客户端组件，但可以通过getServerSideProps在服务端拿到searchParams，再传递给Layout：

// pages/_app.js
function MyApp({ Component, pageProps, searchParams }) {
  const currentPage = searchParams?.page || '1';

  return (
    <>
      <div className="pagination-bar">当前页码：{currentPage}</div>
      <Component {...pageProps} />
    </>
  );
}

// 需要在页面文件（如pages/index.js）中导出getServerSideProps，将参数传递给_app
export async function getServerSideProps(context) {
  return {
    props: {
      searchParams: context.query // query包含所有URL查询参数
    }
  };
}

export default MyApp;

Remix框架 #

Remix的Layout组件可以通过服务端执行的loader函数获取searchParams，再用useLoaderData拿到数据：

// app/routes/_layout.js
import { useLoaderData } from '@remix-run/react';

// loader在服务端执行，可直接获取请求URL的参数
export async function loader({ request }) {
  const url = new URL(request.url);
  const currentPage = url.searchParams.get('page') || '1';
  return { currentPage };
}

export default function Layout({ children }) {
  const { currentPage } = useLoaderData();
  
  return (
    <div>
      <div className="pagination-bar">当前页码：{currentPage}</div>
      {children}
    </div>
  );
}

通用注意事项 #

• 服务端环境中不要使用客户端专属API（如window），所有逻辑需兼容服务端执行。
• 基于searchParams的数据请求直接在服务端完成，既能保证SEO抓取到完整内容，也能避免客户端额外请求带来的性能损耗。

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