You can share the server variables to client side by defining define:vars attribute on <script /> or <style /> tag in the .astro template.

Read the astro documentation here for more information.

Example as below ( source : Astro documentation )

---
const foregroundColor = "rgb(221 243 228)"; // CSS variable shared
const backgroundColor = "rgb(24 121 78)"; // CSS variable shared
const message = "Astro is awesome!"; // Javascript variable shared
---

/* +++++ CSS variables to share as below +++++ */

<style define:vars={{ textColor: foregroundColor, backgroundColor }}>
  h1 {
    background-color: var(--backgroundColor);
    color: var(--textColor);
  }
</style>


/* ++++ Javascript variables to share as below ++++ */

<script define:vars={{ message }}>
  alert(message);
</script>

There is also a concept of sharing states using nanostore stated in documentation . It allows sharing states between components at framework level on client-side. Not between client and server.

Theoretically sharing states from server to client can be done using hydration technique by combining define:vars and nanostore library map api during the onLoad event may be .