Search code examples
astrojs

Astro: bundle size before and after adding an UI framework

The Astro doc states that when you bring in an UI framework,

The JavaScript framework (React, Svelte, etc) needed to render the component will be sent to the browser along with the component’s own JavaScript. If two or more components on a page use the same framework, the framework will only be sent once. link

To me this means, that even if you use just one line of React code, you will be shipping all of the React library to your app? Is this correct?

Even if that's the case, I'm not attacking Astro or anything like that. I'm just interested as I haven't been able to find an answer anywhere. I appreciate even when if that's the case, with Astro you get useful things like client:visible.

Also if that's the case, I suppose it means that if you are building a web app, where data changes a lot and it is very important for the data to be up-to-date all the time, you might want data fetching done on the client side exclusively, then you could argue you may as well use vanilla React?

Solution

  • It is true that pages that use React clientside (i.e. via components with a client:load directive), will need to load the full React library (as do all other approaches using React on the client be that “vanilla”, via Create React App, Next.js, etc.). React has one of the largest footprints of the UI frameworks too, so if that’s a concern, you may want to evaluate if a lighter weight option like Preact could work for you.

    There are still a few nice advantages that Astro can offer:

    • You can still use a React component for templating on the server and ship zero React to the client.

    • You have full control over which components do load JS on the client and when, using things like client:load, client:idle, client:visible, and client:media. Making it easy to prioritise loading key interactive content.

    • If interactive clientside React is only needed on some pages, the pages where it isn’t needed won’t load React at all.

    • Compared to “vanilla React”, Astro comes with a lot of helpful features like routing, first-class support for content in Markdown, MDX, or Markdoc, etc.