대규모 콘텐츠 사이트를 위한 JS 프레임워크 비교

대규모 콘텐츠 웹사이트 개발에서 프레임워크 선택의 중요성

여러 프레임워크 중 무엇을 써야 하는지 고민하는 이유는 프로젝트의 성격에 따라 결과가 달라지기 때문입니다. 특히 수천, 수만 개의 글을 보여줘야 한다면, 빌드·성능·관리 편의성이 큰 변수로 작용합니다.

DatoCMS로 설계한 간단한 블로그 구조

CMS에는 두 개의 기본 모델이 있습니다. 글 모델에는 이미지, 제목, 설명, 내용, 저자 연결, 슬러그, 게시 날짜 등 다양한 필드가 있습니다. 저자 모델은 이름과 아바타 이미지만 갖고 있습니다. API를 통해 흔히 필요한 두 가지 쿼리(전체 글 목록, 슬러그별 단일 글 조회)만 처리하면 대부분의 기능이 커버됩니다.

# 전체 글 목록 조회
{ allPosts(first: 100) { title slug date author { name } }}

# 단일 글 조회
query getPost($slug: String) {
  post(filter: {slug: {eq: $slug}}) {
    title
    slug
    image { url id }
    date
    description
    content { value }
    author { name avatar { url id } }
  }
}

디자인과 스타일링의 최소화

모든 프로젝트에서 CSS 프레임워크는 사용하지 않고, 기본적인 글로벌 스타일만 적용했습니다. 이를 통해 디자인 부담을 줄이고, 스타일 관련 변수와 비교 요인을 배제했습니다. 실질적으로 각 프레임워크의 텍스트 렌더링 방식을 활용해 글만 잘 보이도록 했습니다.

Next.js: 손쉬운 접근성과 React 기반 생태계

Next.js는 빠른 설정과 우수한 문서화, 그리고 React 커뮤니티의 풍부한 리소스 덕분에 누구나 쉽게 시작할 수 있습니다. getStaticProps와 getStaticPaths를 활용해 모든 글을 빌드 시점에 미리 랜더링했고, 대량 페이지도 무리 없이 처리할 수 있었습니다.

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const paths = posts.map((post) => ({ params: { slug: post.slug } }));
  return { paths, fallback: false };
}

쉽고 직관적인 구조 덕에 초보자도 접근하기 좋습니다.

Nuxt.js: Vue 생태계와 자동 데이터 패칭

Nuxt.js는 Vue를 기반으로 하여 템플릿 작성 방식이 약간 다르지만, 핵심 기능은 간결합니다. useAsyncData로 각 페이지 컴포넌트에서 쉽게 데이터를 불러올 수 있고, 라우팅 역시 직관적입니다. 대량 페이지 프리렌더링을 위해 별도로 라우트 생성 스크립트를 작성해야 하지만, 설정 난이도는 높지 않습니다.

// routes 생성 예시
export async function generateRoutes() {
  const posts = await getAllPosts();
  return posts.map(post => `/blog/${post.slug}`);
}

Astro: 콘텐츠 중심 사이트에 최적화된 프레임워크

Astro는 기본적으로 모든 콘텐츠를 빌드 시 정적 페이지로 렌더링합니다. 자바스크립트 번들이 거의 없고, 구조도 매우 단순합니다. 대형 웹사이트에도 빠른 페이지 로드를 보장하고, 의존성도 최소화되어 효율이 뛰어납니다. 단, 1만 개 이상 페이지처럼 규모가 커지면 빌드 시간이 다소 늘어날 수 있습니다.

SvelteKit: 혁신적 문법과 빠른 빌드

SvelteKit은 설정이 약간 다르지만, 빌드 속도가 상당히 빠릅니다. 페이지별 서버 데이터 패칭은 load 함수에서 처리하며, 정적 사이트 생성도 쉽게 할 수 있습니다. 프로젝트가 커져도 번들 크기가 작고, 실제 사용해보면 "자연어" 비슷한 문법이 매력입니다.

import { sveltePreprocess } from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';

export default {
  preprocess: sveltePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      $lib: './src/lib',
    },
  },
};

빌드와 배포—프레임워크별 속도 비교

빌드 시간은 프리렌더링 페이지 수에 따라 달라집니다. 각 프레임워크별 1만 개 글 기준 초벌 빌드에서는 SvelteKit이 가장 빨랐고, 캐시 적용 이후 Next.js가 앞섰습니다. Astro는 빌드가 느린 대신 로드와 최종 번들에서 가장 작은 용량을 보여줬습니다.

프론트엔드 번들 크기와 실제 성능

Astro는 "0 JS" 방식 덕분에 프런트엔드 번들 확연히 작습니다. Next.js는 가장 무겁고, Svelte와 Nuxt는 중간 크기입니다. Lighthouse 측정에서도 Astro가 성능, 접근성, SEO에서 최고 점수를 받았습니다.

결론: Astro, 콘텐츠 중심 사이트에 최고의 선택

내용 중심 대형 웹사이트에는 Astro가 가장 가볍고, 빠르며, 클라이언트 리소스나 설정 부담이 적어 추천할 만합니다. 물론, 사용자가 익숙하고 즐기는 프레임워크가 있다면 그것을 쓰는 것도 충분히 좋은 방법입니다. 각 도구의 특성과 목적에 맞는 선택이 중요합니다.

Source & Reference : Comparing JS frameworks for content-heavy sites — DatoCMS