Avoid hydration mismatches by getting the data on both server and client using an AsyncLocalStorage in Astro.
[!WARNING]
This package is deprecated. Use https://inox-tools.fryuni.dev/request-state instead.
astro-alsThis is an Astro integration that allows you to avoid hydration mismatches by getting the data on both server and client using an AsyncLocalStorage.
When using the Cloudflare adapter, you'll need to enable AsyncLocalStorage manually.
Install the integration automatically using the Astro CLI:
pnpm astro add astro-als
npx astro add astro-als
yarn astro add astro-als
Or install it manually:
pnpm add astro-als
npm install astro-als
yarn add astro-als
+import als from "astro-als";
export default defineConfig({
integrations: [
+ als(),
],
});
In your project root, create a new als.config.ts file:
// als.config.ts
import { defineAlsConfig } from "astro-als/config";
export default defineAlsConfig({
seedData(context) {
return {
// Your serializable data here
};
},
});
This code will be run in a post middleware. The best practise is to only use the seedData function to return data without causing any side-effects.
In a shared layout, import AlsSerialize.astro:
---
// src/layouts/Layout.astro
import AlsSerialize from "astro-als/AlsSerialize.astro"
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<AlsSerialize />
</head>
<body>
<slot />
</body>
</html>
You can now import the data server (within a request) and client side using getAlsData:
<script setup lang="ts">
// src/components/Test.vue
import { getAlsData } from "als:astro";
const data = getAlsData();
</script>
<template>
<pre>{{ JSON.stringify(data, null, 2) }}</pre>
</template>
---
// src/pages/index.astro
import Layout from "../layouts/Layout.astro";
import Test from "../components/Test.vue";
---
<Layout title="Welcome to Astro.">
<Test client:load />
</Layout>
Here is the TypeScript type:
export type Options = {
configFile?: string;
cliendId?: string;
disableConfigValidation?: boolean;
}
configFileConfig file path for the integration, relative to the root directory. Defaults to "als.config".
import als from "astro-als";
export default defineConfig({
integrations: [
als({
configFile: "./my-custom-config.mjs"
}),
],
});
clientIdId used in the DOM to store the data. Defaults to "astro-als-data".
import als from "astro-als";
export default defineConfig({
integrations: [
als({
clientId: "my-custom-id"
}),
],
});
disableConfigValidationDisables validation of the ALS Config file, eg. when there are conflicts with other packages. Defaults to false.
import als from "astro-als";
export default defineConfig({
integrations: [
als({
disableConfigValidation: true
}),
],
});
This package is structured as a monorepo:
playground contains code for testing the packagepackage contains the actual packageInstall dependencies using pnpm:
pnpm i --frozen-lockfile
Start the playground and package watcher:
pnpm dev
You can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.
MIT Licensed. Made with ❤️ by Florian Lefebvre.
FAQs
Avoid hydration mismatches by getting the data on both server and client using an AsyncLocalStorage in Astro.
We found that astro-als demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.
Security News
FSF files an amicus brief against Neo4j, defending the AGPL and warning against adding restrictive terms that undermine free software rights.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.