React Server Components

Puck provides out-of-the-box support for React Server Components (opens in a new tab) (RSC).

Because authoring with Puck dynamically renders components client-side, RSC is limited to the <Render> component.

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>
      ),
    },
  },
};