Only respond with partial page
Unanswered
Greater Scaup posted this in #help-forum
Greater ScaupOP
I have a list of about 16k strings that I want to render in a list on a page.
Most of the items will be out of view, but I want them to be able to be scrolled to.
the 2MB page takes time to load.
How do I initially respond with about 500 list items to get the page loaded and intractable, and then immediately fetch for the rest to be loaded in the next seconds, using Server Components and no api route?
Most of the items will be out of view, but I want them to be able to be scrolled to.
the 2MB page takes time to load.
How do I initially respond with about 500 list items to get the page loaded and intractable, and then immediately fetch for the rest to be loaded in the next seconds, using Server Components and no api route?
1 Reply
Greater ScaupOP
Example:
const strings = ['abc', /* many strings */]
export default function Page() {
return <ul>
{strings
.slice(0, 500)
.map(word => <li>{word}</li>)
}
{lazyLoad(strings
.slice(500)
.map(word => <li>{word}</li>))
}
</ul>
}