Text

Builder supports SSR and SSG out-of-the-box for all components and frameworks.This means that you can leverage the benefits of SSR (Server-Side Rendering) and SSG (Static Site Generation), such as improved performance, SEO, and initial page load times, without any additional setup.

Image

Diagram of what the flow looks like for SSR and SSG. For SSR there is a diagram of your app with request and response. Then there is the request of fetching, Builder JSON server-side, and the response from the Builder API that says render service side via Builder SDK. For the SSG diagram, there is a picture of your app with a request to fetch Builder JSON at build time from the Builder API and the response of render at the time via Builder SDK.

For more detail on how Builder works, read <a href="https://www.builder.io/c/docs/how-builder-works-technical" rel="noopener noreferrer" target="_blank">How Builder Works: a Technical Overview</a>.

<h2>Edge cases: when your framework doesn't support components fetching their own data on the server</h2>

The edge case of React custom components fetching their own data rendered on the server requires an additional utility, <code>getAsyncProps</code>.

CodeSnippetsV2

For more information on server-side data, refer to the <a href="https://github.com/BuilderIO/builder/tree/master/packages/utils#getasyncprops" rel="noopener noreferrer" target="_blank">getAsyncProps README.</a>

SSR and SSG

Edge cases: when your framework doesn't support components fetching their own data on the server

What's next