React Server Components

Puck provides opt-in support for React Server Components (opens in a new tab) (RSC) via the included rsc bundle.

The rsc bundle includes an RSC-friendly version of <Render>:

import { Render } from "@measured/puck/rsc";
 
export function Page() {
  return <Render config={config} data={data} />;
}

DropZones and RSC

If you're using DropZones with React server components, you must use the puck.renderDropZone prop provided to your render function instead of the <DropZone> component.

const config = {
  components: {
    Columns: {
      render: ({ puck: { renderDropZone } }) => (
        <div>{renderDropZone({ zone: "my-content" })}</div>
      ),
    },
  },
};