","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-7","name":"View Transitions with custom animations","description":"Code example","text":"---\nimport { ViewTransitions } from 'astro:transitions';\n---\n\n \n\n\n\n\n

Content with custom transition

","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-8","name":"Persistent state across View Transitions","description":"Code example","text":"---\nimport VideoPlayer from '../components/VideoPlayer.astro';\n---\n\n","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-9","name":"API routes with database queries","description":"Code example","text":"// src/pages/api/users/[id].ts\nimport { db } from '../../../db';\n\nexport async function GET({ params, request }) {\n const { id } = params;\n const user = await db.user.findUnique({ where: { id } });\n \n if (!user) {\n return new Response(null, { status: 404 });\n }\n \n return new Response(JSON.stringify(user), {\n headers: { 'Content-Type': 'application/json' }\n });\n}\n\nexport async function PUT({ params, request }) {\n const { id } = params;\n const data = await request.json();\n const updated = await db.user.update({ where: { id }, data });\n \n return new Response(JSON.stringify(updated));\n}","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-10","name":"Streaming SSR responses","description":"Code example","text":"// src/pages/feed.astro\n---\nexport const prerender = false;\n\nasync function* generateFeed() {\n for (let i = 1; i <= 10; i++) {\n const posts = await fetchPage(i);\n yield posts;\n await new Promise(r => setTimeout(r, 100));\n }\n}\n\nconst stream = generateFeed();\n---\n

\n {await Array.fromAsync(stream).then(pages => \n pages.flat().map(post =>

{post.title}

)\n )}\n

","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-11","name":"Edge function deployment (Cloudflare)","description":"Code example","text":"// astro.config.mjs\nimport cloudflare from '@astrojs/cloudflare';\n\nexport default defineConfig({\n output: 'server',\n adapter: cloudflare({ mode: 'directory' }),\n vite: {\n ssr: {\n external: ['node:async_hooks']\n }\n }\n});","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-12","name":"Build performance: concurrency optimization","description":"Code example","text":"// astro.config.mjs\nexport default defineConfig({\n build: {\n concurrency: 4, // Optimal for most systems\n inlineStylesheets: 'auto'\n },\n vite: {\n build: {\n rollupOptions: {\n output: {\n manualChunks: (id) => {\n if (id.includes('node_modules')) {\n return 'vendor';\n }\n }\n }\n }\n }\n }\n});","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-13","name":"Memory optimization for large builds","description":"Code example","text":"// package.json\n{\n \"scripts\": {\n \"build\": \"NODE_OPTIONS='--max-old-space-size=8192' astro build\",\n \"build:fast\": \"NODE_OPTIONS='--max-old-space-size=8192' astro build --concurrency 4\"\n }\n}","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-14","name":"Custom image loader for remote images","description":"Code example","text":"// astro.config.mjs\nexport default defineConfig({\n image: {\n service: {\n entrypoint: './src/imageService.ts',\n config: {\n baseUrl: 'https://cdn.example.com'\n }\n }\n }\n});\n\n// src/imageService.ts\nexport default {\n getURL(src, options) {\n return `${options.baseUrl}/${src}?w=${options.width}&q=${options.quality}`;\n }\n};","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-15","name":"Dynamic OG images with Satori","description":"Code example","text":"// src/pages/og/[slug].png.ts\nimport satori from 'satori';\nimport { html } from 'satori-html';\nimport sharp from 'sharp';\n\nexport async function GET({ params }) {\n const svg = await satori(\n html`

${params.slug}

