SSR issues with @builder-io/react

Technical Questions
1

Hi!

I’m doing to a proof of concept with builder for my team and have really liked the product, but I’m having trouble getting it to work with our current server side rendering setup. We have a Laravel app that renders react components. We use a pre-render & hydrate strategy using the PHP V8 runtime, and have been successful thus far with isomorphic react components.

I’ve built out a few custom components and was able to get it builder up and running on the client using the example here.

The issue I’m running into is that I cannot use the same wrapper (CatchAllPage in the example) on the server because whenever I import anything from @builder-io/react, I start getting window is not defined and document is not defined errors. That makes sense since those functions are not available on the V8 runtime (PHP V8JS).

I see examples using Next.js and Gatsby, but I only have a cursory understanding of those frameworks (getServerSideProps is really neat). I’ve managed to come up with a halfway solution by using the HTML API to grab the raw HTML on the server, and then hydrate the app on the client. It works for builder components, but doesn’t work for any custom react components.

Any ideas or suggestions on what may be the issue? Ideally we’d be able to server side render all of our builder component since we’re testing this out on a few marketing pages and SEO is important. Happy to provide some code samples and elaborate more if that would be helpful!

Thanks,
Robbie

2

Hey @robbie, would you be able to send us a code sandbox or minimal repo so we can investigate? Thanks!

3

Hey @kara, I’ll try to put something together but not sure if I’ll be able to replicate our setup very easily or quickly.

In the meantime, I’ve tried another approach by using the HTML API to get the prerendered page on the server, and using our client code to hydrate that page. It seems to be working well for components defined in builder.io, but none of the custom components are prerendered. It seems like this is where the SDK would come in handy, but outside of that, is there a way to inject custom components into the prerendered HTML, perhaps via the content API?

4

Hi @robbie

It is a limitation of the HTML API, since we render on our servers and have no context of the custom components defined in your codebase, best is to use the React SDK to render on your servers if you’d want to use your custom React components.