SSR and SSG

Builder Content

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.

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 server 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 to render the content at build time via Builder SDK.

For more detail on how Builder works, read How Builder Works: a Technical Overview.

Make sure you're using a framework that supports these features (check your framework's documentation) and follow your framework's guidelines for fetching data server-side when integrating Pages or Sections.

Framework-specific limitations

Framework

Meta-Framework

SDK Generation

React doesn't support server-side data fetching for custom components. For React custom components that need to fetch data server-side, you must use Builder's getAsyncProps utility.

To use getAsyncProps(), call the loader function to fetch the Page content and asynchronously resolve any additional data. When the data is resolved, the loader function returns the content for your Remix component:

import { Builder, builder } from '@builder.io/react'; // import getAsyncProps import { getAsyncProps } from '@builder.io/utils'; export default function MyPage(props) { return <BuilderComponent model="page" content={props.content} /> } export async function getStaticProps(context) { const content = await builder.get('page', { url: context.resolvedUrl }).promise(); // wait until the data arrives before rendering await getAsyncProps(content, { async Products(props) { return { data: await fetch(`${apiRoot}/products?cat=${props.category}`).then(res => res.json()) } } }) return { props: { content } } }

If you have React custom components that depend on external data sources and need that data server-side, such as a products API, use Builder's getAsyncProps() utility to fetch any data needed server-side before render.

Fetching data for use in the Visual Editor

When using getAsyncProps with the Gen 1 React SDK for SSR or SSG, any data fetched server-side will not be available in the Builder Visual Editor. Since the Visual Editor renders content client-side, components relying on getAsyncProps need a way to fetch data on the client side during editing.

To make your data available in the Visual Editor, you can fetch the data on the client side by extracting any logic you're already using in getAsyncProps, and calling that logic on the client. Use this workaround only while editing, and remove it when editing is complete.

import { useIsPreviewing } from '@builder.io/react'; export function Products(props) { const [data, setData] = useState(props.data); const isPreviewingInBuilder = useIsPreviewing(); useEffect(() => { if (isPreviewingInBuilder) { fetch(`${apiRoot}/products?cat=${props.category}`).then(res => res.json()).then((data) => setData(data)); } }, [props.category, isPreviewingInBuilder]); return <div>{data}</div>; }

Solve caching issues with your deployed site

If published changes don't appear on your live site, it may be due to caching issues rather than a problem with Builder.

Builder publishes content to its API immediately. Delays in displaying changes are typically due to caching at the hosting provider level or within your application's caching strategy.

Work directly with your hosting provider to adjust caching for your deployed application. Some common guides are included below:

What's next

For more information on server-side data, refer to the getAsyncProps README.

Was this article helpful?