when the user scrolls to the bottom, I would like to fetch the second page
const stories = await fetchRssPosts("https://note.com/username/rss", 2);
I have loading.tsx like below

<Suspense fallback={<Loading />}>
    <PostFeed />
</Suspense>

if I make the stories useState, loading.tsx would not work. How could I load another page when the user reaches the bottom?

import { fetchRssPosts } from "@/utils/rss";
import { Card } from "./Card";

export const PostFeed = async () => {
    let stories = await fetchRssPosts(
        "https://note.com/minytheminer/m/m00f9e97acc80/rss",
        1
    );

    return (
        <div className="flex flex-wrap flex-row p-4">
            {stories.map((story, index) => (
                <Card story={story} key={index} />
            ))}
        </div>
    );
};

please let me know if I am misunderstanding something.