Astro JS ? - Technological watch

Learn what is Astro JS in less than 5 minutes !

Monday, July 24, 2023

Problematic with Modern JS frameworks in 2023
Enter Astro JS: A Refreshing Approach
How Does Astro JS Work?
Notable Features

Astro is an all-in-one web framework for building fast, content-focused websites.

Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.

Problematic with Modern JS frameworks in 2023

In 2023, the use of big JavaScript frameworks like Next.js and Nuxt.js became prevalent for building modern web applications. While these frameworks offer a range of features, they also come with certain drawbacks. One significant issue is the weight and hydration phase of these frameworks, often leading to double rendering, which can affect performance and user experience.

Furthermore, the extensive use of JavaScript in these frameworks can result in heavy page loads, potentially slowing down the website and impacting SEO.

With Next.js, a simple “Hello world” page may require importing a 200KB JavaScript bundle to load, as Next.js includes React.js by default, even when it’s not always necessary. However, in some cases, we may not want to load JavaScript for certain pages.

Enter Astro JS: A Refreshing Approach

Astro JS presents an innovative approach to building web applications. It still uses JavaScript templates, but instead of rendering everything in JavaScript, Astro renders the content directly in HTML, much like a Static Site Generator. This approach helps to minimize JavaScript overhead and improve website performance and SEO.

However, just because Astro JS leans towards a static approach doesn’t mean you can’t have interactive components. Astro provides multiple strategies for handling interactivity:

By default with Astro, no Javascript is loaded. The Component is rendered but is not interactive.

<MyComponent />

Render on Page Load: You can set a component to render as soon as the page loads by using the client:load attribute.

<MyComponent client:load />

Wait for the Main Thread to be Free: Use the client:idle attribute to render the component when the main thread is idle.

<MyComponent client:idle />

Component Visibility: If a component appears further down the page and you want it to render when it becomes visible to the user, you can use an intersection observer with the client:visible attribute.

<MyComponent client:visible />

With these strategies, you can choose the level of interactivity you need while keeping unnecessary JavaScript to a minimum.

How Does Astro JS Work?

Getting started with Astro JS is straightforward. You can create a new Astro project using npm:

npm create astro@latest

Once your project is set up, you can define pages in the /src/pages directory. For example, if you create a file named about.astro, the corresponding URL for that page would be https://example.com/about.

Astro also allows you to create reusable components, which can be written in React, Vue, Svelte, or other supported frameworks, in the /src/components/ directory.

An .astro page is divided into two parts: one for JavaScript executed during build time and another for HTML (similar to JSX).

---
// Server-side loaded JavaScript
import Component from "@/components/MyComponent.jsx"

const title = "My title"
const api = await fetch('...').then(() => ''); // Server side only
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>Hello World!</h1>

    <!-- You can use the imported component here -->
    <!-- Client-side loaded JavaScript -->
    <Component client:load />

  </body>
</html>

Notable Features

Astro JS comes with several features that make it a compelling choice for web development:

Fast and SEO-Friendly: By rendering content directly in HTML, Astro ensures faster load times and improved SEO performance.

Rich Ecosystem: Astro supports TypeScript, RSS feeds, components, SASS, Tailwind, and more, providing a flexible and feature-rich development environment.

Component Islands: Astro introduces a new web architecture for building faster websites, making it easier to manage and reuse components.

Server-First API Design: Astro shifts expensive hydration processes off users’ devices, leading to smoother user experiences.

Zero JS, By Default: Unlike traditional JavaScript frameworks, Astro defaults to minimal JavaScript overhead, ensuring faster page loads.

Edge-Ready: Astro is designed to be deployed anywhere, including global edge runtimes like Deno or Cloudflare.

Customizable: With support for Tailwind, MDX, and over 100 other integrations, developers have ample options to customize their projects.

UI-Agnostic: Astro works seamlessly with various UI libraries, including React, Preact, Svelte, Vue, Solid, Lit, and more, allowing developers to choose their preferred tools.

In conclusion, Astro JS provides a fresh and efficient approach to building web applications. With its focus on static rendering, it offers improved performance, better SEO, and reduced JavaScript overhead. Whether you’re a seasoned developer or a newcomer, Astro JS opens up exciting possibilities for creating fast and engaging websites. Give it a try, and experience the power of a new era in web development!