What changes for RSC

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 packages: /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

Hooks replacements for server components

isAdmin

isAdmin(): boolean

Function which returns true if execution runs inside the Admin interface, false otherwise.

It replaces the useAdminContext hook, not available for server components.

getPageValues

getPageValues(): types.PageValues | null

Function which returns the pageValues of the current page.

It replaces the usePageValues hook, not available for server components.

For client components

register

register(config: types.ReactBricksConfig): void

Function that initializes the React Bricks configuration so that it is available to render the page with RSC. This function should be invoked before using any component or function imported from react-bricks/rsc.

wrapClientComponent

wrapClientComponent<T>({
  ClientComponent: React.FC<T>,
  RegisterComponent: React.FC<any>,
  schema: types.IBlockType<T>,
}): types.Brick<T>

Function which wraps a client component (a component with 'use client') and, adding the schema, returns a React Bricks’ brick. RegisterComponent is a function from react-bricks/rsc/client.

Meta data

getMetadata

getMetadata(page: types.Page): IMetadata

Next.js 14+ with the App Router has its way of managing meta data. This function returns the page metadata so that they are compatible with Next.js Metadata.

Preview link

fetchPagePreview

fetchPagePreview({
  token: string
  config: types.ReactBricksConfig
  fetchOptions?: types.FetchOptions
}): Promise<types.Page>

Function which fetches the page data so that it can be viewed in a preview link.

It is an alternative solution to the <Preview> component used in the non-RSC library.

Other functions

getBlockValue

getBlockValue(propName: string): any | null

Function which returns the value of the propName for the current block in a server component.

getBricks

getBricks(): types.Bricks

Function to get all the configuration’s bricks in a server component.

Under react-bricks/rsc/client

RegisterComponent

RegisterComponent: React.FC<RegisterComponentProps>

type RegisterComponentProps = { page: types.Page; block: types.IContentBlock }

Function to be used together with wrapClientComponent to create bricks from client components.

ClickToEdit

ClickToEdit: React.FC<ClickToEditProps>

interface ClickToEditProps {
  pageId: string
  language?: string
  editorPath: string
  clickToEditSide?: types.ClickToEditSide
}

Client component that shows the icon to edit the page when a user is viewing the frontend website while logged in the admin interface.

Updated Components

When using React Server Components, the visual components (Text, RichText, Image, File Repeater, Link) must be imported from react-bricks/rsc and they have a slightly different APIs, as we need to pass them the value of the prop.

Text

Add the value prop. You get it from the component’s props. The type should be declared as ReactBricks.types.TextValue.

Before

import { Text } from 'react-bricks/frontend'

...
<Text
  propName="title"
  placeholder="Enter the title"
  renderBlock={({ children}) => (
    <p className="text-xl">
      {children}
    </p>
  )}
>

After

// highlight-next-line
import { Text } from 'react-bricks/rsc'

...
<Text
  propName="title"
  // highlight-next-line
  value={title}
  placeholder="Enter the title"
  renderBlock={({ children}) => (
    <p className="text-xl">
      {children}
    </p>
  )}
>

RichText

Add the value prop. You get it from the component’s props. The type should be declared as ReactBricks.types.TextValue.

Before

import { RichText } from 'react-bricks/frontend'

...
<RichText
  propName="title"
  placeholder="Enter the title"
  renderBlock={({ children}) => (
    <h1 className="text-xl">
      {children}
    </h1>
  )}
>

After

// highlight-next-line
import { RichText } from 'react-bricks/rsc'

...
<RichText
  propName="description"
  // highlight-next-line
  value={description}
  placeholder="Enter the description"
  renderBlock={({ children}) => (
    <p>
      {children}
    </p>
  )}
  allowedFeatures={[types.RichTextFeatures.Bold]},
>

Image

Add the source prop. You get it from the component’s props. The type should be declared as ReactBricks.types.IImageSource.

Before

import { Image } from 'react-bricks/frontend'

...
<Image propName="avatar" alt="Avatar" />

After

// highlight-next-line
import { Image } from 'react-bricks/rsc'

...
<Image
  propName="avatar"
  // highlight-next-line
  source={avatar}
  alt="Avatar"
/>

File

Add the source prop. You get it from the component’s props. The type should be declared as ReactBricks.types.IFileSource.

Before

import { File } from 'react-bricks/frontend'

...
<File propName="document" />

After

// highlight-next-line
import { File } from 'react-bricks/rsc'

...
<File
  propName="document"
  // highlight-next-line
  source={document}
/>

Repeater

Add the items prop. You get it from the component’s props.
The type should be declared as ReactBricks.types.RepeaterItems<T> where T (not mandatory) is the type of the single repeated item (you can import it from the repeated brick).
If you specify T, you have the result of getDefaultProps fully typed also for repeated items.

Before

import { Repeater } from 'react-bricks/frontend'

...
<Repeater propName="features" />

After

// highlight-next-line
import { Repeater } from 'react-bricks/rsc'

...
<Repeater
  propName="features"
  // highlight-next-line
  items={features}
/>