Skip to content

[Next.js + Magnolia Headless] Large Page Size Issue

Hi,

While integrating @magnolia/react-editor with a Next.js project using React Server Components (RSC), I noticed a significant increase in the size of the rendered HTML. Upon further inspection, I found that the entire Magnolia page JSON is being serialised and inlined in the page.

Investigation

After reviewing the source code, I traced the behaviour to the following file:

react-editor/src/server/components/EditablePage/EditablePage.tsx

In this file, the EditablePage component mounts the EditablePageClient, which is marked as a client component, and passes the entire Magnolia page JSON as a prop. As a result, the full JSON is serialised and included in the HTML output.

Upon inspecting the flow further, it appears that the JSON is only used to extract a string, which is then passed to the EditableComment component.

Would it be possible to handle this extraction on the server side—inside the EditablePage component—and pass only the resulting string to the EditablePageClient? This change would avoid serialising the entire JSON to the client, significantly reducing page size.

Function using page JSON only to extract a string inside the client component: https://gitlab.com/magnolia-ce/frontend-sdk/react-editor/-/blob/main/src/client/components/EditablePageClient/EditablePageClient.tsx?ref_type=heads#L36-45