Performance For THE UI Builder

General
1

Hi All- quick question… was thinking of moving my web-app over to builder.io.

Quesiotn… how has performance been for you all? Spceicifally, I am very concerned with teh fact that it makes its request to the visual builder with API’s/ Middleware that Im not sure how much latency that adds?

Secondly, I want to deploy to vercel etc still… has anyone had problems with using builder.io at all or what have been the downsides?

Like I said, I mostly want to use it for a web-app so i need to know how the full experience has been with web-app type use-case… thanks!

2

My experience so far:

  • Experience some problems on deployment in the start but related to not entirely understanding how builder works, following everything on the documentation setup helps: Developer Quickstart - Builder.io

  • performance wise take into consideration that most builder components are client side components and builder does extra request (although cached and has a stale content logic) to retrieve information about the page and components, since I imagine in SSR your page will have other requests to do it makes little difference in the long run but in the end your page will render like so:

                builder get page information with a request 
                               (using SSR)
                                     .
                                     .
                                     .
                                     ▼
    the page get the info(in json) and renders the correct components/page 
                             (on client side)

more info:
content api

some tips while developing with builder:

  • As a developer you will most likely be creating custom components which is the main feature of builder: Intro to Integrating Custom Components - Builder.io

  • Aways take into consideration that the preview editor builder is a different env the the published one

  • If you have additional configuration to handle routes and pages (like having different locales or advanced slug strategies configured on next.js, or query string attributes) I advise changing the preview logic to ensure those are being take into consideration on preview
    Editing and Previewing Your Site - Builder.io

  • If you have your on design system I advise disabling builder default styles Disabling Default Styling

  • some times you will have to use advanced inputs/functions that standard builder.io does not have, for that I advise looking into plugins: Making a Plugin - Builder.io

  • Use symbols when you have to edit the same layout with different content, also another powerful feature of them is using them alongside targeting parameters to render different content depending on the page data, url, content etc Introduction to Symbols - Builder.io

In general I think builder is suited for most of e-commerce solutions in my opinion and also any site that can benefit from CMS data management and have a defined design system (since builder make it easier to incorporate your design system into the mix)

3

thanks @gustavoFreire !

Mainly, I want to know if anyone has used this for an all encompassing web-app. I see a lot of material about this being used for Ecomm and CMS.

I want to know the dirt about web-apps etc. lol… Any insight on that?
Im talking things like: Auth, context variables, data management (supabase) etc.

Thanks!

4

  • Auth should be handled on your code side since builder will basically request an url on your code first (for example a next js page) so you configure that there, if you want to develop a login page on builder for example you just have to push the data on the form and handle that on the page code (on next js) you can define a login function on the builder context and call them on a login button to push these changes using events: Custom Code in the Visual Editor - Builder.io

  • context could be handled using standard React context or any global state management lib of your preference (like you would do on any app) if you want you can integrate (but not required) what you have with the builder context: Custom Data and Context - Builder.io, I’ve being using just react context without issues

  • you can integrate data management tools with existing plugins or create your own, in the case of supabase there is already a guide available: Supabase, Next.js and Builder.io

5

Since builder will only read data from your Next js application (or any other framework/solution with React) most of the technical solutions will be done on your code, builder will just provide CMS and layout data for you using the components and page configurations you developed

6

@gustavoFreire got it! Yeah that was what I had thought!

So now, the issue im facing is that I have build 95% of the content to my next app in next already.

But, the move to builder, I am realizing, would mostly be for future improvement and collaboration. So being that its most setup in next.js alraedy, how would go about implementing models, and things like this into Builder to try it out?

For example, how would i implement my existing project into builder? Ive already don ethe walkthrough of “implement existing project” but I see that it still creates a new […Page] element into the /app directory… Like how can i essentially “pull” all of that which is already made in next.js into Builder?

7

If I had to integrate an existing project into buider first I would have to make sure:

  • I have my client side components organized and separated from my pages
  • I have a defined/organized list of components I want to be used by builder

Then this would be my next steps

  • create a custom component based on one of my defined components
  • create a builder test page to test two things:
  • Keep in mind builder will not read your components out of the box, you will have to configure them to work with builder (so will you need to refactor most of them) and call a function that defines that component on builder using Builder.registerComponent
  • you will have to refactor your pages and generally have builder take care of them, if you desire that all your pages should be managed by builder for example, you will have to delete them from Next.js, and configure additional behaviors (if needed) on the [...page]/page.tsx file
  • if there are pages that you do not want to be managed by builder you can still use them as they are on next js and they will still work
  • having all that said I would start recreating page by page and defining component by component on builder while still having the old pages rendering correctly, for example: start with the button component and the login elements
  • keep in mind that your “builder components” is just react components so even if you “convert” a component into a builder one they will still behave as normal on next js pages when imported (what makes them different is mostly the Builder.registerComponent call)
8

got it @gustavoFreire thats what I was thinking I had to do lol. I was hoping there was a “pull” type feature that could read and translate everything that it had to from my project.

I’m still a bit confused on how it works within VS code in terms of refactoring. If Im understanding how builder works correctly, I dont have to refactor my code in terms of my SSR and whatnot on that page - Builder would just need me to reconfigure the UI part as their API scenario that connected with VSCode?

Im still a bit confused on how builder would “display” my data that is rendered above in the SSR part? Any good guide on that?

thanks again for the help!

9

There is a page that explains how it works:

Link of technical explanation of how builder works
but in sum:

  • builder will request an url on nextjs
  • in that url after configured, it will have information about all your custom components created, and additional data/configuration, handled on the [...page]/page.tsx file
  • upon requesting you components code builder will also send the builder data for that page, configured on builder editor, (that will include builder state, builder context and the layout)
  • with all this data the main builder component (installed with builder.io js lib and imported on [...page]/page.tsx file) will them “build” your page organizing the components how it was defined on the builder editor, essentially what you do in the builder editor will just generate a JSON that your application will read and the <Builder /> component knows how to render it
  • in the case displaying data, you can have builder access it in some ways:
  1. Having your custom component pull the data needed or create a wrapper with the data that passes the props to the component and them use it as a custom compoenent
  2. Exposing the data on builder context
  3. creating a builder plugin to include data on builder state
    *obs: I would advise using the first two and only use the 3 if you the the content manager to have direct control of when to use the data