#Defer astro component

8 messages · Page 1 of 1 (latest)

lyric pendant
#

Can I lazy load an astro component?

tired plankBOT
#

Hi @lyric pendant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, you can lazy load an Astro component using the client:* directive. This directive allows you to control the loading behavior of your components on a component-by-component basis. For example, you can use client:load to load a component as soon as possible, or client:visible to load a component only when it becomes visible on the page.

Here's an example of how you can use these directives:

<!-- client:load -- high priority, load this component on the page ASAP -->
<MyCriticalBuyButton client:load />
<!-- client:visible -- low priority, only load when visible on the page -->
<MyHeavyReactImageCarousel client:visible />

This level of control is unique to Astro and can be extremely useful for optimizing the performance of your website.

For more information, you can refer to the Astro 1.0 Beta Release blog post (https://astro.build/blog/astro-1-beta-release#1-great-web-performance-should-be-the-norm-not-the-exception).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@lyric pendant kapa.ai is still learning and improving, please let us know how it did by reacting below

lyric pendant
#

@tired plank When I use a client directive like you suggest I recieve the following error in my terminal:

You are attempting to render <Services client:visible />, but Services is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.

tired plankBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing is because you're trying to use a client: directive with an Astro component. Astro components are HTML-only templating components with no client-side runtime, so they can't be hydrated in the client.

If you want to hydrate a component (make it interactive on the client-side), you should use a UI Framework component (like React, Vue, etc.) instead of an Astro component. Then, you can use the client: directive with that UI Framework component.

Here's an example of how you can do this:

<!-- This is a UI Framework component, so it can be hydrated -->
<MyReactComponent client:load />

If you want to send JavaScript to the browser from an Astro component, you can use a <script> tag in your Astro component template. This JavaScript will execute in the global scope.

<!-- This is an Astro component, so it can't be hydrated -->
<MyAstroComponent>
  <script>
    // This JavaScript will execute in the global scope
  </script>
</MyAstroComponent>

For more information, you can refer to the Astro documentation on hydrating interactive components (https://docs.astro.build/en/guides/framework-components/#hydrating-interactive-components) and the Astro documentation on Astro components (https://docs.astro.build/en/basics/astro-components/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@lyric pendant kapa.ai is still learning and improving, please let us know how it did by reacting below