Nuxt

// === Nuxt 3 프로젝트 구조 ===
// nuxt.config.ts - 프로젝트 설정
export default defineNuxtConfig({
    // 렌더링 모드 설정
    ssr: true, // SSR 활성화 (기본값)

    // 라우트별 렌더링 전략 (하이브리드 렌더링)
    routeRules: {
        '/': { prerender: true }, // SSG - 빌드 시 정적 생성
        '/blog/**': { swr: 3600 }, // ISR - 1시간마다 재검증
        '/admin/**': { ssr: false }, // CSR - 클라이언트 전용
        '/api/**': { cors: true }, // API 라우트
    },

    // 모듈 등록
    modules: [
        '@pinia/nuxt',
        '@nuxt/content',
        '@nuxt/image',
    ],

    // 런타임 환경 변수
    runtimeConfig: {
        // 서버 전용 (클라이언트에 노출 안됨)
        apiSecret: process.env.API_SECRET,
        // public: 클라이언트에서도 접근 가능
        public: {
            apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
        }
    }
});

// === pages/index.vue - 페이지 컴포넌트 ===
<script setup lang="ts">
// Auto-import: ref, useFetch 등 import 불필요

// SEO 메타데이터
useSeoMeta({
    title: '홈',
    description: '메인 페이지입니다.',
    ogImage: '/og-image.png',
});

// 서버에서 데이터 가져오기
const { data: posts, pending, error } = await useFetch('/api/posts', {
    // 캐싱 옵션
    key: 'posts',
    // 변환
    transform: (data) => data.slice(0, 10),
});

// 반응형 상태
const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

<template>
    <div>
        <h1>최신 글</h1>

        <div v-if="pending">로딩 중...</div>
        <div v-else-if="error">에러: {{ error.message }}</div>
        <ul v-else>
            <li v-for="post in posts" :key="post.id">
                <NuxtLink :to="`/blog/${post.slug}`">
                    {{ post.title }}
                </NuxtLink>
            </li>
        </ul>

        <!-- 클라이언트 전용 컴포넌트 -->
        <ClientOnly>
            <Counter v-model="count" />
            <template #fallback>
                <p>카운터 로딩 중...</p>
            </template>
        </ClientOnly>
    </div>
</template>

// === pages/blog/[slug].vue - 동적 라우트 ===
<script setup lang="ts">
// URL 파라미터 접근
const route = useRoute();
const slug = route.params.slug as string;

// 데이터 페칭
const { data: post } = await useFetch(`/api/posts/${slug}`);

// 404 처리
if (!post.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Post Not Found'
    });
}

// 동적 메타데이터
useSeoMeta({
    title: () => post.value?.title,
    description: () => post.value?.excerpt,
});
</script>

// === server/api/posts/index.get.ts - API 엔드포인트 ===
export default defineEventHandler(async (event) => {
    // 쿼리 파라미터
    const query = getQuery(event);
    const page = Number(query.page) || 1;

    // 데이터베이스 조회 (예: Prisma)
    const posts = await prisma.post.findMany({
        take: 10,
        skip: (page - 1) * 10,
        orderBy: { createdAt: 'desc' }
    });

    return posts;
});

// === server/api/posts/[slug].get.ts - 동적 API ===
export default defineEventHandler(async (event) => {
    const slug = getRouterParam(event, 'slug');

    const post = await prisma.post.findUnique({
        where: { slug }
    });

    if (!post) {
        throw createError({
            statusCode: 404,
            message: 'Post not found'
        });
    }

    return post;
});

// === composables/useAuth.ts - 커스텀 컴포저블 ===
export const useAuth = () => {
    const user = useState<User | null>('user', () => null);
    const isLoggedIn = computed(() => !!user.value);

    const login = async (credentials: LoginInput) => {
        const data = await $fetch('/api/auth/login', {
            method: 'POST',
            body: credentials
        });
        user.value = data.user;
    };

    const logout = async () => {
        await $fetch('/api/auth/logout', { method: 'POST' });
        user.value = null;
        navigateTo('/');
    };

    return { user, isLoggedIn, login, logout };
};