I have a nextjs website I am working on that is similar to reddit that renders posts for different communities

when i navigate from one layout to another link on the same layout with router.push(link) (like http://localhost:3000/l/art --> http://localhost:3000/l/music)
1. it (almost) immediately switches to the suspense which shows that it is navigating
2. then after rendering it briefly shows my old posts and then renders again with my new posts

Note in this example it switches to l/art-sta and then renders the suspense, and then it renders the old posts from party-game-sta ("Fastest Counter to 10" and "Stack Cup Knockout"). After, it waits 2 seconds (probably around the latency of my fetch posts call for art-sta) and rerenders "Best Napkin Origami" and "Lista Logo Design" which is what I want it to do from the start.

Does anyone have any context on why it is rendering my old posts briefly?

Here is a brief code snippet. For context slug is the name like "art-sta" or "party-game-sta"

const SublistaPostFeed = async ({ slug, sessionCookie, user }: { slug: string, sessionCookie: string, user: any }) => {
const posts = await getPosts({
limit: "5",
page: "1",
subredditNames: [slug]
}, sessionCookie ?? "");

return (
<div key={posts-container-${slug}}>
<PostFeed
initialPosts={posts as ExtendedPost[]}
subredditNames={[slug]}
sessionId={user?.id ?? ""}
user={user}
/>
</div>
);
};


const page = async ({ params }: PageProps) => {
const { slug } = await params;
return (
#Unknown Channel
...
// Rest of component
<Suspense key={slug} fallback={<PostFeedLoading />}>
<SublistaPostFeed slug={slug} sessionCookie={sessionCookie ?? ""} user={user} />
</Suspense>
...
</>
);
};

export default page;