Skip to main content

React Server Components

Starting from v4.2 React Bricks supports React Server Components (RSC) with the react-bricks/rsc package.
If you would like to know more about RSC, we suggest to read the Where do React Server Components fit in the history of web development article by Matteo Frana and also Making Sense of React Server Components by Josh Comeau.

As Next.js is the first framework leveraging React Server Components, RSC are now available in the Next.js starters with the App Router. If you scaffold a new project from the CLI using the "Next.js with App Router" starter, you will have a complete project using React Bricks in the React Server Components flavour.

Server components are a completely new paradigm and this imposed some changes to the React Bricks APIs in the react-bricks/rsc package.

In this section of the documentation, you will find everything that changes when using Server Components with an RSC-enabled starter and the react-bricks/rsc package.

New pacakges: /rsc and /rsc/client

Server components

In Server Components, the following items should be imported from react-bricks/rsc:

File, Image, JsonLd, Link, PageViewer, Plain, Repeater, RichText, RichTextExt, Text, blockPluginConstructor, blockWithModalPluginConstructor, cleanPage, fetchPage, fetchPages, fetchTags, getPagePlainText, markPluginConstructor, plugins, types

While the following imports are not available for Server Components:

Preview, Meta, getSchemaOrgData, renderJsonLd, renderMeta, useAdminContext, usePage, usePagePublic, usePageValues, usePages, usePagesPublic, useReactBricksContext, useTagsPublic, useVisualEdit,

Client components

In Client Components (with 'use client'), the following items should be imported from react-bricks/rsc/client:

ReactBricks, useAdminContext, usePageValues, useReactBricksContext, useVisualEdit, types