`,\n { width: 1200, height: 630 }\n );\n \n const png = await sharp(Buffer.from(svg)).png().toBuffer();\n \n return new Response(png, {\n headers: { 'Content-Type': 'image/png' }\n });\n}","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-16","name":"Advanced error handling middleware","description":"Code example","text":"import { defineMiddleware } from 'astro:middleware';\n\nexport const onRequest = defineMiddleware(async (context, next) => {\n try {\n const response = await next();\n return response;\n } catch (error) {\n console.error('Request failed:', error);\n \n if (error.message.includes('database')) {\n return new Response('Database error', { status: 503 });\n }\n \n return new Response('Internal error', { status: 500 });\n }\n});","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-17","name":"Rate limiting middleware","description":"Code example","text":"import { defineMiddleware } from 'astro:middleware';\nimport { RateLimiterMemory } from 'rate-limiter-flexible';\n\nconst limiter = new RateLimiterMemory({\n points: 100,\n duration: 60\n});\n\nexport const onRequest = defineMiddleware(async (context, next) => {\n const ip = context.clientAddress;\n \n try {\n await limiter.consume(ip);\n return next();\n } catch {\n return new Response('Rate limit exceeded', { \n status: 429,\n headers: { 'Retry-After': '60' }\n });\n }\n});","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-18","name":"Internationalization with SSR","description":"Code example","text":"// astro.config.mjs\nexport default defineConfig({\n i18n: {\n defaultLocale: 'en',\n locales: ['en', 'fr', 'de', 'es'],\n routing: {\n prefixDefaultLocale: false\n }\n }\n});\n\n// src/middleware.ts\nexport const onRequest = defineMiddleware((context, next) => {\n const locale = context.preferredLocale || 'en';\n context.locals.locale = locale;\n return next();\n});","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-19","name":"WebSocket integration for real-time features","description":"Code example","text":"// src/pages/api/ws.ts\nexport function GET() {\n // Upgrade HTTP to WebSocket\n const { socket, response } = Astro.upgradeWebSocket();\n \n socket.addEventListener('message', (event) => {\n const data = JSON.parse(event.data);\n // Broadcast to all clients\n socket.send(JSON.stringify({ type: 'update', data }));\n });\n \n return response;\n}","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-20","name":"Partial prerendering for hybrid apps","description":"Code example","text":"// src/pages/products/[id].astro\nexport const prerender = false; // Dynamic\n\n// src/pages/about.astro\nexport const prerender = true; // Static\n\n// astro.config.mjs\nexport default defineConfig({\n output: 'hybrid', // Default to static, opt-in to SSR\n adapter: vercel({\n edgeMiddleware: true\n })\n});","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-21","name":"Database connection pooling","description":"Code example","text":"// src/db.ts\nimport { Pool } from 'pg';\n\nlet pool: Pool;\n\nexport function getDb() {\n if (!pool) {\n pool = new Pool({\n host: import.meta.env.DB_HOST,\n database: import.meta.env.DB_NAME,\n max: 20,\n idleTimeoutMillis: 30000,\n connectionTimeoutMillis: 2000\n });\n }\n return pool;\n}\n\n// Use in API routes\nimport { getDb } from '../../../db';\nconst db = getDb();\nconst result = await db.query('SELECT * FROM users');","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-22","name":"Smart asset optimization","description":"Code example","text":"// astro.config.mjs\nimport compress from 'astro-compress';\n\nexport default defineConfig({\n integrations: [\n compress({\n CSS: true,\n HTML: {\n removeAttributeQuotes: false,\n collapseWhitespace: true\n },\n Image: true,\n JavaScript: true,\n SVG: true\n })\n ],\n build: {\n assets: '_astro',\n inlineStylesheets: 'auto'\n }\n});","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-23","name":"Advanced Content Collections with relationships","description":"Code example","text":"// src/content/config.ts\nimport { defineCollection, reference, z } from 'astro:content';\n\nconst authors = defineCollection({\n type: 'data',\n schema: z.object({\n name: z.string(),\n bio: z.string()\n })\n});\n\nconst posts = defineCollection({\n type: 'content',\n schema: z.object({\n title: z.string(),\n author: reference('authors'),\n relatedPosts: z.array(reference('posts')).optional()\n })\n});\n\nexport const collections = { authors, posts };","inLanguage":"typescript"},{"@type":"CreativeWork","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#snippet-24","name":"Custom dev toolbar app","description":"Code example","text":"// src/toolbar-app.ts\nimport type { DevToolbarApp } from 'astro';\n\nexport default {\n id: 'my-toolbar',\n name: 'Performance Monitor',\n icon: '',\n init(canvas, eventTarget) {\n const button = document.createElement('button');\n button.textContent = 'Check Performance';\n button.onclick = async () => {\n const metrics = await measurePerformance();\n console.log('Metrics:', metrics);\n };\n canvas.appendChild(button);\n }\n} satisfies DevToolbarApp;\n\n// astro.config.mjs\nexport default defineConfig({\n devToolbar: {\n enabled: true\n }\n});","inLanguage":"typescript"}],"keywords":"Astro intermediate cheat sheet, Astro SSR configuration, Astro Content Layer API, Astro middleware tutorial, Astro performance optimization, Astro Server Islands, Astro View Transitions API, Astro SSR vs static, how to optimize Astro build times, Astro with databases, Astro edge deployment, Astro hybrid rendering, Astro, SSR, Performance, TypeScript, Edge Computing","about":[{"@type":"Thing","name":"Astro"},{"@type":"Thing","name":"SSR"},{"@type":"Thing","name":"Performance"},{"@type":"Thing","name":"TypeScript"},{"@type":"Thing","name":"Edge Computing"}]},{"@type":"ItemList","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#topics","name":"Core Concepts - Astro Intermediate Cheat Sheet DATA | SSR Configuration + Performance Optimization Guide","numberOfItems":5,"itemListElement":[{"@type":"ListItem","position":1,"name":"SSR Configuration: Hybrid Rendering","description":"output: 'hybrid' (default SSG) with per-route export const prerender = false for SSR, or output: 'server' (default SSR) with prerender = true for static. Adapters (node, vercel, netlify, cloudflare) handle platform deployment. See Astro SSR vs static examples below","url":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#core-concepts"},{"@type":"ListItem","position":2,"name":"Content Layer API: Advanced Collections","description":"Astro 5.0+ Content Layer replaces frontmatter-only collections. Define loaders in defineCollection() to fetch from APIs, databases, or file systems. Supports remote data with build-time caching, reducing builds from 9000s to 2600s for 340k pages","url":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#core-concepts"},{"@type":"ListItem","position":3,"name":"Astro middleware tutorial: Request Interception","description":"src/middleware.ts with defineMiddleware() intercepts all requests before rendering. Access context.locals to share data, modify responses, implement auth guards. Sequence() chains multiple middlewares in order","url":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#core-concepts"},{"@type":"ListItem","position":4,"name":"Performance optimization: Server Islands","description":"server:defer directive delays non-critical SSR components (user reviews, recommendations) while serving static shell instantly. Reduces TTFB by 60-80%. Combines CDN static speed with dynamic server data in same route","url":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#core-concepts"},{"@type":"ListItem","position":5,"name":"Astro View Transitions API: SPA-like Navigation","description":"Import ViewTransitions in layout for instant page transitions. transition:name links elements across pages, transition:animate customizes effects, transition:persist maintains state. Works without JavaScript fallback","url":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#core-concepts"}]},{"@type":"TechArticle","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#article","headline":"Astro Intermediate Cheat Sheet DATA | SSR Configuration + Performance Optimization Guide","description":"Complete reference guide","image":[{"@type":"ImageObject","url":"https://yourcheatsheet.org/images/astro-intermediate-og","width":1200,"height":630},{"@type":"ImageObject","url":"https://yourcheatsheet.org/images/astro-intermediate-og","width":800,"height":800}],"author":{"@id":"https://yourcheatsheet.org/author/carla-stevens"},"publisher":{"@id":"https://yourcheatsheet.org/about"},"inLanguage":"en-US","isAccessibleForFree":true,"keywords":"Astro intermediate cheat sheet, Astro SSR configuration, Astro Content Layer API, Astro middleware tutorial, Astro performance optimization, Astro Server Islands, Astro View Transitions API, Astro SSR vs static, how to optimize Astro build times, Astro with databases, Astro edge deployment, Astro hybrid rendering, Astro, SSR, Performance, TypeScript, Edge Computing","speakable":{"@type":"SpeakableSpecification","cssSelector":["#top","#quick-start","#when-to-use","#core-concepts","#snippets","#master-commands","#production-examples","#production-fixes","#pitfalls","#troubleshooting","#elite-pro-hack","#workflows","#benchmark","#resources"]},"potentialAction":[{"@type":"ReadAction","target":{"@type":"EntryPoint","urlTemplate":"https://yourcheatsheets.org/cheatsheets/astro-intermediate"}},{"@type":"DownloadAction","name":"Download PDF","target":{"@type":"EntryPoint","urlTemplate":"https://yourcheatsheets.org/downloads/astro-intermediate.pdf"}}]},{"@type":"BreadcrumbList","@id":"https://yourcheatsheets.org/cheatsheets/astro-intermediate#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://yourcheatsheet.org"},{"@type":"ListItem","position":2,"name":"Web-Development","item":"https://yourcheatsheet.org/categories/Web-Development"},{"@type":"ListItem","position":3,"name":"Astro Intermediate Cheat Sheet DATA | SSR Configuration + Performance Optimization Guide","item":"https://yourcheatsheets.org/cheatsheets/astro-intermediate"}]}]}

Quick Start with Astro Intermediate

Production-ready compilation flags and build commands

SSR Configuration: QUICK START (5s)

Copy → Paste → Live

npx astro add node
# Edit astro.config.mjs:
export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' })
});

✓ SSR enabled with Node adapter
✓ Server running with dynamic routing
✓ Access Astro.clientAddress, Astro.request

Learn more in Astro middleware authentication section

⚡ 5s Setup

When to Use Astro Intermediate

Decision matrix per scegliere la tecnologia giusta

IDEAL USE CASES

Hybrid rendering applications mixing static pages with dynamic SSR routes for personalization and real-time data
Content-heavy sites with 10k+ pages requiring Content Layer API for optimized build performance (3-5x faster builds)
E-commerce platforms needing Server Islands for mixing static product catalogs with dynamic pricing and inventory

AVOID FOR

Simple static blogs without dynamic requirements - use basic SSG instead for simplicity
Real-time collaborative apps requiring constant WebSocket connections - consider Next.js or Remix
Projects where team lacks SSR/middleware experience - start with beginner Astro patterns first

Core Concepts of Astro Intermediate

Production-ready compilation flags and build commands

SSR Configuration: Hybrid Rendering

output: 'hybrid' (default SSG) with per-route export const prerender = false for SSR, or output: 'server' (default SSR) with prerender = true for static. Adapters (node, vercel, netlify, cloudflare) handle platform deployment. See Astro SSR vs static examples below

⚠️ Common Error

Adapter not installed when using output: 'server'

✓ Solution

npx astro add node (or vercel/netlify). Updates astro.config.mjs automatically

+85% deployment flexibility

Content Layer API: Advanced Collections

Astro 5.0+ Content Layer replaces frontmatter-only collections. Define loaders in defineCollection() to fetch from APIs, databases, or file systems. Supports remote data with build-time caching, reducing builds from 9000s to 2600s for 340k pages

⚠️ Common Error

Using old getCollection() without loader

✓ Solution

Migrate to loader pattern: defineCollection({ loader: async () => fetchData() })

+70% faster builds for large sites

Astro middleware tutorial: Request Interception

src/middleware.ts with defineMiddleware() intercepts all requests before rendering. Access context.locals to share data, modify responses, implement auth guards. Sequence() chains multiple middlewares in order

+100% security implementation ease

Auth check in 2-5ms per request

Performance optimization: Server Islands

server:defer directive delays non-critical SSR components (user reviews, recommendations) while serving static shell instantly. Reduces TTFB by 60-80%. Combines CDN static speed with dynamic server data in same route

⚠️ Common Error

Using server:defer without SSR adapter

✓ Solution

Requires output: 'server' or 'hybrid' with adapter installed

+75% faster Time to First Byte

Astro View Transitions API: SPA-like Navigation

Import ViewTransitions in layout <head> for instant page transitions. transition:name links elements across pages, transition:animate customizes effects, transition:persist maintains state. Works without JavaScript fallback

+53% user session duration

Astro Intermediate Code Snippets

Copy-paste ready code blocks with real-world use cases

TYPESCRIPT

Enable SSR with Node adapter

// astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' })
});

Output

All routes server-rendered by default

TYPESCRIPT

Hybrid rendering configuration

// astro.config.mjs
export default defineConfig({
  output: 'hybrid',
  adapter: vercel()
});

// src/pages/dashboard.astro
export const prerender = false; // This page uses SSR
---
<h1>Welcome {Astro.locals.user.name}</h1>

Output

Static site with selective SSR routes

TYPESCRIPT

Content Layer API with remote data

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const products = defineCollection({
  loader: async () => {
    const res = await fetch('https://api.shop.com/products');
    const data = await res.json();
    return data.map(p => ({
      id: p.id,
      ...p
    }));
  },
  schema: z.object({
    title: z.string(),
    price: z.number()
  })
});

export const collections = { products };

Output

API data loaded at build time, type-safe queries

TYPESCRIPT

Content Layer with caching optimization

import { defineCollection } from 'astro:content';
import NodeCache from 'node-cache';

const cache = new NodeCache({ stdTTL: 3600 });

const posts = defineCollection({
  loader: async () => {
    const cached = cache.get('posts');
    if (cached) return cached;
    
    const data = await fetch('https://cms.example.com/posts').then(r => r.json());
    cache.set('posts', data);
    return data;
  }
});

Output

Cached API calls, 90% faster incremental builds

TYPESCRIPT

Authentication middleware pattern

// src/middleware.ts
import { defineMiddleware } from 'astro:middleware';
import { verifyToken } from './auth';

export const onRequest = defineMiddleware(async (context, next) => {
  const token = context.cookies.get('auth_token')?.value;
  
  if (!token && context.url.pathname.startsWith('/dashboard')) {
    return context.redirect('/login');
  }
  
  if (token) {
    const user = await verifyToken(token);
    context.locals.user = user;
  }
  
  return next();
});

Output

Protected routes with user context

TYPESCRIPT

Chained middleware with sequence

import { sequence } from 'astro:middleware';
import { authMiddleware } from './middleware/auth';
import { loggingMiddleware } from './middleware/logging';
import { rateLimitMiddleware } from './middleware/rateLimit';

export const onRequest = sequence(
  loggingMiddleware,
  rateLimitMiddleware,
  authMiddleware
);

Output

Multiple middlewares executed in order

TYPESCRIPT

Server Islands for deferred rendering

---
import UserReviews from '../components/UserReviews.astro';
import ProductInfo from '../components/ProductInfo.astro';
---
<ProductInfo />
<!-- Reviews load after static shell -->
<UserReviews server:defer />

<script>
  document.addEventListener('astro:server:defer', () => {
    console.log('Deferred component loaded');
  });
</script>

Output

Static shell loads instantly, dynamic content streams

TYPESCRIPT

View Transitions with custom animations

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
  <ViewTransitions />
</head>

<style>
  @keyframes fadeSlide {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  ::view-transition-old(slide) {
    animation: 0.3s ease-out fadeSlide reverse;
  }
  ::view-transition-new(slide) {
    animation: 0.3s ease-out fadeSlide;
  }
</style>

<div transition:name="slide">
  <h1>Content with custom transition</h1>
</div>

Output

Smooth page transitions with custom CSS animations

TYPESCRIPT

Persistent state across View Transitions

---
import VideoPlayer from '../components/VideoPlayer.astro';
---
<!-- Video keeps playing during page transition -->
<VideoPlayer transition:persist transition:name="video-player" />

Output

Component state maintained across navigation

TYPESCRIPT

API routes with database queries

// src/pages/api/users/[id].ts
import { db } from '../../../db';

export async function GET({ params, request }) {
  const { id } = params;
  const user = await db.user.findUnique({ where: { id } });
  
  if (!user) {
    return new Response(null, { status: 404 });
  }
  
  return new Response(JSON.stringify(user), {
    headers: { 'Content-Type': 'application/json' }
  });
}

export async function PUT({ params, request }) {
  const { id } = params;
  const data = await request.json();
  const updated = await db.user.update({ where: { id }, data });
  
  return new Response(JSON.stringify(updated));
}

Output

RESTful API with Prisma/Drizzle

TYPESCRIPT

Streaming SSR responses

// src/pages/feed.astro
---
export const prerender = false;

async function* generateFeed() {
  for (let i = 1; i <= 10; i++) {
    const posts = await fetchPage(i);
    yield posts;
    await new Promise(r => setTimeout(r, 100));
  }
}

const stream = generateFeed();
---
<div>
  {await Array.fromAsync(stream).then(pages => 
    pages.flat().map(post => <div>{post.title}</div>)
  )}
</div>

Output

Progressive content streaming to client

TYPESCRIPT

Edge function deployment (Cloudflare)

// astro.config.mjs
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare({ mode: 'directory' }),
  vite: {
    ssr: {
      external: ['node:async_hooks']
    }
  }
});

Output

Deploy to Cloudflare Workers at edge

TYPESCRIPT

Build performance: concurrency optimization

// astro.config.mjs
export default defineConfig({
  build: {
    concurrency: 4, // Optimal for most systems
    inlineStylesheets: 'auto'
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules')) {
              return 'vendor';
            }
          }
        }
      }
    }
  }
});

Output

3.6x faster builds (35 → 127 pages/sec)

TYPESCRIPT

Memory optimization for large builds

// package.json
{
  "scripts": {
    "build": "NODE_OPTIONS='--max-old-space-size=8192' astro build",
    "build:fast": "NODE_OPTIONS='--max-old-space-size=8192' astro build --concurrency 4"
  }
}

Output

8GB Node memory, prevents OOM errors

TYPESCRIPT

Custom image loader for remote images

// astro.config.mjs
export default defineConfig({
  image: {
    service: {
      entrypoint: './src/imageService.ts',
      config: {
        baseUrl: 'https://cdn.example.com'
      }
    }
  }
});

// src/imageService.ts
export default {
  getURL(src, options) {
    return `${options.baseUrl}/${src}?w=${options.width}&q=${options.quality}`;
  }
};

Output

Custom CDN image transformations

TYPESCRIPT

Dynamic OG images with Satori

// src/pages/og/[slug].png.ts
import satori from 'satori';
import { html } from 'satori-html';
import sharp from 'sharp';

export async function GET({ params }) {
  const svg = await satori(
    html`<div style="display: flex; width: 1200px; height: 630px; background: #1a1a1a; color: white; align-items: center; justify-content: center;">
      <h1 style="font-size: 80px;">${params.slug}</h1>
    </div>`,
    { width: 1200, height: 630 }
  );
  
  const png = await sharp(Buffer.from(svg)).png().toBuffer();
  
  return new Response(png, {
    headers: { 'Content-Type': 'image/png' }
  });
}

DefaultEmpty in static

AlternativeAstro.props for component data

Caveat

⚠️ Type in src/env.d.ts

Production Examples in Astro Intermediate

Real-world applications with measured performance metrics

Astro SSR vs static: E-commerce with hybrid rendering

LCP 0.8s (static), TTFB 45ms (SSR), 99.5% uptime

Product catalog (static) + user cart/checkout (SSR) for optimal performance and personalization

Build Command

// astro.config.mjs
export default defineConfig({
  output: 'hybrid',
  adapter: vercel({ edgeMiddleware: true })
});

// src/pages/products/[id].astro (STATIC)
export const prerender = true;
export async function getStaticPaths() {
  const products = await getCollection('products');
  return products.map(p => ({ params: { id: p.id } }));
}

// src/pages/cart.astro (SSR)
export const prerender = false;
---
const cart = await fetchUserCart(Astro.locals.userId);
---
<div>{cart.items.length} items</div>

✅ Static products cached at CDN, dynamic cart per user

Astro Content Layer tutorial: Headless CMS integration

Build time: 45s (vs 180s without Content Layer), 75% improvement

WordPress/Contentful loader with incremental builds and caching

Build Command

// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { createClient } from 'contentful';

const client = createClient({
  space: process.env.CONTENTFUL_SPACE,
  accessToken: process.env.CONTENTFUL_TOKEN
});

const posts = defineCollection({
  loader: async () => {
    const entries = await client.getEntries({
      content_type: 'blogPost',
      limit: 1000
    });
    
    return entries.items.map(item => ({
      id: item.sys.id,
      slug: item.fields.slug,
      title: item.fields.title,
      content: item.fields.content,
      publishedAt: new Date(item.sys.createdAt)
    }));
  },
  schema: z.object({
    slug: z.string(),
    title: z.string(),
    content: z.string(),
    publishedAt: z.date()
  })
});

export const collections = { posts };

Astro middleware authentication: JWT + database

Auth check: 3ms avg, 99.99% security, zero session leaks

Protected routes with session management and role-based access

Build Command

// src/middleware.ts
import { defineMiddleware } from 'astro:middleware';
import { verifyJWT } from './auth';
import { getDb } from './db';

const PROTECTED_ROUTES = ['/dashboard', '/admin', '/profile'];

export const onRequest = defineMiddleware(async (context, next) => {
  const token = context.cookies.get('session')?.value;
  const isProtected = PROTECTED_ROUTES.some(r => 
    context.url.pathname.startsWith(r)
  );
  
  if (isProtected && !token) {
    return context.redirect('/login');
  }
  
  if (token) {
    try {
      const payload = await verifyJWT(token);
      const db = getDb();
      const user = await db.user.findUnique({ 
        where: { id: payload.userId },
        include: { role: true }
      });
      
      context.locals.user = user;
      context.locals.isAdmin = user.role.name === 'admin';
    } catch (error) {
      context.cookies.delete('session');
      return context.redirect('/login');
    }
  }
  
  return next();
});

Astro performance optimization: Large site build tuning

Memory: 8GB, CPU: 16 cores utilized, 70% faster than baseline

340k pages optimized from 9642s to 2659s build time (3.6x faster)

Build Command

// package.json
{
  "scripts": {
    "build": "NODE_OPTIONS='--max-old-space-size=8192' astro build"
  }
}

// astro.config.mjs
export default defineConfig({
  build: {
    concurrency: 4,
    inlineStylesheets: 'auto'
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules')) return 'vendor';
            if (id.includes('components')) return 'components';
          }
        }
      },
      chunkSizeWarningLimit: 1000
    },
    ssr: {
      noExternal: ['date-fns']
    }
  },
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp'
    }
  }
});

Astro Server Islands guide: Dynamic pricing with static catalog

LCP: 0.6s, CLS: 0.02, 85% faster than full SSR

Product pages load instantly (static), prices stream from API (SSR deferred)

Build Command

// src/pages/products/[id].astro
---
import ProductInfo from '../../components/ProductInfo.astro';
import DynamicPrice from '../../components/DynamicPrice.astro';
import Reviews from '../../components/Reviews.astro';

export const prerender = true;
export async function getStaticPaths() {
  const products = await getCollection('products');
  return products.map(p => ({ params: { id: p.id }, props: { product: p } }));
}

const { product } = Astro.props;
---
<main>
  <ProductInfo product={product} />
  
  <!-- Deferred: loads after static shell -->
  <DynamicPrice server:defer productId={product.id} />
  <Reviews server:defer productId={product.id} />
</main>

// src/components/DynamicPrice.astro
---
interface Props { productId: string; }
const { productId } = Astro.props;

const priceData = await fetch(`https://api.pricing.com/${productId}`, {
  headers: { 'Authorization': import.meta.env.PRICING_API_KEY }
}).then(r => r.json());
---
<div class="price">
  <span class="current">${priceData.current}</span>
  {priceData.discount && <span class="original">${priceData.original}</span>}
