Possible to serve static site without <script> tag?

Builder content link

Builder public api key
61399c2360c74c329313f36c7772806c

What are you trying to accomplish
I wanna serve a static site with no JavaScript.

Yesterday I felt like I almost had it figured out:

  1. Query the Builder API at build time to get the site content
  2. (Embed that HTML using Astro)
  3. Use Webhook to connect Builder to Netlify, so that every edit on Builder triggers a new build and updates the site as per step 1

The problem is that the HTML I’m getting from builder’s API already includes a <script> tag and the <builder-component> wrapper.

How could I avoid this trip to builder’s cdn for the script? Maybe there is an easy way to get the ‘pure’ HTML without the wrapper?

I feel like I might be missing something fundamental here. Any input would be appreciated!

Code stack you are integrating Builder with
Astro for SSG. Builder’s HTML API to get the HTML.

To bump and elaborate.
I have:

// index.astro

const { data: pageData } = await fetch('https://cdn.builder.io/api/v1/html/MY_PAGE_MODEL?apiKey=${apiKey}'
)
//...

<Fragment set:html={pageData.html} />

which generates HTML like

// index.html

<builder-component ... name="MY_PAGE_MODEL" ...>

// ...styles and HTML...

</builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>

So then the client has to fetch the webcomponents script, even tho it’s a totally static site made of text and images.
I’d just like to improve performance a bit. Is there an easy way to not embed this script tag?

:exclamation: UPDATE
I got it working using the Qwik API (not the HTML API).

Thanks for the folks on the Discord for pointing me in the right direction!


Working code:

// index.astro

const encodedUrl = encodeURIComponent(''); //empty string - not sure if necessary, but seems to work

// use /api/v1/qwik instead of /html 
const { html: pageHTML } = await fetch(
  `https://cdn.builder.io/api/v1/qwik/homepage?apiKey=${apiKey}&url=${encodedUrl}&cachebust=true`
)
  .then((res) => res.json())
  .catch(handleError);

---
<Layout>
    <Fragment set:html={pageHTML} />
</Layout>
1 Like