This is a demo exploring using React 18 Server components as a mechanism to load more and render more data in an infinite scrolling list. The project is made in Next.js 13 in the

app

dir.

It works by using query params. By default, one "page" is loaded. As you scorll down, a client component containing an IntersectionOvserver is triggered, which adds

to the query param using

router.replace

. The reason it's

.replace

and not

.push

to not fill the history with query params, so that the back button still works as expected. Then

router.refresh()

is called to tell Next to keep the scroll position. (Still exploring that part)

All in all, this setup causes some server components to render, refreshing the page, while still keeping the scroll position.

The reason why it's resonably fast is because it uses the Edge Runtime on Vercel to render, which has no cold boot time.

1
accusamus beatae ad facilis cum similiqu
2
reprehenderit est deserunt velit ipsam
3
officia porro iure quia iusto qui ipsa u
4
culpa odio esse rerum omnis laboriosam v
5
natus nisi omnis corporis facere molesti
6
accusamus ea aliquid et amet sequi nemo
7
officia delectus consequatur vero aut ve
8
aut porro officiis laborum odit ea lauda
9
qui eius qui autem sed
10
beatae et provident et ut vel

1

accusamus beatae ad facilis cum similiqu

2

reprehenderit est deserunt velit ipsam

3

officia porro iure quia iusto qui ipsa u

4

culpa odio esse rerum omnis laboriosam v

5

natus nisi omnis corporis facere molesti

6

accusamus ea aliquid et amet sequi nemo

7

officia delectus consequatur vero aut ve

8

aut porro officiis laborum odit ea lauda

9

qui eius qui autem sed

10

beatae et provident et ut vel