</div>

Astro View Transitions API: Portfolio with custom animations

Session duration +53%, bounce rate -28%, user engagement +41%

Smooth project navigation with morphing transitions and state persistence

Build Command

// src/layouts/Layout.astro
---
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
  <ViewTransitions />
  <style>
    @keyframes morphProject {
      from { 
        transform: scale(0.9) translateY(20px);
        opacity: 0;
      }
      to { 
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }
    
    ::view-transition-old(project-detail) {
      animation: 0.4s ease-out morphProject reverse;
    }
    ::view-transition-new(project-detail) {
      animation: 0.4s ease-out morphProject;
    }
  </style>
</head>
<body>
  <slot />
</body>
</html>

// src/pages/projects/[slug].astro
---
const { slug } = Astro.params;
const project = await getProject(slug);
---
<article transition:name={`project-detail-${slug}`}>
  <img src={project.image} alt={project.title} transition:name={`project-img-${slug}`} />
  <h1 transition:name={`project-title-${slug}`}>{project.title}</h1>
  <div set:html={project.content} />
</article>

Status

Production-tested solution

Astro Intermediate Common Pitfalls & Fixes

Using SSR features without adapter
Frequency: 71%
Cause: Setting output: 'server' but forgetting to install adapter
45 min debugging build errors
Avg fix time
Fix
npx astro add node/vercel/netlify/cloudflare immediately after changing output
✓ ✅ SSR works with proper adapter
Forgetting prerender = false in hybrid mode
Frequency: 63%
Cause: output: 'hybrid' defaults to static, SSR routes need explicit opt-in
30 min wondering why dynamic features don't work
Avg fix time
Fix
Add export const prerender = false; to each SSR page
✓ ✅ Route correctly server-rendered
Middleware blocking all requests
Frequency: 58%
Cause: Not calling next() or returning Response in middleware
1 hour debugging hanging requests
Avg fix time
Fix
Always return next() to continue request chain or return Response to short-circuit
✓ ✅ Requests flow through middleware correctly
Content Layer loader not async
Frequency: 52%
Cause: Defining loader without async or not returning Promise
40 min type errors and build failures
Avg fix time
Fix
loader: async () => { return await fetchData(); } - must be async function
✓ ✅ Collections load correctly
Missing id field in Content Layer entries
Frequency: 48%
Cause: Loader returning objects without unique 'id' field
25 min collection errors
Avg fix time
Fix
Every entry must have id: return data.map(item => ({ id: item.slug, ...item }))
✓ ✅ All entries queryable
ViewTransitions added to individual pages instead of layout
Frequency: 45%
Cause: Adding <ViewTransitions /> to each page instead of shared layout
20 min inconsistent transitions
Avg fix time
Fix
Add once to layout <head>, automatically applies to all pages using that layout
✓ ✅ Smooth transitions across entire site
Server Islands in static build
Frequency: 41%
Cause: Using server:defer with output: 'static'
35 min build errors
Avg fix time
Fix
Server Islands require output: 'server' or 'hybrid' with SSR adapter
✓ ✅ Deferred components stream correctly
Not typing Astro.locals
Frequency: 38%
Cause: Setting context.locals in middleware without TypeScript types
15 min type errors in pages
Avg fix time
Fix
In src/env.d.ts: declare namespace App { interface Locals { user: User } }
✓ ✅ Type-safe access to locals
Overusing SSR for static content
Frequency: 35%
Cause: Setting all routes to SSR when most could be static
Permanent performance impact
Avg fix time
Fix
Use output: 'hybrid' and only set prerender = false for truly dynamic routes
✓ ✅ 80% of routes cached at CDN
Build concurrency too high
Frequency: 32%
Cause: Setting concurrency = CPU_COUNT causing resource contention
Slower builds, OOM errors
Avg fix time
Fix
Start with concurrency: 4, test 2/6/8 based on system. 4 is optimal for most
✓ ✅ Optimal build speed
Duplicate transition:name values
Frequency: 28%
Cause: Using same transition:name on multiple elements in a page
30 min broken transitions
Avg fix time
Fix
Make unique: transition:name={`hero-${id}`} - must be unique per page
✓ ✅ Smooth element morphing
Content Layer without caching expensive API calls
Frequency: 25%
Cause: Fetching same data on every build without cache
Permanent: slow builds, high API costs
Avg fix time
Fix
Implement caching layer with TTL for API responses in loader
✓ ✅ 90% faster builds, 95% lower API usage

Verification

✓TypeScript autocomplete and type checking works

Elite Pro Hacks For Astro Intermediate

Advanced performance tips and optimizations for Astro Intermediate

Performance optimization: Parallel Content Layer loaders

Code

// src/content/config.ts
const [posts, products, authors] = await Promise.all([
  fetch('https://cms.com/posts').then(r => r.json()),
  fetch('https://api.com/products').then(r => r.json()),
  fetch('https://api.com/authors').then(r => r.json())
]);

export const collections = {
  posts: defineCollection({
    loader: async () => posts
  }),
  products: defineCollection({
    loader: async () => products
  })
};

Improvement+80% faster collection loading

Caveat

⚠️ Watch API rate limits, implement retry logic

SSR Configuration: Smart prerendering with middleware hints

Code

// src/middleware.ts
export const onRequest = defineMiddleware((context, next) => {
  // Hint to CDN about cacheability
  const response = next();
  
  if (context.url.pathname.startsWith('/blog/')) {
    response.headers.set('Cache-Control', 'public, max-age=3600, s-maxage=86400');
  } else if (context.url.pathname.startsWith('/dashboard/')) {
    response.headers.set('Cache-Control', 'private, no-cache');
  }
  
  return response;
});

Improvement+95% cache hit ratio for static-ish content

Caveat

⚠️ Test cache invalidation strategy thoroughly

Astro middleware patterns: Zero-downtime deployment with version headers

Code

// src/middleware.ts
const DEPLOYMENT_VERSION = process.env.DEPLOYMENT_VERSION || 'unknown';

export const onRequest = defineMiddleware((context, next) => {
  const response = next();
  response.headers.set('X-Deployment-Version', DEPLOYMENT_VERSION);
  response.headers.set('X-Node-Version', process.version);
  return response;
});

// Client-side version checking
if (document.currentScript) {
  const currentVersion = document.currentScript.dataset.version;
  setInterval(async () => {
    const res = await fetch('/api/health');
    const serverVersion = res.headers.get('X-Deployment-Version');
    if (serverVersion !== currentVersion) {
      // Notify user of available update
    }
  }, 60000);
}

Improvement+100% deployment visibility, proactive user refresh

Caveat

⚠️ Don't force refresh, let user choose

Content Layer API: Incremental regeneration with webhooks

Code

// src/pages/api/revalidate.ts
import { revalidateCollection } from 'astro:content';

export async function POST({ request }) {
  const signature = request.headers.get('X-Webhook-Signature');
  const body = await request.json();
  
  // Verify webhook signature
  if (!verifySignature(signature, body)) {
    return new Response('Unauthorized', { status: 401 });
  }
  
  // Revalidate specific collection
  await revalidateCollection('posts');
  
  return new Response(JSON.stringify({ success: true }));
}

// Configure in CMS webhook settings:
// POST https://yoursite.com/api/revalidate
// On: Content Published, Content Updated

Improvement+100% content freshness without full rebuilds

Caveat

⚠️ Requires SSR mode and proper webhook security

Astro View Transitions: Predictive prefetching

Code

// src/components/PrefetchLinks.astro
---
import { prefetch } from 'astro:transitions/client';
---
<script>
  // Prefetch on hover (200ms delay)
  let prefetchTimeout;
  document.addEventListener('mouseover', (e) => {
    const link = e.target.closest('a[href^="/"]');
    if (!link) return;
    
    clearTimeout(prefetchTimeout);
    prefetchTimeout = setTimeout(() => {
      prefetch(link.href, { with: 'fetch' });
    }, 200);
  });
  
  // Prefetch visible links in viewport
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const link = entry.target;
        prefetch(link.href, { with: 'fetch' });
        observer.unobserve(link);
      }
    });
  }, { rootMargin: '200px' });
  
  document.querySelectorAll('a[data-prefetch]').forEach(link => {
    observer.observe(link);
  });
