The Astro Experience

For a long time, I was considering to rewrite this website with something that was better than React. While the website worked fine, there were somethings that bugged me really much

As React does not provide server side rendering, links like https://namishpande.is-a.dev/blogs/standup don’t actually exist. If you refresh the page it would not work. As an easy fix I used the Hash Router instead of the normal BrowserRouter. And while the links technically worked, they would look ugly (https://namishpande.is-a.dev/#/blogs/standup) and are not the best when it comes to being SEO friendly
Slow. IT was S L O W. Some blogs would take 5-8 seconds to load and the website felt really clunky. I needed some blazingly fast 🚀 library to make it better for the visitors. Astro reduced it to less than 1 second.
The markdown-to-jsx library was very buggy and rendering code components in it was a terrible pain in the neck. I was also in need of a better markdown renderer.

For some time I was considering redoing it with Next.js + Nextra. My friend has his own really clean and minimal site with nextra here. It seemed a very solid choice and I even learnt Next js for it. Even made a small project with next called kinben. But then I remembered Astro, a very unique framework that I had last heard of over a year ago. It seemed really unique at the time but I was not actively programming then. I thought this would be very good way to learn new stuff as well. This blog’s stack now is MDX + TAILWINDCSS + ASTRO. Here are the things that I love about astro

The File Structure

Astro uses its own file structure with the .astro extention which is super duper easy to follow and maintain

---
import SomeComponent from "../components/Component.astro"
const message = "hello world"
---
<div class="container">
  <SomeComponent/>
  <p class="text-2xl">{message}</p>
</div>
<style>
  /* Style Stuff Here */
  .container {
    @apply w-1/2;
    padding: 3rem;
  }
</style>
<script>
  // Javascript Here
  console.log("Astro Is Cool")
</script>

Two Lines of --- are used to seperate the imports // variables from the structure itself. You can display the variables by wrapping them in {}, just like jsx. Instead of having one big style.css, theme each component differently, same for the javascript.

Integration With Other Frameworks

My mind was blown away when I first learned that I could use my React jsx compoenents with astro (including react hooks like useState and stuff). This to me is gamechanging. Not only React, but Vue compoenents are also allowed. And adding React/Vue support to Astro is so easy and seamless.

$ npx astro add react

$ npx astro add vue

here is an example of using react component in astro

import {useState, useEffect} from "react"
export default Const = () => {
  const [text, setText] = useState("")
  useEffect(() => {
    setText("Hello World!")
  }, [])
  return <h1>{text}</h1>
}

now calling it in astro.

---
import Greet from "../cmps/Greet.jsx"
---
<div>
  <Greet client:load/>
</div>

The client:load is required to actually run the useEffect.

Easy To Use.

The command lines tools provided by astro are really simple and easy to use. It makes integrating stuff into your project a whole lot easier than before. The Initial setup wizard is easy to follow. Installing and getting tailwind to work was a single command away. Installing and integraring mdx was one command away. It also edits the astro.config.mjs file for you

export default defineConfig({
  site: 'https://namishpande.is-a.dev',
  integrations: [tailwind(), mdx({
    syntaxHighlight: 'shiki',
    shikiConfig: {
      theme: 'css-variables'
    },
    remarkPlugins: [remarkMdxCodeMeta, remarkMath],
    rehypePlugins: [rehypeKatex],
    remarkRehype: {
      footnoteLabel: 'Footnotes'
    },
    gfm: false
  }), react()]
});

Most of this file was generated by astro itself. I only had to change the shikiConfig and add the rehype and remark plugins. Importing markdown and displaying it in the webpage, adding custom styles to markdown was much much easier than the markdown-to-jsx wizardry.

Conclustion

Well this is it, astro is now my go to framework for building web apps. I hope if you are reading this, that you are convinced to atleast try out astro. Here are some resources to get you started on astro:

Namish

26 Oct 2023