Astro is a site builder which lets you build Server-Sire Rendered as well as static apps. Although Astro first came to light as a modern, fast site builder for static sites, it can also build server-side rendered sites. It has integrations for major cloud hosting providers as well as nodejs. Astro also brings a couple of other features to the table, which you do not see in many other tools. By default, it ships zero JavaScript, making it fast by default. When you do need JavaScript, you can add it to islands of interactivity. Astro’s partial hydration means only these islands hydrate and the rest of the page stays as plain old HTML and CSS, keeping the site delivered to the user device small. A final feature is that you can create your interactive components in Preact, React, Svelte, Vue or one of a long list of other frameworks. Astros’s templating language itself is a superset of HTML; it’s easier for beginners to pick up.

Does Astro support Server-Side Rendering (SSR)?

Astro is not just a static site generator (SSG). Static sites are ones which are pre-built and placed on a server. Essentially, everyone who visits the site sees the same content. In the extreme case, nothing is personalized for the user. This brings the advantage that the site can be cached in a CDN and served at lightning speed around the globe. A drawback though is it is harder to personalize the site, so something like Twitter, where you log in and see Tweets from people you follow and are only able to see your own DMs, is not a good match for a static site. No issue though, as Astro does server-side rendering too! We have seen we can personalize an Astro SSR site for users to show the weather forecast for their current location!

How can you get started with Astro?

Astro docs are really well written and get you up to speed quickly. To spin up a new Astro Project, run `pnpm create astro@latest my-app-name`. You can see more detailed instructions in the free How to Create a New Astro JS App on the Rodney Lab site. There is also quite a bit of free material there covering various scenarios for creating content sites with Astro. For reference material on SSR sites refer back to this tutorial where we built out a search site and saw examples of using browser APIs and details like getting the client IP address in Astro to customize the site for visitors.

How do you use Edge Functions or middleware with Astro JS?

To use Edge functions with Astro, a lot of the time, the adapters do the heavy lifting for you. We saw the Cloudflare adapter bundled all the Astro Endpoints into a single wrangler file, compatible with Cloudflare Pages. The Netlify adapter produces similar output, targeting that platform. You can even use a nodejs adapter if you want to have yet more flexibility. The same applies for running middleware on sites hosted with the serverless providers. There, middleware lets you inject headers or even HTML based on conditions which you determine. These might be user location, or even whether they are logged to your site or not, or which site they were referred from.

Astro Server-Side Rendering: Edge Search Site

Name: Astro Server-Side Rendering: What We’re building
Uploaded: 2022-11-01T00:49:27.000Z
Duration: 5 min 10 s
Description: Astro Server-Side Rendering: What We’re building.

🤷🏽 What is Astro? #

Before we get into Astro Server-Side Rendering, let’s look at what Astro is. Astro is a tool for building fast websites. Standout features are “bring your own framework” and partial hydration. Bring your own framework means Astro is not just limited to developers who want to use React or Preact. In fact, as long as there is an integration for your favourite framework, you can use it! Currently, it supports Alpine.js, Lit, Preact, React, Solid, Svelte and Vue. If you don’t know one of those, then use plain old HTML — the Astro templating language is a superset of HTML, making newcomers of any experience level feel warmly welcomed!

Partial hydration is all about minimizing the amount of JavaScript needed in the browser to load the page initially. Minimizing JavaScript is probably not a huge concern if users only access your site from fast, desktop computers with Ethernet connections in major Internet hubs. However, it’s a different story for anyone with a sketchy mobile connection while out of town! By default, Astro ships zero JavaScript. As the developer, you get fine-grained control over which components hydrate and when. Hydration is just the process of loading JavaScript shipped to the browser and making a component interactive. Though important for highly interactive apps, like Penpot (for example), typically you require no JavaScript to load a page footer and many other elements. Astro creates a lot of scope for optimization — those mobile users in remote locations will thank you for remembering them!

🧗🏽 Astro Server‑Side Rendering: What is the Edge? #

Whether you build a static (SSG) or Server-Side Rendered (SSR) app, opting for serving it over a Content Delivery Network (CDN), will make it fast for users wherever they might be in the world. Without a CDN, let’s say you serve your app from the U.S. east coast. A user in Japan, as an example, would have to connect over that huge distance with no CDN in place. Adding a CDN creates replicas of your content around the globe. Now, the visitor from Japan can load your content a whole lot faster.

OK, but what has this got to do with the Edge? The Edge is just the part of the CDN closest to a particular end user. Edge computing lets us optimize SSR sites. For example, adding a database replica, on the Edge, means that person in Tokyo is going to be able to load your data-heavy app quicker! This is just because the data travels a shorter distance to get to our user. We explore some other aspects in this tutorial, particularly customizing the app for users based on their location. Let’s say you have an eCommerce site selling tasty treats. Using local weather information, you can push ice creams up the page when there are local warm weather forecasts. Who doesn’t want ice cream on a hot day 😅?

