Add Interactive React Components to a Static Astro Page with Astro Islands

Everything up to this point Astro builds statically which means there is no JavaScript loaded on any of our pages. It's all loaded during build time and served as static files on the web

When we do want to add some interactivity into our site we can use Astro Islands to leverage JavaScript on our pages.

Astro islands are interactive components that Astro treats differently than the rest. Instead of just executing them during build time and saving the output, Astro will also hydrate the components at a specific point and ship the JavaScript needed for the component to be interactive.

To use a UI framework, we need to add its integration, so we did npx astro add react to add the react integration.

Then we will create an ordinary react component, just as we would in a react page, and import it and place it in a page. To mark that component as an island, we use a client directive. The client load directive hydrates the component during the initial page load.

The client directive has several different loading strategies you can use based on your usecase:

• client:load
• client:idle
• client:visible
• client:media
• client:only