Nuxt.js

// composables/useProducts.ts - 재사용 가능한 데이터 로직
export const useProducts = () => {
  // 상품 목록 조회 (캐싱 적용)
  const fetchProducts = async (category?: string) => {
    return useFetch('/api/products', {
      query: { category },
      // 5분간 캐시 유지
      getCachedData(key) {
        const data = nuxtApp.payload.data[key]
        if (!data) return null

        const expirationDate = new Date(data.fetchedAt)
        expirationDate.setMinutes(expirationDate.getMinutes() + 5)

        if (expirationDate < new Date()) return null
        return data
      },
      transform(data) {
        return { ...data, fetchedAt: new Date() }
      }
    })
  }

  // 단일 상품 조회
  const fetchProduct = async (id: string) => {
    return useFetch(`/api/products/${id}`, {
      key: `product-${id}`,
      // Nuxt 3의 자동 dedupe - 같은 요청 중복 방지
      dedupe: 'defer'
    })
  }

  // 상품 검색 (클라이언트 사이드)
  const searchProducts = async (query: string) => {
    // $fetch는 useFetch와 달리 반응형이 아님
    // 이벤트 핸들러에서 사용
    return $fetch('/api/products/search', {
      method: 'POST',
      body: { query }
    })
  }

  return {
    fetchProducts,
    fetchProduct,
    searchProducts
  }
}

// 사용 예시: pages/products/index.vue
<script setup>
const { fetchProducts } = useProducts()
const route = useRoute()

// URL 쿼리 파라미터로 카테고리 필터링
const { data: products, refresh } = await fetchProducts(
  route.query.category as string
)

// 카테고리 변경 시 자동 리프레시
watch(() => route.query.category, () => refresh())
</script>

// nuxt.config.ts - 프로젝트 설정
export default defineNuxtConfig({
  // TypeScript 지원
  typescript: {
    strict: true
  },

  // 런타임 환경 변수
  runtimeConfig: {
    // 서버 전용 (절대 클라이언트에 노출 안됨)
    apiSecret: process.env.API_SECRET,
    // 클라이언트에도 노출
    public: {
      apiBase: process.env.API_BASE_URL || 'https://api.example.com'
    }
  },

  // 모듈 (플러그인 생태계)
  modules: [
    '@nuxt/ui',           // 공식 UI 컴포넌트
    '@nuxt/image',        // 이미지 최적화
    '@pinia/nuxt',        // 상태 관리
    '@nuxtjs/i18n',       // 다국어 지원
    '@vueuse/nuxt'        // Vue Composables
  ],

  // 하이브리드 렌더링 - 경로별 렌더링 전략
  routeRules: {
    // 홈페이지: ISR (60초마다 재생성)
    '/': { isr: 60 },
    // 블로그: 정적 생성
    '/blog/**': { prerender: true },
    // 대시보드: CSR only (서버 렌더링 비활성화)
    '/dashboard/**': { ssr: false },
    // API 프록시
    '/api/**': {
      proxy: 'https://api.backend.com/**',
      cors: true
    }
  },

  // Nitro 서버 설정
  nitro: {
    // Vercel, Netlify, Cloudflare 등 자동 감지
    preset: 'vercel-edge',
    // 서버 캐싱
    storage: {
      cache: {
        driver: 'redis',
        url: process.env.REDIS_URL
      }
    }
  },

  // 앱 전역 설정
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ],
      link: [
        { rel: 'icon', type: 'image/png', href: '/favicon.png' }
      ]
    }
  }
})