如何在 Next.js 13（应用程序路由器）页面中将generateStaticParams 与searchParams 一起使用？

Question

让我们考虑一下在构建期间获取分页的前 3 页的示例：

\n

app/listing-params/[page]/page.jsx

\n

const getData = async (page) =>\n  new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(`You are on page ${page}`);\n    }, 1000);\n  });\n\nexport async function generateStaticParams() {\n  return [{ page: \'1\' }, { page: \'2\' }, { page: \'3\' }];\n}\n\nexport default async function Page({ params }) {\n  const data = await getData(params.page);\n\n  return <div>{data}</div>;\n}\n

\n

这将生成路线：

\n

Route (app)                                Size     First Load JS\n\xe2\x94\x9c \xe2\x97\x8f /listing-params/[page]                 145 B          79.5 kB\n\xe2\x94\x9c   \xe2\x94\x9c /listing-params/1\n\xe2\x94\x9c   \xe2\x94\x9c /listing-params/2\n\xe2\x94\x94   \xe2\x94\x94 /listing-params/3\n\n+ First Load JS shared by all              79.3 kB\n  \xe2\x94\x9c chunks/761-dd3b8128e8f09188.js         24.8 kB\n  \xe2\x94\x9c chunks/e7758090-779dc2d147f137fb.js    52.7 kB\n  \xe2\x94\x9c chunks/main-app-50f87aebb0899eed.js    216 B\n  \xe2\x94\x94 chunks/webpack-f1b00f9c08769eb2.js     1.64 kB\n\n\xce\xbb  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)\n\xe2\x97\x8b  (Static)  automatically rendered as static HTML (uses no initial props)\n\xe2\x97\x8f  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)\n

\n

上面例子中的一切都工作正常。它将加载 3 个路由到缓存，并且在前 3 个页面上的首次输入是即时的。

\n

---

\n

问题

\n

我正在尝试将上面的示例转换为能够searchParams在构建时缓存第一个路由。\n因此路由将类似于：

\n

listing-params/1->listing-search-params/?page=1

\n

listing-params/2->listing-search-params/?page=2

\n

app/listing-search-params/page.jsx

\n

Route (app)                                Size     First Load JS\n\xe2\x94\x9c \xe2\x97\x8f /listing-params/[page]                 145 B          79.5 kB\n\xe2\x94\x9c   \xe2\x94\x9c /listing-params/1\n\xe2\x94\x9c   \xe2\x94\x9c /listing-params/2\n\xe2\x94\x94   \xe2\x94\x94 /listing-params/3\n\n+ First Load JS shared by all              79.3 kB\n  \xe2\x94\x9c chunks/761-dd3b8128e8f09188.js         24.8 kB\n  \xe2\x94\x9c chunks/e7758090-779dc2d147f137fb.js    52.7 kB\n  \xe2\x94\x9c chunks/main-app-50f87aebb0899eed.js    216 B\n  \xe2\x94\x94 chunks/webpack-f1b00f9c08769eb2.js     1.64 kB\n\n\xce\xbb  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)\n\xe2\x97\x8b  (Static)  automatically rendered as static HTML (uses no initial props)\n\xe2\x97\x8f  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)\n

\n

next build在我看到警告期间

\n

\n

警告 整个页面 /listing-search-params 已取消客户端渲染。https://nextjs.org/docs/messages/deopted-into-client-rendering /listing-search-params

\n

\n

但我没有在我的应用程序中使用useSearchParams任何"use client"组件。

\n

构建输出如下所示：

\n

Route (app)                                Size     First Load JS\n\xe2\x94\x94 \xce\xbb /listing-search-params                 144 B          79.5 kB\n\n+ First Load JS shared by all              79.3 kB\n  \xe2\x94\x9c chunks/761-dd3b8128e8f09188.js         24.8 kB\n  \xe2\x94\x9c chunks/e7758090-779dc2d147f137fb.js    52.7 kB\n  \xe2\x94\x9c chunks/main-app-50f87aebb0899eed.js    216 B\n  \xe2\x94\x94 chunks/webpack-f1b00f9c08769eb2.js     1.64 kB\n\n\xce\xbb  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)\n\xe2\x97\x8b  (Static)  automatically rendered as static HTML (uses no initial props)\n\xe2\x97\x8f  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)\n

\n

在构建期间，前 3 个路由都不会加载到缓存，并且第一次进入页面/listing-search-params/?page=1需要 1 秒（/listing-params/1是第一次进入的瞬间）。

\n

使用时是否可以在 Next.js 应用程序路由器 (RSC) 的构建期间将数据加载到缓存searchParams？

\n