logo
English

导航菜单

Introduction to Astro

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.

服务端渲染流程

用户请求
浏览器发送HTTP请求
HTTP请求
服务器
接收请求
查询数据
数据库
查询数据
生成HTML
服务器
生成HTML
返回响应
返回HTML
浏览器显示页面
特点
  • ✅ SEO友好：HTML中包含完整内容
  • ⚠️ 性能较低：每次请求都需要访问数据库
  • ⚠️ 服务器压力大：需要实时生成HTML

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.

静态HTML + API流程

用户请求
浏览器发送HTTP请求
请求静态HTML
返回静态HTML
nginx直接返回HTML文件
HTML + JavaScript
执行JavaScript
浏览器执行JS代码
API请求
后端API
处理API请求
返回JSON数据
更新页面
JavaScript更新DOM
特点
  • ✅ 性能较高：静态文件由nginx直接返回
  • ⚠️ SEO不友好：初始HTML中没有数据内容
  • ⚠️ 需要两次请求：HTML + API

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.

SPA加载流程

用户请求
浏览器发送HTTP请求
请求页面
返回空HTML
只有基本结构，无内容
下载大量JS
下载JavaScript
框架代码 + 应用代码
执行JS代码
执行JavaScript
浏览器解析并执行代码
渲染页面
页面渲染完成
用户看到完整页面
特点
  • ✅ 交互性强：可以实现复杂的客户端交互
  • ⚠️ 首次加载时间长：需要下载大量JS代码
  • ⚠️ SEO不友好：初始HTML为空
  • ⚠️ 性能开销大：每个用户都要在浏览器中渲染

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 构建时渲染

构建阶段（Build Time）
构建时获取数据
从数据库/API获取数据
生成静态HTML
生成静态HTML
预渲染所有页面
构建完成，部署静态文件
运行时（Runtime）
用户请求
浏览器发送HTTP请求
直接返回静态HTML
返回静态HTML
包含完整内容
仅加载必要的JS
页面立即显示
快速加载，SEO友好
优势
  • ✅ SEO友好：HTML中包含完整内容
  • ✅ 性能极佳：静态文件直接返回，无需服务器处理
  • ✅ 加载速度快：只加载必要的JavaScript
  • ✅ 服务器压力小：无需实时生成HTML
  • ✅ 可扩展性强：CDN加速，全球分发

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.
NextComponents and PagesDeep dive into Astro components and page building

搜索