Angular PreRendering Builder Hosted Pages

Technical Questions
1

Hello,

I’m working on setting up prerendering for an Angular application. Most of our site has been migrated to Builder and we are looking to statically generate the builder hosted page to improve performance and SEO. The angular documentation mentions that for CMS hosted content that you need to pass in the routes that you would like to pre-render. Angular. I did this for one of my builder routes (https://builder.io/content/081b1908d50a4cb997e35f99157cf3fa) and I see that the <builder-content></builder-content> are generated in the prerendered html but none of the builder content (text, images, styling, metadata, etc) are included.

We have another CMS integrated which is running our blog and I am able to successfully prerender those pages.

Do I need to do anything special to configure builder to achieve this?

2

Hi @spm922, can you try fetching the content manually first in your app then passing that to your builder component with the content prop? Let me know if that helps.

3

Hi @ancheetah. This is for React. We are running Angular. I tried doing this in angularish way by doing:

<builder-component model="page" [content]="builder.get('page') | async">
</builder-component>

The prerendering build step just hangs indefinitely with this configured. Do you have an Angular example you can share?

4

Hi @spm922 we messaged about this in chat but I wanted to follow up here as well. It looks like the content attribute is not yet supported in the Angular SDK but we are always making improvements. For static generation you can use one of our APIs, such as the HTML API, to fetch builder content and then bind that to innerHTML.

Hope this helps,
AJ

5

Hi @ancheetah I was able to get this working using the HTML API and binding to innerHTML. Thanks for the help!

1 Like