</script>

Improvement+85% perceived navigation speed, instant page loads

Caveat

⚠️ Monitor bandwidth usage on mobile networks

Astro build optimization: Distributed builds with caching

Code

// .github/workflows/deploy.yml
name: Deploy
on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        chunk: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      
      - name: Cache dependencies
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      
      - name: Cache Astro build
        uses: actions/cache@v3
        with:
          path: .astro
          key: astro-${{ github.sha }}
          restore-keys: astro-
      
      - run: npm ci
      - run: npm run build -- --chunk ${{ matrix.chunk }}
      
      - uses: actions/upload-artifact@v3
        with:
          name: dist-${{ matrix.chunk }}
          path: dist/
  
  merge:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/download-artifact@v3
      - run: ./merge-chunks.sh
      - run: ./deploy.sh

Improvement+75% faster CI/CD builds via parallelization

Caveat

⚠️ Requires chunk-aware build script implementation

Astro Server Islands: Progressive hydration with priority queue

Code

---
import CriticalFeature from '../components/CriticalFeature.astro';
import MediumFeature from '../components/MediumFeature.astro';
import LowFeature from '../components/LowFeature.astro';
---
<!-- Immediate: Critical above-fold -->
<CriticalFeature server:defer="immediate" />

<!-- High priority: Load in 100ms -->
<MediumFeature server:defer="high" />

