Complete Astro Complete Guide | Static Sites

Complete Astro Complete Guide | Static Sites

· 5분 읽기 · 수정 Intermediate
Complete Astro Complete Guide | Static Sites

이 글의 핵심

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

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.. Complete Astro Complete Guide에 대한 완전한 가이드입니다. 실전 예제와 함께 핵심 개념부터 고급 활용까지 다룹니다.'
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.

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. Complete guide to building ultra-fast static sites with Astro. From component islands, content collections to multi-fram… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

  • Complete Angular Complete Guide | Component· Service
  • Complete Astro Content Collections Complete Guide
  • Building a Tech Blog with Astro | Content Collections· MDX

이 글에서 다루는 키워드 (관련 검색어)

Astro, Static Site, SSG, Performance, SEO, Content, Frontend 등으로 검색하시면 이 글이 도움이 됩니다.