SSR

astro.config.mjs

@@ -9,7 +9,8 @@ dotenv.config();
 
 // https://astro.build/config
 export default defineConfig({
-  output: 'server',
+  site: 'https://eventua11y.com',
+  output: 'static',
   adapter: netlify(),
   integrations: [
     vue({

src/components/Debug.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <p>Random Number: {{ currentNumber }}</p>
+    <button type="button" @click="generateNew">Generate New Number</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'Debug',
+  props: {
+    ssrNumber: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    console.log('Received SSR number:', props.ssrNumber);
+    const currentNumber = ref(props.ssrNumber);
+
+    const generateNew = () => {
+      currentNumber.value = Math.floor(Math.random() * 100) + 1;
+    };
+
+    return {
+      currentNumber,
+      generateNew,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.random-number {
+  padding: 1rem;
+  text-align: center;
+}
+
+.button {
+  padding: 0.5rem 1rem;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #45a049;
+}
+
+.debug {
+  color: #666;
+  font-size: 0.9em;
+  margin-bottom: 1rem;
+}
+</style>

src/pages/curation-policy.astro

@@ -1,11 +1,22 @@
 ---
 import DefaultLayout from '../layouts/default.astro';
+import Debug from '../components/Debug.vue';
+
+// Disable prerendering to enable SSR
+export const prerender = false;
+
+// Generate random number during SSR
+const ssrNumber = Math.floor(Math.random() * 1000);
 ---
 
 <DefaultLayout title="Curation Policy">
   <div class="container readable py-l flow">
     <h1>Event Curation Policy</h1>
 
+    <Debug ssrNumber={ssrNumber} client:load />
+
+    <p>Server-side random number: {ssrNumber}</p>
+
     <p>Eventua11y is independently curated by <a href="https://mattobee.com">Matt Obee</a>, guided by this curation policy. None of the events listed have paid to be there. The following criteria is used to evaluate the suitability of events before they appear in the calendar.</p>
 
     <h2>Subject matter</h2>