javascript - 仅使用 Next.js 预渲染首页

Question

我正在尝试将预渲染与getStaticProps()客户端渲染与常规userSwr()数据获取结合起来，但遇到了麻烦。

上下文：
我有一个可以跨越多个页面的结果列表，并且可以按各种属性（如卧室数量、租金等）进行过滤。分页和过滤的 url 可能看起来像/listings?page=2&bedrooms=3

我想使用 预渲染未过滤结果的第一页getStaticProps()，因此初始页面加载速度很快。从那里，我希望用户能够使用useSwr()hook从客户端进行数据调用，以获取其他页面或过滤结果。

问题：
结合这些数据获取模型的最佳方式是什么？我能找到的一切都建议预渲染结果的每一页，但我不想预渲染页面和过滤器的每一个排列。

目前的想法：
我目前的想法是

• 获取第一页数据getStaticProps并将其作为道具传递
• 使用挂钩从客户端获取其他页面和过滤结果
• 使用类似这个答案的东西来防止钩子在初始渲染上运行。

有没有更好的方法来只预渲染第一页，然后再进行客户端渲染？

标签： javascriptreactjsreact-hooksnext.jsswr