Astro.js is a great framework all around but what makes it special is that it’s easy to add one ore more other framework components into your site and load them differently depending on your needs.

Here’s how to use the client directives.

client:load

<ContactForm client:load /> // Framework component like Vue.js

The client:load directive tell Astro that it need to load the component as soon as possible when the page is loaded. This is great if you need interactivity right away.

client:only

The client:only directive is the most different of the bunch, Astro won’t render the component on the server side which is not great for SEO but might be useful for optimization.

client:visible

The client:visible speaks for itself, the component is rendered on the server side, but the JS will only be loaded when it’s visible in the viewport. This is like an intersection observer built in the directive.

client:media="(max-width: 767px)"

The client:media directive let’s you load a component depending on the viewport size. The most common use case would be for a component behaving differently on mobile than desktop.

Conclusion

The client directives are a great way to optimize your site and make it more performant. You can use them to load components only when needed, which can help reduce the initial load time of your site.

As you can tell, I like Astro.js a lot and I’ll keep talking about it in the future.

If you want to learn more about it, check out the documentation.