Saltar al contenido principal

SSR

  • Por defecto Astro está en modo estático
  • Con SSR no se generan las páginas o rutas cuando se hace el build
  • Se configura en astro.config.mjs como server o static
  • Para un comportamiento hibrido se debe especificar con prerender qué componentes deben o no ser SSR

1. Instalar adaptador​

bun astro add node
bun astro add cloudflare

2. Cambiar el output a server​

astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";

import node from "@astrojs/node";

// https://astro.build/config
export default defineConfig({
  output: "server", // <===================
  adapter: node({
    mode: "standalone",
  }),
});

Hibrido​

Para un comportamiento hibrido, dejando algunas páginas en modo server y todo lo demás en static, se debe agregar prerender = false y no es necesario agregar el output = server

API route​

src\pages\api\posts\index.ts
// No es necesario si todo está como output: "server"
export const prerender = false; // <=====================

import type { APIRoute } from "astro";
import { getCollection } from "astro:content";

export const GET: APIRoute = async ({ request, url }) => {
  const posts = await getCollection("blog");

  console.log(url);

  return new Response(JSON.stringify(posts), {
    headers: {
      "Content-Type": "application/json",
    },
  });
};

Página​

src\pages\launch[id].astro
---
import Layout from "../../layouts/Layout.astro";
import { getLatestLaunches, getLaunchBy } from "../../services/spacex";

export const prerender = false; // <===== Habilitar/Deshabilitar SSR

const { id } = Astro.params;

let launch;
if (id) {
  launch = await getLaunchBy({ id });
}
---

<Layout title={`Lanzamiento ${id}`}>
  <h2>Launch #{launch?.flight_number}</h2>
</Layout>

Desinstalar/cambiar adaptador​

  1. Desinstalar adaptador y eliminar referencias en el archivo de configuración
bun uninstall @astrojs/node
astro.config.mjs
import { defineConfig } from "astro/config";

//X import node from "@astrojs/node";

export default defineConfig({
  //X output: "static",
  //X adapter: node({
  //X   mode: "standalone",
  //X }),
});
  1. Instalar nuevo adaptador y verificar cambios en el archivo de configuración
bun astro add cloudflare
astro.config.mjs
import { defineConfig } from "astro/config";

import cloudflare from "@astrojs/cloudflare";

export default defineConfig({
  output: "server", // <==========
  adapter: cloudflare(), // <=====
});