Astro Quickstart

Scenario 1

Build a page that shows a number stored in a database.

Option 1

Run a server (any common server-side language). On every request, fetch the number from the database and render HTML to return to the user.

SEO-friendly, but every request hits the DB, so it’s slower.

Option 2

Let Nginx return a static HTML shell; the page fetches the number from an API via JavaScript and updates the content.

Fast, but not SEO-friendly because the initial HTML has no number.

Scenario 2

A highly interactive site with many pages.

Common approach

Use a SPA with Vue/React, handling all pages and interactions on the client.

First load returns an empty HTML plus a large JS bundle; the browser downloads/executes to render and handle interactions.

Supports rich interactivity, but first load is heavy and SEO suffers. Every user downloads the JS and renders in the browser—expensive.

If everyone is rendering anyway, why not render on the server and send HTML directly?

The ideal approach

Do everything you can at build time; keep only essential interactive logic for runtime.

Astro’s philosophy

“Content-first, build-time rendering.”

• Default output is static HTML; no JS on first paint, great SEO.
• Only truly interactive components hydrate on demand (partial hydration/islands).
• Mix Vue/React/Svelte/Preact islands on the same page.

Quick start

1. pnpm create astro@latest (or npm/yarn).
2. Pick a template and install dependencies.
3. Dev: pnpm dev, then open the shown URL.
4. Build: pnpm build outputs to dist/ for static hosting (e.g., Cloudflare Pages).

When to use Astro

• Content/docs/blog/marketing pages aiming for fast first paint and strong SEO.
• Multi-framework pages that mix several component libraries.
• You can still do SSR/API routes, but default to static and minimize dynamic parts.