So I was hesitant to Next 13 just because in work, we have the exact definiton of a SPA. There are no routes, there is just one root component called <App/>  which renders everything with React.

But eventually, we decided to use next 12 to use it like an SPA via bypassing the SSR using mount states and typeof window checks etc. just because we'll have type safety and frontend & backend in the same place.

Today, after switching to Next 12, i wanted to give Next 13 a shot because I thought it should basically have no difference if i just used use client everywhere. But turns out it was just enough if I used use client in the <App> component since apparently everything imported under a client component also goes into client rendering.

That's really cool but now i'm having a really hard time understanding how Next 13 renders RSC and client components when a server component is rendered under a client component. How does it know it's a server component if there isn't a use server for components ( or is there? can we use server besides fetching functions? ). Here's my <App> for reference:

"use client";

function SafeHydrate({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return <></>;
  return (
    <div suppressHydrationWarning>
      {typeof window === "undefined" ? null : children}
    </div>
  );
}

const Home = () => {
  return (
    <SafeHydrate>
      <App />     
    </SafeHydrate>
  );
};

export default Home;