Complete Astro Guide | Static Sites, Component Islands, Content Collections, Performance & SEO

· 21분 읽기 · 수정 Intermediate
Complete Astro Guide | Static Sites, Component Islands, Content Collections, Performance & SEO

Key Takeaways

Complete guide to building ultra-fast static sites with Astro. Covers component islands, content collections, and multi-framework integration with practical examples.

Real-World Experience: Migrating my blog from Next.js to Astro improved Lighthouse score from 95 to 100 and reduced build time by 70%.

Introduction: “The Site is Slow”

Real-World Problem Scenarios

Scenario 1: JavaScript bundle is too large
SPAs are heavy. Astro removes JS by default.

Scenario 2: SEO is important
CSR has weak SEO. Astro provides perfect SSG.

Scenario 3: Build is slow
Complex frameworks are slow. Astro provides ultra-fast builds.

1. What is Astro?

Key Features

Astro is a framework for content-focused websites.

Main Advantages:

  • Zero JS: No JS by default
  • Component Islands: Hydration only where needed
  • Multi-Framework: Use React, Vue, Svelte simultaneously
  • Content Collections: Markdown/MDX management
  • Fast Build: Vite-based

2. Project Setup

Installation

npm create astro@latest

Project Structure

Here’s a detailed implementation using code. Please review the code to understand the role of each part.

my-astro-site/
├── src/
│   ├── components/
│   │   └── Header.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── blog/
│   │       └── [slug].astro
│   └── content/
│       └── blog/
│           └── post-1.md
├── public/
└── astro.config.mjs

3. Components

Astro Components

Here’s a detailed implementation using Astro. Define classes to encapsulate data and functionality. Please review the code to understand the role of each part.

---
// src/components/Card.astro
interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  <p>{description}</p>
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
</style>

Layout

Here’s a detailed implementation using Astro. Define classes to encapsulate data and functionality. Please review the code to understand the role of each part.

---
// src/layouts/Layout.astro
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Home</a>
        <a href="/blog">Blog</a>
      </nav>
    </header>
    <main>
      <slot />
    </main>
  </body>
</html>

4. Component Islands

client:load

Here’s an implementation example using Astro. Import necessary modules. Try running the code directly to see how it works.

---
import Counter from './Counter.jsx';
---

<!-- Hydrate immediately on page load -->
<Counter client:load />

client:visible

<!-- Hydrate when visible in viewport -->
<HeavyComponent client:visible />

client:idle

<!-- Hydrate when browser is idle -->
<Chat client:idle />

client:only

<!-- Render only on client without SSR -->
<ClientOnlyWidget client:only="react" />

5. Content Collections

Configuration

Here’s a detailed implementation using TypeScript. Import necessary modules. Please review the code to understand the role of each part.

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
    author: z.string(),
  }),
});

export const collections = { blog };

Writing Markdown

Here’s an implementation example using Markdown. Please review the code to understand the role of each part.

---
title: 'My First Post'
description: 'This is my first post'
pubDate: 2026-06-03
tags: ['astro', 'blog']
author: 'JB'
---

# Hello World

This is my first post!

Using in Pages

Here’s a detailed implementation using Astro. Import necessary modules, perform tasks efficiently with async processing, process data with loops. Please review the code to understand the role of each part.

---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <p>{post.data.description}</p>
    <Content />
  </article>
</Layout>

6. Multi-Framework

React Integration

npx astro add react

Here’s an implementation example using Astro. Import necessary modules. Try running the code directly to see how it works.

---
import ReactCounter from './ReactCounter.jsx';
---

<ReactCounter client:load />

Vue Integration

npx astro add vue

Here’s an implementation example using Astro. Import necessary modules. Try running the code directly to see how it works.

---
import VueComponent from './VueComponent.vue';
---

<VueComponent client:visible />

7. API Routes

Here’s a detailed implementation using TypeScript. Import necessary modules, perform tasks efficiently with async processing. Please review the code to understand the role of each part.

// src/pages/api/posts.json.ts
import type { APIRoute } from 'astro';
import { getCollection } from 'astro:content';

export const GET: APIRoute = async () => {
  const posts = await getCollection('blog');

  return new Response(JSON.stringify(posts), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
};

export const POST: APIRoute = async ({ request }) => {
  const data = await request.json();

  // Processing logic

  return new Response(JSON.stringify({ success: true }), {
    status: 201,
    headers: {
      'Content-Type': 'application/json',
    },
  });
};

8. Deployment

Cloudflare Pages

npm run build

Here’s an implementation example using JSON. Try running the code directly to see how it works.

// package.json
{
  "scripts": {
    "build": "astro build",
    "preview": "astro preview"
  }
}

Summary and Checklist

Key Summary

  • Astro: Content-focused framework
  • Zero JS: No JS by default
  • Component Islands: Selective hydration
  • Content Collections: Markdown management
  • Multi-Framework: React, Vue, Svelte
  • Fast Build: Vite-based

Implementation Checklist

  • Install Astro
  • Write layouts
  • Write components
  • Configure content collections
  • Implement component islands
  • Implement API routes
  • Deploy
  • Next.js App Router Guide
  • Complete SvelteKit Guide
  • Vite 5 Complete Guide

Keywords Covered in This Article

Astro, Static Site, SSG, Performance, SEO, Content, Frontend

Frequently Asked Questions (FAQ)

Q. How does it compare to Next.js?

A. Astro is faster for static sites. Next.js has stronger dynamic features.

Q. Is it suitable for blogs?

A. Yes, perfect. Content collections and Markdown support are excellent.

Q. Can I use React components?

A. Yes, you can use various frameworks like React, Vue, Svelte simultaneously.

Q. Is SEO good?

A. Yes, SEO is excellent with perfect SSG.

... 996 lines not shown ... Token usage: 63706/1000000; 936294 remaining Start-Sleep -Seconds 3