🤔 Why use Astro? #

speed: zero JavaScript by default, partial hydration and the islands paradigm let you ship blazingly fast apps,
flexibility: for teams with split code bases you do not have to make everyone use React or Vue (or any one particular framework, in fact) — your team can easily integrate legacy code from multiple frameworks into the app,
simplicity: good user experience does not have to mean poor developer experience. Astro gives you the best of both worlds. The routing system is simple to comprehend, whether you want pages, resource routes or API routes. On top the templating language is basically HTML with sprinkles letting you enumerate data in arrays as an example. However, you are not limited to Astro templating! You can choose Svelte as a framework, for example, and use the Svelte templating language if that is what you already know.

✅ What is Vitest? #

Vitest is a new, blazingly fast testing framework. It takes advantage of modern tooling like Vite, to move testing forward a generation, when comparing to more established tools like Jest. Astro itself uses Vite tooling. This makes Astro and Vitest a marvellous match. Because your site generator runs Vite, you test the app exactly as it will be built. This is not the case if you test in Vitest, but bundle with Webpack.

We will see how Vitest lets you write unit tests within your JavaScript or TypeScript source files. This is similar to Rust testing and fantastic for test driven development of simpler functions.

🚦 But isn’t Astro for Static Sites? #

Astro excels at building content sites: blogs and documentation sites for example. However, its next generation SSR capabilities make it more than a static site generator. It uses adapters letting you build your app for node, Cloudflare and Netlify as well as other platforms. On Cloudflare and Netlify, for example, the adapters transpile your code into serverless functions. As a result, you get node-like, server-side functionality, but without having to manage a server. We see Astro is a nice choice for lightweight SSR apps. That said, if your app needs to make heavy use of custom generated content, SvelteKit or Remix might be a better option. For example, serving widely varying content based on whether the user signs in on a premium, regular or guest account.

🥊 Are we using React or Svelte? #

We will build out an SSR app using forms, HTML streaming, dynamic and customized content without having to touch a framework! I wanted as many people as possible to be able to try out Astro SSR and see just what it is capable of. Not wanting to put people off who don’t know Svelte or don’t know React, I set myself the challenge of creating the tutorial using just TypeScript and Astro and you will be happy to know I did it! You could say another Astro advantage is that it lets you sit on the fence!

🧱 Astro Server‑Side Rendering: What We’re Building #

We will build out a productivity enhanced search app. As a developer you are often having to look up details on the parameters for the latest APIs or how to use some new feature on your favourite site builder. We will create an app to help with these searches. Inspired by DuckDuckGo bangs, we can type a query into your search site like “!astro integrations” to search the Astro docs for “integrations”. Then, if we want to find the TypeScript ESLint package on NPM, we can use “!npm typescript eslint”. We will add others for MDN docs, web.dev docs Svelte and React docs. The idea is not to put Google out of business, but to see some Astro functionality while creating something we can use every day to boost productivity.

Astro Server-Side Rendering: What We’re building.

As well as all that, we will add a World-Clock converter, while exploring how HTML form submission works in Astro (using just browser APIs, like before). To do some of the heavy lifting, we will also take the new Temporal API for a spin, which takes the headache out of time conversion.

Astro Server-Side Rendering: Search Page: screen capture shows Dev Dev Go as title. Below is a search form field with the search query entered of `!tw @askRodney` — Astro Server-Side Rendering: What We’re building.

Finally, we get local weather forecasts using the Cloudflare Edge. We see how you can run and test the Edge functionality locally. The Astro adapter creates the necessary Cloudflare Workers for you! Again, this is not to put your favourite weather person out of a job, but to unleash the power of Astro on the Edge, providing some inspiration for applications in your own domain.

👍🏽 Astro Server‑Side Rendering: What we will Cover #

What we cover:

Creating an Astro SSR (server-side rendered) app,

running Vitest on your Astro app,

using TypeScript with Astro,

trying out the Temporal API,

using HTML browser APIs for form submissions,

Astro API and resource routes,

running Edge functions locally,

deploying an Astro SSR app to Cloudflare,

streaming HTTP responses into Astro markup SSR templates,

using HTML datalists and date for stability across devices,

importing JSON files in Astro,

getting local weather data from APIs.

⛔️ What we won’t Cover #

Tailwind, vanilla extract and other CSS frameworks: see the free post on creating an Astro app to get up to speed on the Tailwind integration,
building a content site in Astro: see the free getting started with Astro post for a heads-up,
using Preact, React, Svelte or Vue with Astro: see the free cheat sheet to learn how to use your favourite framework with Astro.

🌱 Astro Server‑Side Rendering: Let’s get Going! #

If all that sounds like what you came here for, then why don’t we get going? We’ll start by spinning up a brand new Astro app!