ASTRO INTEGRATION

Capture Astro pages from a server endpoint with a small, secure boundary

Use an Astro API route, action, or deployment worker to call Snapshot Site. Keep the credential server-side and define readiness for pages that mix static HTML with hydrated islands.

Server endpoint
Private call
Islands
Rendered JavaScript
Reproducible
Saved settings
Install:npm install @snapshot-site/snapshot-site
Auth:SNAPSHOT_SITE_API_KEY
Get started for free
Astro server capture flow
Snapshot Site themed Astro screenshot API integration illustration
Good fits
Astro content sites generating social previews
Documentation portals archiving published pages
Hybrid pages with interactive islands
Build or release workflows capturing public routes

Match capture timing to Astro's rendering model

Static HTML may be ready immediately, while client islands, fonts, and third-party widgets can need measured preparation.

1

Server boundary

Keep provider credentials in server-rendered or worker code that cannot be shipped to visitors.

2

Reachable target

Capture a deployed or authorized preview URL rather than assuming a hosted renderer can access localhost.

3

Island readiness

Identify the component that defines completion and use an appropriate wait strategy.

4

Artifact context

Preserve route, build or release identifier, viewport, and request options with each output.

Implementation workflow

Add an Astro capture endpoint

1

Configure the API key in server-only deployment secrets

2

Accept a known route identifier or validate the target URL

3

Call the screenshot endpoint from an Astro API route

4

Store and return a controlled capture record

Astro screenshot API example

TypeScript

Create a server-side API route

The endpoint validates HTTPS and sends a structured screenshot request without exposing the credential.

export async function POST({ request }) {
  const { url } = await request.json();
  const target = new URL(url);

  if (target.protocol !== "https:") {
    return new Response("HTTPS required", { status: 400 });
  }

  const response = await fetch(
    "https://api.prod.ss.snapshot-site.com/api/v1/screenshot",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-snapshotsiteapi-key": import.meta.env.SNAPSHOT_SITE_API_KEY,
      },
      body: JSON.stringify({
        url: target.toString(),
        format: "webp",
        width: 1440,
        height: 900,
        fullSize: true,
      }),
    },
  );

  return new Response(await response.text(), {
    status: response.status,
    headers: { "Content-Type": "application/json" },
  });
}

Astro pages can reach visual readiness at different times

A content page rendered entirely as HTML may be ready as soon as fonts and images settle. A page with client islands, analytics-dependent widgets, or a third-party embed can continue changing. Capture configuration should reflect the page's intended evidence, not merely the framework label.

Create representative fixtures for each rendering pattern. This makes it easier to choose a small readiness window and to detect when an integration changes behavior after a release.

Use deployment identity as context

Screenshots are more useful when tied to a commit, deployment, or content release. Persist that identity alongside route and viewport. A reviewer can then connect a pixel change to the code or content that produced it.

For preview environments, design short-lived access deliberately. Snapshot Site returns outputs from reachable URLs and does not provide an interactive browser session for navigating a login flow.

Avoid build fragility

A small critical capture set can run after deployment. Large site-wide archives belong in a bounded queue so transient rendering errors do not block publishing. Apply retry only to temporary failures and make jobs idempotent.

The JavaScript rendering page covers dynamic readiness, while screenshot API best practices covers storage, validation, and production controls.

Snapshot API for Astro FAQ

Can an Astro component call Snapshot Site in the browser?

Do not expose the private API key in client-side code. Call from a server endpoint, action, server-rendered component, or trusted worker.

Will hydrated Astro islands appear in the screenshot?

The managed browser executes JavaScript. Set readiness around the meaningful island state and test third-party widgets separately.

Can I capture a fully static Astro site?

Yes. Static pages are good candidates because their content is often deterministic, but fonts, images, and external embeds can still affect readiness.

Does this work with static-only Astro hosting?

Use a serverless function, CI job, external worker, or another backend if the deployment has no server runtime.

How do I capture preview deployments?

Provide a reachable authorized preview URL with short-lived access when necessary. Avoid putting reusable secrets into links or logs.

Should captures happen during every build?

Only if the volume and build budget justify it. A post-deploy queue can isolate rendering failures from the core build.

How should content collections be sampled?

Capture representative templates and high-value routes, then expand based on change risk rather than blindly processing every entry.

What makes outputs reproducible?

Store the exact route, deployment identifier, viewport, format, wait and cleanup settings, and capture time.

Add one Astro capture endpoint

Test a static route and a hydrated route, then preserve deployment and viewport context with every result.