integration-astro-hybrid

Automate PostHog analytics integration for Astro Hybrid apps with SSR.

58|5|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/PostHog/skills --skill integration-astro-hybrid
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integration-astro-hybrid
Source: https://github.com/PostHog/skills/tree/main/skills/posthog/integration/skills/astro-hybrid
Command: npx skills add https://github.com/PostHog/skills --skill integration-astro-hybrid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

PostHog analytics integration for Astro Hybrid apps requires coordinating client-side tracking with selective server-side event capture across static and SSR pages.

Core Features & Use Cases

  • Hybrid rendering guidelines: most pages prerendered, some SSR-enabled for API routes, with unified PostHog identity.
  • Server-side and client-side event tracking: captures events from both environments and ties sessions via headers.
  • Error tracking and identify support across frontend and backend.

Quick Start

Follow the hybrid workflow to enable static rendering by default and selectively enable SSR on pages, then implement client and server PostHog tracking following the example.

Frequently Asked Questions about integration-astro-hybrid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add PostHog analytics to an Astro hybrid rendering app?

Astro hybrid rendering uses static generation by default while selectively enabling server-side rendering (SSR) for specific pages or API routes. This approach allows you to prerender most pages while dynamically processing server-side PostHog analytics events where needed.

Can I track server-side events with PostHog in Astro API routes?

Yes, you can track server-side events in Astro API routes. The integration guides capturing events from the server environment and tying sessions via headers to maintain a unified PostHog identity across both static and SSR pages.

How do I manage environment variables for PostHog in an Astro project?

Managing environment variables for PostHog in an Astro project involves setting up your API keys for both client and server usage. The integration provides guidelines for proper environment setup, ensuring the singleton PostHog client can securely access credentials across frontend and backend contexts.

Does PostHog error tracking work across both frontend and backend in Astro?

Yes, PostHog error tracking works across both frontend and backend in Astro. The integration supports error tracking and user identification across both environments, ensuring exceptions and events are captured consistently within your hybrid rendering setup.

What are the limitations of using PostHog with Astro static versus SSR pages?

A key limitation when using PostHog with Astro static pages is the inability to capture server-side events without SSR enabled. You must selectively opt into server-side rendering on specific pages to ensure backend event tracking and API route integration function correctly.