[英]Client side rendering AND server side rendering on the same data/page?
I have an infinite scrolling gallery of items that I want to display on a page.我有一个无限滚动的项目库,我想在页面上显示这些项目。 This page also has filtering options for the items.
此页面还具有项目的过滤选项。
I was thinking that I could use SSR to fetch the first 20 items for page load, and then use CSR (probably via react-query) to fill in items as the user scrolls or updates filters.我在想我可以使用 SSR 来获取前 20 个项目以进行页面加载,然后在用户滚动或更新过滤器时使用 CSR(可能通过 react-query)填充项目。
From the docs and what I know about next, it doesn't seem to be an issue to use SSR and CSR on the same page.根据文档和我接下来的了解,在同一页面上使用 SSR 和 CSR 似乎不是问题。 What I'm trying to understand is how to implement that when talking about fetching the same dataset.
我想了解的是在谈论获取相同数据集时如何实现这一点。
I was thinking it would work something like:我在想它会像这样工作:
However this feels like somewhat of a clunky implementation.然而,这感觉有点笨拙。 Does anyone have any good examples they can point to, or any reasons why I shouldn't do this?
有没有人可以指出任何好的例子,或者我不应该这样做的任何原因?
your implementation is ok but I recommend using ISR
for better performance:您的实现还可以,但我建议使用
ISR
以获得更好的性能:
1- using ISR
to fetch first 20 items 1- 使用
ISR
获取前 20 个项目
2- using CSR
to fetch new items on scroll 2- 使用
CSR
在滚动上获取新项目
3- filter items using CSR
3- 使用
CSR
过滤项目
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.