Failed to fetch RSC payload for http://localhost:3000/rooms. Falling back to browser navigation. TypeError: NetworkError when attempting to fetch resource.

export async function DataComponent() {
  const data = await fetchData();
  return <div>now: {data}</div>;
}

async function fetchData() {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return new Date().toLocaleString("en-GB");
}

import { Suspense } from "react";
import { PeriodicReloader } from "./PeriodicReloader";
import { DataComponent } from "./(components)/DataComponent";

export default function Home() {
  return (
    <main>
      <h1>Some title</h1>
      <Suspense>
        <DataComponent />
      </Suspense>
      <PeriodicReloader />
    </main>
  );
}

"use client";

import { startTransition, useEffect, useState } from "react";
import { useRouter } from "next/navigation";

export function PeriodicReloader() {
  const [errorMessage, setErrorMessage] = useState("");
  const router = useRouter();

  useEffect(() => {
    const timer = setInterval(() => {
      try {
        startTransition(() => {
          router.refresh();
          setErrorMessage("");
          console.log("jeeee");
        });
      } catch (error) {
        console.error(error);
        setErrorMessage("Failed to connect to the server!");
      }
    }, 5000);

    return () => clearInterval(timer);
  }, [router]);

  return errorMessage ? <h1>{errorMessage}</h1> : null;
}

I understand that the page cannot be reloaded if the server is down.