<!-- Low priority: Load when idle -->
<LowFeature server:defer="low" />

<script>
  // Custom priority loader
  const priorities = {
    immediate: 0,
    high: 100,
    low: 2000
  };
  
  document.querySelectorAll('[server\\:defer]').forEach(el => {
    const priority = el.getAttribute('server:defer');
    const delay = priorities[priority] || 1000;
    
    setTimeout(() => {
      el.setAttribute('data-hydrate', 'true');
    }, delay);
  });
</script>

Improvement+60% better perceived performance, optimized loading sequence

Caveat

⚠️ Test on slow 3G networks to validate priorities

Astro Intermediate Production Workflows

Complete CI/CD pipelines from prototype to production deployment for Astro Intermediate

Dev→Prod: SSR deployment with Vercel

Step 1Project created with Vercel adapter

Create Astro project and enable SSR

npm create astro@latest my-ssr-app
cd my-ssr-app
npx astro add vercel

✅ astro.config.mjs shows adapter: vercel()

Step 2Hybrid mode: static by default, SSR opt-in

Configure hybrid rendering

// astro.config.mjs
export default defineConfig({
  output: 'hybrid',
  adapter: vercel({ edgeMiddleware: true })
});

✅ Config file updated

Step 3Middleware intercepts all requests

Add authentication middleware

