5 New Features to Try in Astro 2.5

AstroJS is a fantastic JavaScript-based tool used to create superfast static websites. It allows you to create websites using multiple JavaScript frameworks like React, Vue, and Svelte. Astro 2.5 brings a whole new set of features some of which will be covered here.

1. Data Collections

Astro 2.5 now supports storing JSON and YAML in collections. The new type: ‘data’ property enables this functionality. To demonstrate this, create a ‘writers’ data collection in the src/content folder, where JSON or YAML files can be added.

Next, configure the collections in src/content/config.ts using the defineCollection and z utilities from astro:content module and setting the type to data.

 import { z, defineCollection } from "astro:content";
const writers = defineCollection({
  type: "data",
  schema: z.object({ name: z.string() }),
});
 

Finally, export the collection object to register your collections.

 export const collections = {writers:writers}
 

2. HTML Minification

Astro 2.5 introduces the compressHTML option that removes all white spaces (and line breaks) from your HTML. Components are compressed only once by the Astro compiler and then during build. This is done to reduce performance costs.

Enabling this option in your project is easy. Just add the following lines to your config file. HTML Minification only works with components written in the .astro file format.

 export default defineConfig({compressHTML:true})
 

3. Parallelized Rendering

Rendering components in parallel is a long-awaited feature in Astro. In cases where child components in different sub-trees fetch data, Astro 2.5 improves the loading times by fetching data in parallel.

This allows a component further down in the tree to be rendered without being blocked by a data-fetching component higher up in the tree. At the moment, parallel rendering does not work properly with array.map asynchronous fragments.

Astro 2.5 also brings a whole new set of experimental features which are covered below.

4. Hybrid Rendering

Astro 2.5 now allows you to define a new server output option in your config file that overrides the default pre-rendering behavior of SSR.

To take advantage of hybrid rendering, set hybridOutput to true in the experimental section of your config and add an adapter.

Doing this will pre-render your entire site by default, but you can opt out of this behavior by setting the prerender export of any route or page to false:

 export const prerender = false; 

5. Custom Client Directives

Astro 2.5 introduces the addClientDirective API for custom client-side component hydration control using custom client:* directives.

To use this feature, Enable experimental.customClientDirectives in the config file and keep directive entry points minimal to avoid any negative impact on component hydration.

A function of type ClientDirective should be exported from your client directive file. For example, the following code hydrates the component on the first click on the window.

 import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
  window.addEventListener(
    "click",
    async () => {
      const hydrate = await load();
      await hydrate();
    },
    { once: true }
  );
};
export default clickDirective;
 

Now client:click can be used in your components with full type support.

How to Install Astro

Astro provides a Command Line Interface (CLI) called create astro to get you started. You need to have NodeJS 16+ and npm installed on your machine.

 npm create astro@latest 

This will scaffold a new Astro project from scratch. Follow the instructions on the screen to set things up (if you are not sure what to choose, just go with the recommended options). Next, cd into the project folder, then run:

 npm run dev
 

You can add frameworks like React, using astro add. If everything is installed correctly you can open localhost:3000 on your machine, and you should see a “Welcome to Astro” message.

If you dislike NPM, you can opt for other JavaScript Package Managers like Yarn and PNPM.

Enhancing Developer Experience With Astro

All-in-one Frameworks like Astro make developing fast websites as smooth as possible. It’s fantastic, UI-agnostic nature means you can work with any popular JavaScript framework of your choice with zero hassle.