6 | {children}
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/app/components/InfiniteScrollWrapper.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useRouter, useSearchParams } from "next/navigation";
4 | import { ReactElement, useEffect, useRef } from "react";
5 | import { ItemLoading } from "./Item";
6 |
7 | export function InfiniteScrollWrapper({
8 | children,
9 | }: {
10 | children: ReactElement;
11 | }) {
12 | const ref = useRef
18 | This is a demo exploring using React 18 Server components as a
19 | mechanism to load more and render more data in an infinite scrolling
20 | list. The project is made in Next.js 13 in the app dir.
21 |
23 | It works by using query params. By default, one "page" is
24 | loaded. As you scorll down, a client component containing an
25 | IntersectionOvserver is triggered, which adds 1 to the
26 | query param using router.replace. The reason it's{" "}
27 | .replace and not .push to not fill the
28 | history with query params, so that the back button still works as
29 | expected. Then router.refresh() is called to tell Next to
30 | keep the scroll position. (Still exploring that part)
31 |
33 | All in all, this setup causes some server components to render, 34 | refreshing the page, while still keeping the scroll position. 35 |
36 |37 | The reason why it's resonably fast is because it uses the{" "} 38 | 39 | Edge Runtime 40 | {" "} 41 | on Vercel to render, which has no cold boot time. 42 |
43 |