Client component and Server component

How are Server Components rendered?

Next.js will use React's APIs to render a static HTML preview on the server for both Client and Server Components.

1. React renders Server Components into a special data format called RSC Payload.
2. Next.js uses the RSC Payload and Client Component JavaScript instructions to render HTML on the server.

Then, on the client:

1. The HTML is used to immediately show a fast non-interactive preview of the route.
2. RSC Payload is used to reconcile the Client component and Server component trees, and update DOM.
3. JS instructions are used to hydrate Client components and make the application interacitve.

Subsequent navigation

On subsequent navigations, Client Components are rendered entirely on the client, without the server-rendered HTML.
初めのloadの時だけ、HTMLを用意するためにserverでも実行される。

use clientでboundaryを貼る。

"use client"

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  console.log("layout")
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

例えば上のコードだったらSide Navは自動的にクライアントコンポーネントになるから描かなくていい。ただchildrenで渡される中身は、サーバーコンポーネントにもできる。