Astro Server-Side Rendering: Edge Search Site

Astro Server-Side Rendering
Updated 3 weeks ago
24 minute readGunning Fog Index: 8.6
Content by Rodney
Author Image: Rodney from Rodney Lab

🤷🏽 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 minimising the amount of JavaScript needed in the browser to load the page initially. Minimising 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 need no JavaScript to load a page footer and many other elements. Astro creates a lot of scope for optimisation — 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 (SSGStatic Site Generated) 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 optimise 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 customising the app for users based on their location. Let’s say you have a 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 APIApplication Programming Interface 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 exacly as it will be built. This is not the case if you test in Vitest but bunde 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 customised 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 the use some new feature on your favourite site builder. We 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 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 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 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 Cloudlfare,
  • 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 #

🌱 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!

RODNEY LAB PLUS

Astro Server-Side Rendering: Edge Search Site

+
Astro Server-side Rendering: getting started with Astro SSR building a productivity search app with Vitest and Edge geolocation data.
HAVE MORE

2 hours of video content, with in-depth text explanations and complete code blocks.

Please log in or create an account to see the complete tutorial.
RODNEY LAB PLUS

Astro Server-Side Rendering: Edge Search Site

+

2 hours of video content, with in-depth text explanations and complete code blocks.

Astro Server-side Rendering: getting started with Astro SSR building a productivity search app with Vitest and Edge geolocation data.
Please log in or create an account to see the complete tutorial.

🏁 Astro Server-Side Rendering: Edge Search Site: Summary #

What is Astro? #

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 personalised 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 personalise 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 personalise 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 [email protected] 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 customise 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 of 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 site 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: Wrapping Up #

In this tutorial we built out a complete Astro Server-Side Rendered app. In particular, we have seen:

  • how to create an Astro SSR app for Cloudflare Pages using the Cloudflare adapter,
  • how to personalise an Astro site with Edge information using user IP address, location and timezone to deliver weather information and productivity tools,
  • just how much you can rely on browser APIs when working in Astro, limiting JavaScript and keeping your app lightweight.

I hope you found the tutorial useful and am keen to hear where your Astro journey takes you next!