Is Builder.io code all on Vercel

General
1

We have a next.js app on Vercel and are looking at using Builder. Using Supabase as a DB.

Does all of the code generated in builder actually get pushed to Vercel? Or is Vercel just pulling stuff from the Builder.io API? Worried that an additional API could hurt speed.

If we wanted to get off Builder after a while, could we simply remove the builder integration and push live again, or would we be losing the components that were created in Builder?

If we import existing components from our codebase into builder, are they able to be edited in builder just like a builder native component?

2

Hello @benmiller,

Welcome to the builder.io forum post.

Vercel is mainly pulling content dynamically from the Builder.io API. When you integrate Builder.io with your Next.js app, you’re embedding a <BuilderComponent /> that fetches and renders content directly from Builder.io based on the specified model (page, section, or data).

How does this affect speed?

Using an additional API to fetch content can impact speed, primarily depending on network latency and the response time of the Builder.io API. Builder.io supports caching strategies and pre-rendering options that can help mitigate performance impacts. For instance, you can use Incremental Static Regeneration (ISR) in Next.js to regenerate pages in the background at a specified interval.

If we wanted to get off Builder after a while, could we simply remove the Builder integration and push live again, or would we be losing the components that were created in Builder?

You would need to manually migrate the content from Builder.io to your static codebase or another CMS if you decided to move off Builder. The components themselves reside in your codebase, but the content and layout managed by the Builder would need to be re-integrated differently.

If we import existing components from our codebase into Builder, are they able to be edited in Builder just like a Builder native component?

Yes, Builder.io allows you to import your own custom React components into the Builder visual editor, where non-developers can then edit and use them in the content. To do this, you need to register your components with Builder.io.

Here’s how you can register and use your custom components in Builder:
Register Your Component in Builder:

import { Builder } from '@builder.io/react';

const MyCustomComponent: React.FC<{ name: string }> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

Builder.registerComponent(MyCustomComponent, {
  name: 'MyCustomComponent',
  inputs: [
    { name: 'name', type: 'string' }
  ],
});

**Use Your Component in the Builder UI:**Once registered, your custom component will be available in the Builder visual editor for content creators to use and configure.