I have wrapped my layout.tsx in something like below:

<ContentProvider data={data}>
  {children}
</ContentProvider>

And before this I do a simple fetch such as:

 const res = await fetch(`/api/content`, {
  method: "GET",
  cache: "no-store",
  headers: {
    "Content-Type": "application/json"
  }
});

However, when I refresh the page, the state is updated after the page has loaded. Even though I am running the fetch server-sided I believe?

I am currently using Next.js's App Dir with a simple Context/Provider, and in the same layout.tsx I am executing a fetch request. Even though the data is available, the context/provider is not ready until the page has loaded.

Below is my Provider:

"use client"

export default function ContentProvider ({ data }) {
  const [state, dispatch] = useReducer(...);
  
   useEffect(() => {
        console.log("State has updated:", state);
    }, [state])
}