I need an opinion whether using infinite scroll or rendering as static is better solution in my case
Answered
Nebelung posted this in #help-forum
NebelungOP
Hello, Could anyone recommend me which direction might be better.
I have an app with articles added regularly (one article/week). There is around 200 articles. Now, I see two solutions, both could have pagination/infinite scroll I think:
(1) Fetch all content from CMS (sanity) on build and update with Webhooks (here I could render to DOM only first 20 and render more on scroll)
or
(2) Fetch only 20 for the static build and fetch them in infinite scroll by making API calls to CMS
I'd greatly appreciate any feedback and sharing some of your experience.
I have an app with articles added regularly (one article/week). There is around 200 articles. Now, I see two solutions, both could have pagination/infinite scroll I think:
(1) Fetch all content from CMS (sanity) on build and update with Webhooks (here I could render to DOM only first 20 and render more on scroll)
or
(2) Fetch only 20 for the static build and fetch them in infinite scroll by making API calls to CMS
I'd greatly appreciate any feedback and sharing some of your experience.
Answered by Nebelung
Thank you both. I think for the future scalability of the application it might be better to go with the second solution. re: responsiveness, im familiar with the virtualization, or at least I already tried it and will try to implement it) Thank you @joulev for your detailed explanation.
13 Replies
@Nebelung Hello, Could anyone recommend me which direction might be better.
I have an app with articles added regularly (one article/week). There is around 200 articles. Now, I see two solutions, both could have pagination/infinite scroll I think:
(1) Fetch all content from CMS (sanity) on build and update with Webhooks (here I could render to DOM only first 20 and render more on scroll)
*or*
(2) Fetch only 20 for the static build and fetch them in infinite scroll by making API calls to CMS
I'd greatly appreciate any feedback and sharing some of your experience.
does the list have a lot of data?
if it only lists the article title, (1) is more suitable, but if it lists all article content ([like this](https://www.channelnewsasia.com/asia/malaysia-vehicle-entry-permit-vep-singapore-october-1-anthony-loke-4367976)), then (2) is more suitable.
try the (1) way and see if the bundle size is still small enough for you.
if it only lists the article title, (1) is more suitable, but if it lists all article content ([like this](https://www.channelnewsasia.com/asia/malaysia-vehicle-entry-permit-vep-singapore-october-1-anthony-loke-4367976)), then (2) is more suitable.
try the (1) way and see if the bundle size is still small enough for you.
NebelungOP
Hey, thanks for the example.
I'm not displaying article content. just the representation: a small paragraph, title, information about the tier, cover image and cover video (these two could be the heaviest): more like this: https://template-nextjs-personal-website.sanity.build/
I'm not displaying article content. just the representation: a small paragraph, title, information about the tier, cover image and cover video (these two could be the heaviest): more like this: https://template-nextjs-personal-website.sanity.build/
the images/videos by themselves do not take up the bundle size so you can add as many as you like, just remember to optimise their sizes as much as possible and only load them lazily (which should already be done automatically by the browser)
in that case i think (1) is better, though of course still check the bundle size to see if it's still good to go
NebelungOP
i'll try seeing the bundle size, thank you.
i'm not ready to create 200 articles in CMS 
are there ways to mock such things for testing?
are there ways to mock such things for testing?Okay, that I can try to figure out on my own. thanks!
@Nebelung i'm not ready to create 200 articles in CMS <:lolsob:753870958489632819> are there ways to mock such things for testing?
const articles = new Array(200).fill(null).map(_ => generateTestArticle())NebelungOP
I have one more question: would it help (besides user experience) displaying only 20 of the articles and having load more button to display more or it wouldn't affect the performance?
@Nebelung I have one more question: would it help (besides user experience) displaying only 20 of the articles and having load more button to display more or it wouldn't affect the performance?
there are two types of performance you need to think about:
first is about loading speed, affected by bundle size. by loading too many articles, you will make giant
this loading speed is not affected at all by displaying 20 or 200 articles.
second is about responsiveness, affected by large number of DOM nodes. this happens when there is too much for the browser to render, making it drop its responsiveness (low fps, intermittent lagginess, for example). if your articles are all very interactive, then displaying 200 of them may be too much for a typical browser.
this responsiveness is affected by your decision to load 20 or 200 with a load more button.
(a concept closely related to this responsiveness is "virtualisation", where you have to render a large list without degrading performance, if you have time do check it out)
first is about loading speed, affected by bundle size. by loading too many articles, you will make giant
<script> and giant html, and loading them all is slow. that's why i talked about checking the bundle size. if you load all 200 articles in one go (even when you only render 20 of them at first), users will have to download all 200 articles and if that weighs 400 kB, your page will take long to load.this loading speed is not affected at all by displaying 20 or 200 articles.
second is about responsiveness, affected by large number of DOM nodes. this happens when there is too much for the browser to render, making it drop its responsiveness (low fps, intermittent lagginess, for example). if your articles are all very interactive, then displaying 200 of them may be too much for a typical browser.
this responsiveness is affected by your decision to load 20 or 200 with a load more button.
(a concept closely related to this responsiveness is "virtualisation", where you have to render a large list without degrading performance, if you have time do check it out)
Brown bear
Maximum article would be 200 or more? if there are a lot of article data, please use number 2.
So load 20 article at first time and load data using
So load 20 article at first time and load data using
load more button. it would be not affect the performance. it 's good experience for you when you manage the big data applicationsNebelungOP
Thank you both. I think for the future scalability of the application it might be better to go with the second solution. re: responsiveness, im familiar with the virtualization, or at least I already tried it and will try to implement it) Thank you @joulev for your detailed explanation.
Answer
yup, good luck and have fun