// src/middleware.ts
import { defineMiddleware } from 'astro:middleware';
export const onRequest = defineMiddleware(async (context, next) => {
  const token = context.cookies.get('session')?.value;
  if (token) {
    context.locals.user = await verifyToken(token);
  }
  return next();
});

✅ context.locals.user available in pages

Step 4Mixed rendering modes

Create SSR and static routes

// src/pages/dashboard.astro (SSR)
export const prerender = false;
---
<h1>Welcome {Astro.locals.user.name}</h1>

// src/pages/about.astro (Static)
export const prerender = true;
---
<h1>About Us</h1>

✅ Dashboard is dynamic, about is static

Step 5Production preview at localhost:4321

Test locally

npm run build
npm run preview

✅ Both route types work correctly

Step 6Deployed to production URL

Deploy to Vercel

vercel --prod
# Or: git push (with Vercel GitHub integration)

✅ Site live with SSR and edge functions

✓

✅ Production site: TTFB <100ms, static routes cached at edge

Content Layer: Headless CMS migration

Step 1CMS client library installed

Install CMS SDK

npm install contentful
# or: npm install @wordpress/api-fetch

✅ Package in package.json

Step 2CMS data loaded via Content Layer

Create Content Layer loader

// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { createClient } from 'contentful';

const client = createClient({
  space: process.env.CONTENTFUL_SPACE,
  accessToken: process.env.CONTENTFUL_TOKEN
});

