Invalid hook call when using `Content` during SSR

Technical Questions
1

Builder content link
Builder.io link

What are you trying to accomplish
I integrated builder content into our existing app and now wanted to implement SSR. I’m not using a specific framework and instead just put the content required for the Content component into a global var that is then accessed during render.

Screenshots or video link

Whenever trying to render Content on the server I get the following error. When commenting out the Content component I don’t get the error.

[firebase:serve] >  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
[firebase:serve] >  1. You might have mismatching versions of React and the renderer (such as React DOM)
[firebase:serve] >  2. You might be breaking the Rules of Hooks
[firebase:serve] >  3. You might have more than one copy of React in the same app
[firebase:serve] >  See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
[firebase:serve] ⚠  functions: TypeError: Cannot read properties of null (reading 'useState')
[firebase:serve]     at Object.useState (/Users/martinklepsch/code/github.com/xxx/node_modules/react/cjs/react.development.js:1622:21)
[firebase:serve]     at ContentVariants (/Users/martinklepsch/code/github.com/xxx/node_modules/@builder.io/sdk-react/lib/node/blocks-exports.cjs:228:2513)

Code stack you are integrating Builder with
Plain React + React SDK (v2)

Reproducible code example
Unfortunately I don’t have an isolated repro. Everything works fine when client side rendering and I also tried to exclude any issues with my content. It appears like it doesn’t matter what options are passed to the Content component, the error will occur either way.

2

Hello @martinklepsch,

Welcome to the builder.io forum post.

Regarding the issue you’re encountering, I suspect that SSR (Server-Side Rendering) might not be supported by Builder SDK when using plain React. To better understand and address the issue, could you please share your Builder integration code for SSR implementation?

Your code will help us identify any potential issues and provide you with the necessary assistance to resolve them.

Thanks,

3

Hey @manish-sharma,

I’m mostly just following the guide and am rendering the Content component like below:

<Content model="blog-posts" apiKey="xxx" content={some_data} />

The very same code also works fine when only rendering on the client but on the server it fails with the error mentioned above. Which is curious right?

I saw that SSR is only supported for frameworks like Next.js but I feel like this should work with plain React as well?

Thanks

4

Hello @martinklepsch,

You’re correct. At the moment, SSR (Server-Side Rendering) isn’t supported for plain React. For SSR and SSG (Static Site Generation) capabilities with Builder, you’ll need to utilize a framework that supports these features.

5

Hello Manish,

Can you explain why this is? I get that the docs only provide instructions for frameworks but fundamentally my code does the same steps, it loads the data and then renders <Content>.

Shouldn’t it be the same?

We’re evaluating builder for our CMS needs and SSR is a critical component of that — but we’re not using a framework and instead just use plain React. Is there any chance to get support in this direction?

6

Hello @martinklepsch,

The Builder React SDK’s <Content> component is designed to evaluate on the client-side, making it incompatible with SSR (Server-Side Rendering) when using plain React.

Currently, SSR capabilities with Builder.io are typically facilitated through integration with frameworks like Next.js or Gatsby, which inherently support SSR and SSG (Static Site Generation).

While SSR isn’t directly supported on plain React, you can still use Builder.io for client-side rendering within your React applications. However, if SSR is a critical requirement, you might need to consider integrating Builder.io with a framework like Next.js to leverage SSR capabilities effectively.

If you have any further questions or need clarification on the integration process, feel free to ask!

7

Hello @martinklepsch,

Alternatively, use can use a solution like https://prerender.io/ or custom write a DOM rendering solution for SSR support.

8

So which component is designed to evaluate on the server-side? Is support for this planned? It seems like a pretty arbitrary limitation given that these frameworks mostly help with data loading and otherwise just render React components.

Is there a possibility to talk to someone who is working on the React SDK?

9

I also noted that the instructions on SSR and SSG - Builder.io use the v1 SDK. Is there comparable instructions for the v2 SDK?

10

Hello @martinklepsch,

I wanted to inform you that the alternate options I’ve offered are based on discussions with our senior React SDK engineer.

11

Hello @martinklepsch,

You can find the comparable instructions at the below link

12

The Builder React SDK’s <Content> component is designed to evaluate on the client-side, making it incompatible with SSR (Server-Side Rendering) when using plain React.

Doesn’t the code snippet here render the <Content> component on the server?

Our code basically follows this very same approach. We use fetchOneEntry to load the data before initiating the React render and then pass it as content prop to the Content component.

I have a hard time understanding why Next.js (or a framework) is required in this particular situation but If you say that it is required then I guess we’ll have to wait until you support plain React or consider alternatives.

Are there any plans to support plain React going forward?

13

Hello @martinklepsch,

While we don’t have a specific timeline for SSR support in plain React, I want to assure you that we are actively working on it. With our Gen 2 SDK, you can expect SSR support to be included in future updates.