Comments (8)
Oh, I meant when JavaScript is disabled on the client side or when it's a bot. Thanks!
from react-viewport-list.
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.
from react-viewport-list.
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.
from react-viewport-list.
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)
from react-viewport-list.
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.
from react-viewport-list.
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. ❤️
from react-viewport-list.
@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
).
from react-viewport-list.
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.
from react-viewport-list.
Related Issues (20)
- Thank you HOT 3
- New items added to bottom of list. After refresh, appeared first. HOT 6
- Incorrect page scrolling behavior when `initialIndex` or `scrollToIndex` is used HOT 4
- Why does it work when height varies? HOT 2
- List items rendered with undefined HOT 2
- Endless Scrolling Loop HOT 28
- scroll to bottom while having async rendering items HOT 2
- Scroll to bottom on initial render HOT 2
- flew wrap not work HOT 1
- Is infinite scroll pagination supported? HOT 1
- Scroll to position HOT 3
- remove spacer in list HOT 3
- Scroll X and Scroll Y and sticky rows and columns HOT 3
- Question regarding CPU usage when idle HOT 7
- Any way to show a dynamic number of columns? HOT 2
- Unexpected scroll jump with initialIndex set to last item HOT 8
- Having trouble getting axis="x" to work HOT 3
- justify-content: flex-end; hides the scroll bar. HOT 2
- Styling is breaking if used in material ui table HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-viewport-list.