const posts = defineCollection({
  loader: async () => {
    const entries = await client.getEntries({ content_type: 'post' });
    return entries.items.map(item => ({
      id: item.sys.id,
      slug: item.fields.slug,
      title: item.fields.title,
      content: item.fields.content
    }));
  },
  schema: z.object({
    slug: z.string(),
    title: z.string(),
    content: z.string()
  })
});

export const collections = { posts };

✅ Build fetches all posts

Step 3Cached builds, 1-hour TTL

Add caching for faster builds

import NodeCache from 'node-cache';
const cache = new NodeCache({ stdTTL: 3600 });

const posts = defineCollection({
  loader: async () => {
    const cached = cache.get('posts');
    if (cached) return cached;
    
    const entries = await client.getEntries({ content_type: 'post' });
    const data = entries.items.map(...);
    cache.set('posts', data);
    return data;
  }
});

✅ Subsequent builds 90% faster

Step 4Blog pages generated from CMS

Create dynamic routes

// src/pages/blog/[slug].astro
---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<h1>{post.data.title}</h1>
<Content />

✅ All posts accessible at /blog/:slug

✓

✅ CMS content in Astro, type-safe, cached builds

Performance: Build optimization for large sites

Step 1Latest versions installed

Upgrade Node and Astro

nvm install 22
nvm use 22
npm install astro@latest

✅ node -v shows 22.x, astro -v shows 5.x

Step 2Optimal parallelization

Configure build concurrency

// astro.config.mjs
export default defineConfig({
  build: {
    concurrency: 4
  }
});

✅ Build uses 4 concurrent workers

Step 38GB memory allocation

Increase Node memory

// package.json
{
  "scripts": {
    "build": "NODE_OPTIONS='--max-old-space-size=8192' astro build"
  }
}

✅ No OOM errors during build

Step 4Optimized code splitting

Optimize Vite config

// astro.config.mjs
export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules')) return 'vendor';
          }
        }
      }
    }
  }
});

✅ Smaller chunk sizes

Step 5Measure build time

Benchmark build performance

time npm run build

✅ 3-4x faster than baseline

✓

✅ Large site builds in <1 hour, memory stable

Security: Authentication and authorization

Step 1Auth dependencies installed

Install auth library

npm install jsonwebtoken bcrypt

✅ Packages in package.json

Step 2Protected routes with JWT

Create middleware guard

// src/middleware.ts
import { defineMiddleware } from 'astro:middleware';
import jwt from 'jsonwebtoken';

export const onRequest = defineMiddleware(async (context, next) => {
  const token = context.cookies.get('auth')?.value;
  const isProtected = context.url.pathname.startsWith('/admin');
  
  if (isProtected && !token) {
    return context.redirect('/login');
  }
  
  if (token) {
    try {
      const user = jwt.verify(token, process.env.JWT_SECRET);
      context.locals.user = user;
    } catch {
      context.cookies.delete('auth');
      return context.redirect('/login');
    }
  }
  
  return next();
});

