System Architecture · Published October 4, 2021

Static Site Generation for Astronauts

We needed a SEO friendly (SSG) Static Site Generation framework for our website and some customer requirements. Our search stopped at Astro Js. Astro is a modern web build tool that helps build fast websites, faster. Astro leverages a technique known as partial hydration to automatically eliminate unused JavaScript from the site, often reducing the payload by 90% or more.

This makes Astro (Astro.js) the perfect choice for content-focused websites like e-commerce, marketing, and blogs and an excellent fit for us too. Ours is a pure marketing website.

For SEO Friendly SSG(Static Site Generation), Astro.js is a game-changer.

Astro offers a modern, HTML-based component syntax that works across frameworks. React, Preact, Svelte, and Vue are all supported. Our existing React components continued to work in Astro. Hooray!!! And the fact that we could mix frameworks when needed, prevented expensive rewrites.

This goes perfectly with our Low-Code platform and pairing our Front-End components with our Low-Code APIs.

Astro Js has caught on as a popular web build tool. It launched in June 2021 and captured immediate buzz, taking home the “Ecosystem Innovation Award” at the 2021 Jamstack Awards. Today, it supports 10,000+ users including developers at Google, Netlify, Firebase, DivRIOTS, and Monogram, and adds us to that list too. Our components have become highly reusable and truly follow the tenets of ‘Island-Architecture’ post-Astro.

JAMstack Recognition for Astro.js.

Why Astro ?

We needed a SEO friendly static site generator without shipping tons of Javascript - Priority #1. We researched this need at quite the breadth & depth; there were many static site generation build tools available and the closest we came to adopting such a framework was Next.js. Gatsby was a close #2. In fact we had begun porting some of our components to Next.js.

Astro was something we bumped into on some comment of a YouTube video. Exactly after the first build it was a “NO-BRAINER” that this was our framework of choice for our corporate website at the minimum and we have not turned back since. 3 months of Astro, we have had to stomach some bugs and write some smart post-processing scripts, and have had to deploy some miniscule manual interventions.

We used Astro for our Visual Studio Code Extension, too!! Once our components and design system were established we were using Astro.js to build and distribute.

Astro.js is our choice for VSCode Extension Development.

Astro Syntax

The Astro Component (files with .astro) syntax was literally like an HTML document enhanced with JavaScript. Learning a new syntax can feel intimidating, but the Astro component syntax felt familiar to us. It borrows heavily from patterns we already knew: components, frontmatter, props, and JSX expressions. We learned Astro by building components out in a day.

Astro has scored big here on the ‘Usability Brownie Points’, they did not try to impose a new syntax or semantics and made it work all under the hood.

The syntax and semantics of our platform too is best described as seamless. Do not forget to check out our products page and learn how our DSL (Domain Specific Language) is auto-completed with LSP (Language Server Protocol). Developer Productivity was of paramount interest when it came to developing our low-code platform.

Happy Developers = Happy Customers + High-Quality Software

Products of techManta : techManta Products - Symplat