Gridsome VS astro

Thanks for reading!

The web tech stack is actually one of my biggest regrets. It's a static site generator called Gridsome[0] that the maintainers abandoned about three months after I used it to launch the TinyPilot website.

At the time I made the TinyPilot site, I was very excited about Vue, so a Vue-based SSG seemed great. Since then, I've come to find SPAs and most frontend frameworks to be way too much complexity, so I've moved away from Vue, but the TinyPilot website is still stuck on Vue 2.x and bootstrap-vue (which is tied to Vue 2 and Bootstrap 4).

So, it keeps creaking along, but building the 100ish pages on the site takes about five minutes, whereas I think something like Hugo could probably do it in a few seconds. Plus, we get random runtime errors[1] that are pretty hard to debug.

[0] https://gridsome.org/

[1] https://github.com/nuxt/nuxt/issues/5800

Nuxt.js and Gridsome are tailor-made for Vue.js developers.

Gridsome — Jamstack SSG tool for Vue developers

Node is basically back-end Javascript. While powerful alone, almost exclusively you will use a back-end framework like Next.js or Gatsby when using React, and then maybe Nuxt or Gridsome in Vue.

Among other thoughts, I considered a possibility of migration to a newer tech stack (because I can). Don't get me wrong, I actually love Gridsome (which is underneath my website now). But it's quite obsolete, and it's actually a dead project now.

One downside of Gridsome is that development seems to have stopped if you look at their github. For that reason I've recently switched my Gridsome clients to Nuxt

I definitely think Nuxt is worth learning for more than just a static site. However, there is a Gatsby-like Vue framework that focuses on SSG: https://gridsome.org/

Gridsome

All the Static Site Generators have been in the market for many years. With time, they get new improvements and upgrades as well. While considering SSG frameworks, like Gatsby, Nuxt, Gridsome, Next, and many more have been on the developer’s list for a long time. But when we talk about blazing fast web performance as per core web vital, then we have to do a lot of work in the available frameworks, after connecting a lot of dots (in terms of web performance), but still, we cannot achieve the web performance as per our need if we consider a use case of a large website where 20+ components are in one page.

Astro is the new hot new web framework on the block. All the cool kids are using it. I've recently given up, drank the Kool-Aid, and gone all in on it.

Built with Supabase, Astro, Unreal Speech, Stable Diffusion, Replicate, Metropolitan Museum of Art

Astro to use every framework at once instead of just react? https://astro.build/

Depending on the stack of the repository you are cloning, you might have to install additional dependencies. For this demo, I'm using my own website, which is a static website built with Astro.js. It which requires to have Node.js installed and Yarn for package manager.

Database: turso [7] or neon postgres [8] with (drizzle orm) or cloudflare durable objects

1. https://github.com/withastro/astro

Maybe a bit too elaborate for your taste, but I've used https://astro.build/ and loved every bit of it.

Astro is an open-source JavaScript framework known for its versatility, performance, and new approach to web development. It enables developers to create fast, modern, content-rich web applications and sites using the "Bring Your Own Framework" (BYOF) model.

Astro was always on my list of things to learn. I've been using Remix and NextJS for a while, and I was interested in trying out a new framework. I decided it would be a good opportunity to build the site with it. This decision turned out to be a great one, as it saved me a lot of money on hosting costs later on.

We are continuing to make building fullstack websites and application with Analog and Angular as seamless as possible, and extending the Angular ecosystem through integrations with Astro, Nx, [Vitest]https://analogjs.org/docs/features/testing/vitest, Storybook, and more.

import { defineDb, defineTable, column } from 'astro:db'; const Visits = defineTable({ columns: { id: column.number({ primaryKey: true }), page: column.text({ default: 'home' }), content: column.text({ default: "none" }), pagination: column.number({ default: 1 }), visitor_ip_hash: column.text(), visitor_user_agent_hash: column.text(), visitor_count: column.number({ default: 1 }) } }); // https://astro.build/db/config export default defineDb({ tables: { Visits } });