✅ /admin redirects without valid token

Step 3Secure login with JWT tokens

Create login API endpoint

// src/pages/api/login.ts
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { getDb } from '../../db';

export async function POST({ request, cookies }) {
  const { email, password } = await request.json();
  const db = getDb();
  
  const user = await db.user.findUnique({ where: { email } });
  if (!user || !await bcrypt.compare(password, user.password)) {
    return new Response(JSON.stringify({ error: 'Invalid credentials' }), { status: 401 });
  }
  
  const token = jwt.sign(
    { userId: user.id, email: user.email },
    process.env.JWT_SECRET,
    { expiresIn: '7d' }
  );
  
  cookies.set('auth', token, {
    httpOnly: true,
    secure: true,
    sameSite: 'lax',
    maxAge: 60 * 60 * 24 * 7
  });
  
  return new Response(JSON.stringify({ success: true }));
}

✅ Users can authenticate, token stored in httpOnly cookie

Step 4Protected admin page

Create protected page

// src/pages/admin/dashboard.astro
---
export const prerender = false;
if (!Astro.locals.user) {
  return Astro.redirect('/login');
}
const { user } = Astro.locals;
---
<h1>Admin Dashboard</h1>
<p>Welcome, {user.email}</p>

✅ Only authenticated users can access

✓

✅ Secure authentication, httpOnly cookies, JWT verification

Monitoring: Performance tracking and error logging

Step 1Sentry and Web Vitals installed

Install monitoring tools

npm install @sentry/astro web-vitals

✅ Packages available

Step 2Error tracking enabled

Configure Sentry integration

// astro.config.mjs
import sentry from '@sentry/astro';

export default defineConfig({
  integrations: [
    sentry({
      dsn: process.env.SENTRY_DSN,
      environment: process.env.NODE_ENV,
      tracesSampleRate: 0.1
    })
  ]
});

✅ Errors sent to Sentry dashboard

Step 3Real-user metrics tracked

Add Web Vitals tracking

// src/layouts/Layout.astro
<script>
  import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';
  
  function sendMetric(metric) {
    fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify(metric),
      headers: { 'Content-Type': 'application/json' }
    });
  }
  
  getCLS(sendMetric);
  getFID(sendMetric);
  getLCP(sendMetric);
  getFCP(sendMetric);
  getTTFB(sendMetric);
</script>

✅ Metrics logged to analytics endpoint

Step 4Metrics forwarded to analytics

Create analytics API endpoint

// src/pages/api/analytics.ts
export async function POST({ request }) {
  const metric = await request.json();
  console.log(`${metric.name}: ${metric.value}ms`);
  
  // Send to analytics service
  await fetch('https://analytics.example.com/metrics', {
    method: 'POST',
    body: JSON.stringify(metric)
  });
  
  return new Response(null, { status: 200 });
}

✅ Performance data collected

✓

✅ Full observability: errors tracked, performance monitored

⚡ Astro hybrid SSR site with Content Layer: 340k pages (real-world case study)

Performance Gain

+262% faster (3.6x speed increase)

Baseline

Standard

Time

9642s build (2.7 hours)

Memory

4GB peak

Throughput

35 pages/sec

Optimized

Enhanced

Time

2659s build (44 minutes)

Memory

8GB allocated, 6.2GB peak

Throughput

127 pages/sec

Overall Gain+262% faster (3.6x speed increase)

🔬

Methodology

Node 22.18, Astro 5.13.3, concurrency: 4, Content Layer with caching, M2 Pro 16GB

Content with custom transition

${params.slug}

On This Page

Quick Start with Astro Intermediate

When to Use Astro Intermediate

IDEAL USE CASES

AVOID FOR

Core Concepts of Astro Intermediate

Astro Intermediate Code Snippets

Mastering Astro Intermediate Commands

output: 'server'

adapter: node()

prerender: false

defineMiddleware()

context.locals

server:defer

ViewTransitions

transition:name

transition:persist

Content Layer loader

reference()

build.concurrency

Astro.clientAddress

Astro.locals

Production Examples in Astro Intermediate

Astro SSR vs static: E-commerce with hybrid rendering

Astro Content Layer tutorial: Headless CMS integration

Astro middleware authentication: JWT + database

Astro performance optimization: Large site build tuning

Astro Server Islands guide: Dynamic pricing with static catalog

Astro View Transitions API: Portfolio with custom animations

Common Production Fixes for Astro Intermediate

Adapter is required for SSR: Cannot use output: 'server' without an adapter

Cannot read Astro.clientAddress: This feature is only available in server mode

Middleware function must call next() or return Response

ViewTransitions not working across pages

Server Islands throw: server:defer can only be used in SSR mode

Build OOM: JavaScript heap out of memory

Content Layer loader returns undefined entries

transition:name conflicts: Multiple elements with same name

Astro Intermediate Common Pitfalls & Fixes

Using SSR features without adapter

Forgetting prerender = false in hybrid mode

Middleware blocking all requests

Content Layer loader not async

Missing id field in Content Layer entries

ViewTransitions added to individual pages instead of layout

Server Islands in static build

Not typing Astro.locals

Overusing SSR for static content

Build concurrency too high

Duplicate transition:name values

Content Layer without caching expensive API calls

Astro Intermediate Troubleshooting Guide

Adapter required for SSR

Middleware not executing

Content Layer entries undefined

ViewTransitions flashing content

Server Islands not deferring

Build memory exhausted

Astro.clientAddress returns undefined

transition:persist not working

Middleware hanging requests

Content Collection schema validation fails

Edge deployment fails

Build slow despite optimization

Cookies not persisting

Type errors with Astro.locals

Elite Pro Hacks For Astro Intermediate

Performance optimization: Parallel Content Layer loaders

SSR Configuration: Smart prerendering with middleware hints

Astro middleware patterns: Zero-downtime deployment with version headers

Content Layer API: Incremental regeneration with webhooks

Astro View Transitions: Predictive prefetching

Astro build optimization: Distributed builds with caching

Astro Server Islands: Progressive hydration with priority queue

Astro Intermediate Production Workflows

Dev→Prod: SSR deployment with Vercel

Create Astro project and enable SSR

Configure hybrid rendering