One of the coolest features of Astro is that you can use
many of the most popular UI libraries to build components. These components will
be rendered either statically for static generated sites (like this one), or on
the server side for server side rendered sites.
Astro also embraces a concept called
Islands, which was popularized
by Katie Sylor-Miller. By default, components in Astro
are only rendered server side, and only the resulting HTML/CSS is sent down to
the server. This means that unless you specify otherwise, components won’t include
any of their JavaScript when loaded client side. This means that for components
that don’t have interactivity, end users aren’t penalized with larger payloads, and
they don’t have to spend extra time waiting for the browser to parse JavaScript
needlessly.
For the times when a component does have interactivity, you can add a
client directive
to instruct Astro to include the JavaScript. This creates islands of interactive
components, and since it’s opt-in, pages only incur extra costs when absolutely
necessary. Even better, non-critical components can use directives like
client:visible to have the component only hydrated client side if it comes into
view (this can be especially useful for components deep in an article or in a
footer, since users may never get to them).
This post has a small test component I wrote in Vue, and then converted to other
UI libraries with the help of ChatGPT. The data visible in
each component is the same array of items defined just once, and passed down into each
component.
