Next js 14
app router
supabase

I want to use ssr only for the first time, and then use csr for subsequent updates due to paging, etc.
How can I implement this?

import { createClient } from "@/utils/supabase/server";
import Card from "@/components/card";
export default async function Index({
  params,
  searchParams
}: {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}
) {

  const pageNum = searchParams.page;
  const response = await fetch("http://localhost:3000/api/fetchStorys",{headers:{'auth':process.env.API_ACCESS_TOKEN!,'pageNum':pageNum as string}});
  const data= await response.json();
  const stories = data.data;

  return (
    <div className="container max-w-[2300px] mx-auto px-0">
      <div className="min-w-[320px] bg-transparent shadow-none py-8 px-[7vw]">
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
        {stories.map((story: any) => (

          <div  key={story.ID}>
            
            <Card  story={story}/>

          </div>
          
        ))}
      </div>
      </div>
    </div>
    
  );
}