SSR with Astro - Part 1, Introduction

Default SSR solutions

There are some default solutions for developing SSR in the frontend ecosystem, if you use React then use Next, if you use Vue.js then use Nuxt, …etc. Most of them are frameworks that were built on top of their respective SPA framework, and its ecosystem.

These frameworks allow you to render the website first in the server, and send it to the user, improving SEO and performance for your business needs. Also, they try to provide a streamlined development experience and give you utilities for things like: data fetching, UI, debugging, and more.

With these solutions, you need to learn their respective SPA framework first, you need to learn with its complexities first, and learning to render the whole website on the browser. Then you learn and use your SSR framework to have more control and tune your rendering for your business needs and tune it between the server and the browser. And certainly, this process requires you learn about this SSR framework, and their opinionated approach, which adds more complexity.

There is another solution, a solution that you can use with most of SPA frameworks, not a one-for-all framework for all needs, but just a platform for your work, it’s Astro.

Why Astro?

Astro gives you a great base for a static site, with an outstanding performance and optimized SEO compared to other frameworks with very minimal configuration.

You’re in the track of delivering your required SEO and performance from the start. Then Astro gives you the ability to use any framework like React or Vue.js to make UI components and make them reactive. And with Astro’s Island Architecture, you control where you need reactivity, and when you need it.

So Astro gives you a way to incrementally scale up in complexity, but with other SSR solutions, you can’t start without learning their respective SPA framework and ecosystem. Then you need to learn the SSR framework to get back the performance you need.

You learn their respective SPA framework first, with its complexity. Then you take out what you don’t need by adding more complexity by SSR frameworks to tune it for your needs, and get back your SEO and performance to achieve your business needs.

I think, most of the time, scaling complexity up in some linear way - adding things step by step when their time comes - without losing your website’s SEO and performance in the way, is easier than adding a learning curve for the SPA framework, then another for the SSR framework.

Especially all of this framework comes with their flavor, opinions and such, so it needs work, time and money. Astro have a balanced collection of opinions in my opinion, you can start with it easily knowing only HTML, CSS and JavaScript.

Why not just use a plugin?

But wait a second, why don’t we just use a plugin? You know, “do one thing and do it right”, it’s way simpler than using Nuxt and Astro.

Well, decreasing complexity is not the only goal, we want more power, better developer experience. And of course, these frameworks are better for marketing ourselves as developers and companies — I’ve never seen a plugin in a job description.

But actually, there’s a business need for using them, these frameworks are greetly supported by cloud and edge providers, and we can deploy them in most — if not all — with ease in operation, scaling, serving over CDNs and more. They also have bigger communities to move them forward and fix things, so they’re a better choice from my point of view.

Series introduction

This series will cover main points you’ll cross while using Astro to make an SSR website. I’ll use Vuejs as an example, but you can use the idea and tune it relatively with your framework of choice and ecosystem.

Characteristics:

• Using TypeScript
• Using Stores to manage our state with or without Pinia (Vue.js state management library)
• Using Astro Node.js Adapter, and dealing with different output configuration,
• Using Cypress or Vitest for Component testing and Unit testing in-source.
• More support for SEO, sitemap and more.

You can use ”Adeeb أديب” Frontend Repo as an example.

I will publish the series, taking each point, like:

• State Management
• Routing
• Component Testing
• …etc

Prerequisites

I expect you to be familiar with:

• Basics: HTML, CSS and JavaScript
• Get a first look on Astro’s docs, and keep it open while reading.
• Knowledge about Vue.js is a bonus, but if you use another framework, you’ll be fine.