I'm using PocketBase for database to display realtime data in nextjs, im stuck with their Realtime features, in the API docs it says use SSE

Nextjs didnt has SSE right? In the docs they provide the code

// server component
const pb = new PocketBase('http://127.0.0.1:8090');

// (Optionally) authenticate
await pb.collection('users').authWithPassword('test@example.com', '123456');

pb.collection('uploads').subscribe('*', ({action, record}) {

   if(action === 'create'){
 // i want to push the items to the data/div, but this require use client
}
}, { /* other options like expand, custom headers, etc. */ });

Im stuck on how can i mix client component in those code

My only working method is using the hardcode one:

// this one is client component
 const [records, setRecords] = useState({ items: [] });
 
  const fetchData = async () => {
    try {
      const response = await axios.get("/api/list"); // this list shows all the collections in my db
      setRecords(response.data); 
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  useEffect(() => {
    fetchData();
   
    const intervalId = setInterval(fetchData, 5000);

    return () => clearInterval(intervalId);
  }, []);

By using this, the data is refreshed every 5 seconds and it updates the div data, but i know this isnt good right?

Last time i use server actions but not work too