search

oleggrishechkin / react-viewport-list

📜 Virtualization for lists with dynamic item size
https://codesandbox.io/s/react-viewport-list-xw2rt
MIT License
226 stars 20 forks source link

Is SSR supported? #71

Closed dmitrizzle closed 11 months ago

dmitrizzle commented 11 months ago

Hi, just want to double-check that this library will not impede rendering components when JavaScript is disabled (i.e., on SSR apps to ensure that SEO is not impacted).

Thanks!

oleggrishechkin commented 11 months ago

Hi, just want to double-check that this library will not impede rendering components when JavaScript is disabled (i.e., on SSR apps to ensure that SEO is not impacted).

Thanks!

SSR is supported. I recommend to use itemSize and initialPrerender to render as much items as you want for SSR.

I'm not understand about "JS disabled"; JS required for runtime and SSR (nodejs basically) since this is a React library.

dmitrizzle commented 11 months ago

Oh, I meant when JavaScript is disabled on the client side or when it's a bot. Thanks!

dmitrizzle commented 11 months ago

Sorry, just to confirm, if I set initialPrerender to give me all the items in the list, will it cut down the items in the dom to just the ones in the window after React mounts and scripts execute, or will it use that number there onwards?

Apologies if it's a stupid question.

oleggrishechkin commented 11 months ago

Please, try it. I'm not sure that items will be virtualized on mount in case with full prerender. I'm trying to remove items outside of viewport only when next "virtualized" item should be shown in viewport (any time I render new item in DOM I remove items outside viewport too if needed) - no need to remove already rendered items any time when they leave the viewport.

I made this behaviour because I render new items by some estimation and after render some items can be out of viewport. If I will remove this items right after render it will decrease performance. It's not the same as infinite loading lists because I remove items outside viewport but in right moment (combined with adding new items to the DOM)

oleggrishechkin commented 11 months ago

Anyway you have not any benefits from virtualisation if you render full list at server - SSR will be much longer and React should hydrate a really big list at first render.

Better to prerender a approximate number of items at one screen (10-100)

If you want to show all products/articles in search I can suggest to use open graph ant other seo tags and markup.

dmitrizzle commented 11 months ago

Hey @oleggrishechkin ,

Thanks so much for your detailed responses and, of course, for making your solution available with a nice API. I really appreciate it! Your package is the only viable option for me as every additional KB loaded is a user lost; the only other option linked from React docs does way too much and is not worth the weight.

I can confirm that initialPrerender works with SSR to ensure that the first 20 items in my list are available in the initial server response and that the DOM is cleaned up only once React is initialized and throughout the user journey as they may be appending the list with more groups of 20 as they scroll down. This is exactly what I needed. 👍

A quick note: I found that adding ref actually breaks the implementation, not sure why (my best guess is the position: sticky menu items). Your package works well without the ref prop, I would suggest marking it as highly recommended but not required and would appreciate the support for defaulting to document.element as it does in the future.

I'm experiencing some issues with more complex lists that have a number of interactive components and lots of updates within each element (i.e., https://analog.cafe/comments) and animated properties (i.e., https://www.analog.cafe/app/film-log) but that's on me to further research.

I hope I can contribute to your project in the future once I get some free time. Thanks again. ❤️

oleggrishechkin commented 11 months ago

@dmitrizzle Did you mean viewportRef causes an issue? This ref should be nearest scrollbable container of items. If you are not providing viewportRef nearest scrollable container will be found automatically by traversal by parents with checking overflow properties (I don't like it since it based on window.getComputedStyle).

dmitrizzle commented 11 months ago

Yes, in my case, providing viewportRef causes a failure to clean up DOM elements. I can see the <div /> components above and below my list items meant to create spacers, but the list item number in DOM is not affected. I follow the docs by providing the ref to the parent element (<ul />) and I verified that ref is passed to the component as needed. Removing the ref fixes the issue.