使用 Next 13 searchParams 并通过 SSG 路由参数

Question

我正在使用

Next.js

应用程序目录创建博客。我的路线看起来像这样：

/blogs/category/[name]

这将显示该类别中的所有博客，并且是一个

SSG

页面，使用

generateStaticParams()

。这是代码：

export default async function Blogs({ params: { name } } : {
    params: { name: string }
}) {

    const blogs = await fetchBlogs({ category: decodeURIComponent(name) })

    const blogCount = await fetchBlogCount({ category: name })
    return <>Rest of the component......</>
}


export async function generateStaticParams() {
    const categories = await fetchCategories()

    return categories.map(category => ({
        name: category
    }))
}

这作为 SSG 页面运行良好，并且页面是在构建时构建的。但现在我希望能够在类别中搜索博客，因此我需要使用

searchParam

。我的问题是如何在能够使用 SearchParams 的同时将此页面保留为 SSG？

我想要的是仅当存在

searchParam

时此页面才在服务器上运行，否则显示预渲染页面。

我已经尝试过这个，但我得到

Error: Dynamic server usage: searchParams.search

我知道我可以通过添加来解决这个问题：

export const dynamic = 'force-dynamic'

，但我希望此页面保留为 SSG 页面。

export default async function Blogs({ params: { name }, searchParams: { search } }: {
    params: { name: string },
    searchParams: {
        search?: string
    }
}) {

    const blogs = await fetchBlogs({ category: decodeURIComponent(name), search })

    const blogCount = await fetchBlogCount({ category: name })

    return <>Rest of the component......</>
}

Answer 1

我知道已经晚了，但这也许对其他人有帮助。

您不能在页面级别使用

searchParams

。这选择退出完整路由缓存。但是您可以将搜索组件设为 React 客户端组件 (RCC)，并使用

useSearchParams

来访问您的

URLSearchParams

。您的搜索 RCC 应动态获取搜索结果。可能需要 Next.js 服务器操作的帮助。

免责声明：我没有在代码中测试这个想法，但希望它能起作用。