[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