클라이언트 사이드 렌더링(CSR) 방식으로 동작하며, 컴포넌트가 브라우저에서 직접 렌더링됩니다. Svelte는 빌드 타임에 최적화된 코드를 생성하여 런타임 성능을 높이지만, SEO나 초기 로딩 속도 측면에서는 SSR이나 SSG에 비해 불리할 수 있습니다.

서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 SEO 친화적이고 초기 로딩 속도가 빠른 웹 애플리케이션을 구축할 수 있습니다. 서버에서 데이터를 미리 패칭하여 클라이언트에 전달하므로, 사용자에게 더 빠른 콘텐츠 제공이 가능합니다.

라우팅 기능은 내장되어 있지 않지만, Svelte Router와 같은 외부 라이브러리를 사용하여 구현할 수 있습니다. 라우팅 구현이 자유롭지만, SvelteKit에 비해 추가적인 설정과 코드가 필요합니다.

파일 기반 라우팅 시스템을 제공하여, 디렉토리 구조에 따라 자동으로 라우트를 생성합니다. 동적 라우팅, 중첩 라우팅, API 라우팅 등 다양한 라우팅 기능을 지원하여 복잡한 애플리케이션 구조를 쉽게 관리할 수 있습니다.

클라이언트 사이드에서 데이터를 패칭하는 방식으로, fetch API나 Axios와 같은 라이브러리를 사용하여 데이터를 가져올 수 있습니다. 데이터 패칭 로직을 컴포넌트 내에 구현해야 하므로, SvelteKit에 비해 구조화된 데이터 패칭이 어렵습니다.

서버 사이드에서 데이터를 패칭할 수 있는 기능을 제공하여, 페이지가 렌더링되기 전에 필요한 데이터를 미리 가져올 수 있습니다. 이를 통해 SEO와 성능을 개선할 수 있으며, API 호출, 데이터베이스 쿼리 등 다양한 방식으로 데이터를 패칭할 수 있습니다.

정적 사이트 생성을 위한 기능은 내장되어 있지 않지만, Svelte 컴포넌트를 사용하여 정적 HTML 파일을 생성할 수 있습니다. 정적 사이트 생성 기능이 필요하다면, SvelteKit이나 다른 정적 사이트 생성기와 함께 사용하는 것이 좋습니다.

정적 사이트 생성을 지원하여, 빌드 시 모든 페이지를 미리 렌더링하고 정적 파일로 생성할 수 있습니다. 이를 통해 호스팅 비용을 줄이고, 페이지 로딩 속도를 향상시킬 수 있습니다. SvelteKit은 정적 사이트 생성 시 데이터 패칭, 이미지 최적화 등 다양한 기능을 제공하여, 완전한 정적 사이트를 쉽게 구축할 수 있습니다.

Svelte는 컴포넌트 단위로 코드 분할이 가능하지만, 자동으로 이루어지지는 않습니다. 개발자가 수동으로 코드 분할을 구현해야 하므로, SvelteKit에 비해 더 많은 작업이 필요합니다.

자동 코드 분할 기능을 제공하여, 필요한 시점에만 해당 컴포넌트와 모듈을 로드합니다. 이를 통해 초기 로딩 시간을 줄이고, 애플리케이션의 성능을 최적화할 수 있습니다. SvelteKit은 페이지 단위로 코드 분할을 수행하므로, 각 페이지에 필요한 자원만 로드되어 효율적인 리소스 사용이 가능합니다.

Svelte에서의 데이터 패칭 예시

<script>
  let data;

  async function fetchData() {
    const res = await fetch('https://api.example.com/data');
    data = await res.json();
  }

  fetchData();
</script>

<template>
  <h1>Data from API</h1>
  <pre>{JSON.stringify(data, null, 2)}</pre>
</template>

SvelteKit에서의 데이터 패칭 예시

// src/routes/+page.svelte
<script context="module">
  export async function load() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return { props: { data } };
  }
</script>

<script>
  export let data;
</script>

<template>
  <h1>Data from API</h1>
  <pre>{JSON.stringify(data, null, 2)}</pre>
</template>