New features worth trying in Astro 2.5

AstroJS is a great tool based on JavaScript, used to create static web pages super fast. It allows you to create websites using many JavaScript frameworks like React, Vue, and Svelte. Astro 2.5 brings a number of completely new features, specifically:

Data collection

Astro 2.5 now supports saving JSON and YAML in collections. New style: the 'data' attribute enables this. To illustrate that, let's create a 'writers' data collection in the src/content directory, where a JSON or YAML file can be added.

Next, configure the collection in src/content/config.ts using the defineCollection and z utilities from the astro:content module and set this data type.

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

Finally, export the collection object to subscribe to the collection.

export const collections = {writers:writers}

HTML Shrink

Astro 2.5 introduces the compressHTML option, which removes all whitespace (and line breaks) in HTML. Components are compressed only once by the Astro compiler and then during the build process. This is done to reduce performance costs.

Enabling the above selection in the project is easy. Just add the following lines to your config. HTML Minification only works with elements written in the .astro.

export default defineConfig({compressHTML:true})

Parallelized Rendering

Parallel rendering of components is a long-awaited feature in Astro. In the case of sub-tree sub-components fetching data, Astro 2.5 improves load times by fetching data in parallel.

This allows a component deep in the tree to be displayed without being locked by a fetch element higher up in the tree. Currently, parallel rendering doesn't work with array.map asynchronous arrays .

Astro 2.5 also brings a bunch of other cool experimental features.

Hybrid Rendering

Astro 2.5 now allows you to define a new server output option in the config file, overriding SSR's default pre-rendered behavior.

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

Doing this defaults to pre-rendering the entire page, but you can choose that behavior by setting the output prerender of any route or page to false :

export const prerender = false;

Custom Client Directives

Astro 2.5 introduces the addClientDirective API to control client-side component hydrates with custom client:* commands.

To use this feature, enable experimental.customClientDirectives in the config file and keep the directive entry points to a minimum to avoid any negative reactions to the component hydrates.

A ClientDirective import function will be exported from your client directive file. For example, the following code hydrates the ingredients on the first click of 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;

Client:click can now be used in components with full input support.

How to install Astro

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

npm create astro@latest

This will create a new Astro project from the start. Follow the on-screen instructions to set everything up. Next, add cd to the project directory, and then run:

npm run dev

You can add frameworks like React, with astro add . If everything is installed live, you can open localhost:3000 on your machine, and you will see the message "Welcome to Astro".

If you don't like NPM, you can choose other JavaScript package managers like Yarn and PNPM.

An all-in-one framework like Astro makes web development as fast and smooth as possible. Thanks to it, you can work with any popular JavaScript framework without any hassle.

Lesley Montoya

Update 27 June 2023