#13527 2fd6a6b Thanks @ascorbic! - The experimental session API introduced in Astro 5.1 is now stable and ready for production use.
Sessions are used to store user state between requests for on-demand rendered pages. You can use them to store user data, such as authentication tokens, shopping cart contents, or any other data that needs to persist across requests:
---
export const prerender = false; // Not needed with 'server' output
const cart = await Astro.session.get('cart');
---
<a href="/checkout">π {cart?.length ?? 0} items</a>
Configuring session storage
Sessions require a storage driver to store the data. The Node, Cloudflare and Netlify adapters automatically configure a default driver for you, but other adapters currently require you to specify a custom storage driver in your configuration.
If you are using an adapter that doesn't have a default driver, or if you want to choose a different driver, you can configure it using the session configuration option:
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
adapter: vercel(),
session: {
driver: 'upstash',
},
});
Using sessions
Sessions are available in on-demand rendered pages, API endpoints, actions and middleware.
In pages and components, you can access the session using Astro.session:
---
const cart = await Astro.session.get('cart');
---
<a href="/checkout">π {cart?.length ?? 0} items</a>
In endpoints, actions, and middleware, you can access the session using context.session:
export async function GET(context) {
const cart = await context.session.get('cart');
return Response.json({ cart });
}
If you attempt to access the session when there is no storage driver configured, or in a prerendered page, the session object will be undefined and an error will be logged in the console:
---
export const prerender = true;
const cart = await Astro.session?.get('cart'); // Logs an error. Astro.session is undefined
---
Upgrading from Experimental to Stable
If you were previously using the experimental API, please remove the experimental.session flag from your configuration:
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
adapter: node({
mode: "standalone",
}),
- experimental: {
- session: true,
- },
});
See the sessions guide for more information.
#12775 b1fe521 Thanks @florian-lefebvre! - Adds a new, experimental Fonts API to provide first-party support for fonts in Astro.
This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
To enable this feature, configure an experimental.fonts object with one or more fonts:
```js title="astro.config.mjs"
import { defineConfig, fontProviders } from "astro/config"
export default defineConfig({
experimental: {
fonts: [{
provider: fontProviders.google(),
name: "Roboto",
cssVariable: "--font-roboto",
}]
}
})
``
Then, add a <Font /> component and site-wide styling in your <head>:
```astro title="src/components/Head.astro"
import { Font } from 'astro:assets';
<Font cssVariable="--font-roboto" preload />
<style>
body {
font-family: var(--font-roboto);
}
</style>
```
Visit the experimental Fonts documentation for the full API, how to get started, and even how to build your own custom AstroFontProvider if we don't yet support your preferred font service.
For a complete overview, and to give feedback on this experimental API, see the Fonts RFC and help shape its future.
#13560 df3fd54 Thanks @ematipico! - The virtual module astro:config introduced behind a flag in v5.2.0 is no longer experimental and is available for general use.
This virtual module exposes two sub-paths for type-safe, controlled access to your configuration:
-
astro:config/client: exposes config information that is safe to expose to the client.
-
astro:config/server: exposes additional information that is safe to expose to the server, such as file and directory paths.
Access these in any file inside your project to import and use select values from your Astro config:
// src/utils.js
import { trailingSlash } from 'astro:config/client';
function addForwardSlash(path) {
if (trailingSlash === 'always') {
return path.endsWith('/') ? path : path + '/';
} else {
return path;
}
}
If you were previously using this feature, please remove the experimental flag from your Astro config:
// astro.config.mjs
export default defineConfig({
- experimental: {
- serializeConfig: true
- }
})
If you have been waiting for feature stabilization before using configuration imports, you can now do so.
Please see the astro:config reference for more about this feature.
#13578 406501a Thanks @stramel! - The SVG import feature introduced behind a flag in v5.0.0 is no longer experimental and is available for general use.
This feature allows you to import SVG files directly into your Astro project as components and inline them into your HTML.
To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component.
---
import Logo from './path/to/svg/file.svg';
---
<Logo width={64} height={64} fill="currentColor" />
If you have been waiting for stabilization before using the SVG Components feature, you can now do so.
If you were previously using this feature, please remove the experimental flag from your Astro config:
import { defineConfig } from 'astro'
export default defineConfig({
- experimental: {
- svg: true,
- }
})
Additionally, a few features that were available during the experimental stage were removed in a previous release. Please see the v5.6.0 changelog for details if you have not yet already updated your project code for the experimental feature accordingly.
Please see the SVG Components guide in docs for more about this feature.
withastro/astro