SvelteKit

 

SvelteKit은 Svelte에서 공식적으로 제공하는 서버 사이드 렌더링(SSR) 및 라우팅 등의 기능을 지원하는 프레임워크입니다. Svelte는 컴파일러를 이용하여 빌드되는 방식으로, 런타임에서의 부하가 적어서 빠른 성능을 보입니다. SvelteKit은 이러한 Svelte의 장점을 그대로 유지하면서, SSR 및 라우팅 등의 기능을 지원하여 SPA(Single Page Application)에서도 SEO(Search Engine Optimization) 문제와 관련된 문제를 해결할 수 있습니다.

SvelteKit의 특징은 다음과 같습니다.

• 빠른 성능: Svelte의 장점을 그대로 유지하여, 빠른 성능을 보입니다.
• 서버 사이드 렌더링: Svelte 컴포넌트를 서버에서도 렌더링하여, 검색 엔진 최적화(SEO)를 지원합니다.
• 라우팅: 클라이언트 사이드 라우팅과 서버 사이드 라우팅을 모두 지원합니다.
• 파일 기반 라우팅: 파일 시스템을 기반으로 자동으로 라우팅을 처리합니다.
• API 라우팅: API 엔드포인트를 자동으로 라우팅하여 개발 생산성을 높입니다.
• 빌트인 미들웨어: CSRF, CORS 등의 보안 미들웨어를 빌트인으로 지원합니다.
• 다양한 배포 옵션: 서버리스 환경에서의 배포를 지원합니다.

SvelteKit은 Svelte의 생태계를 그대로 활용할 수 있기 때문에, 다양한 Svelte 라이브러리를 함께 사용할 수 있습니다. 또한, Next.js나 Nuxt.js와 같은 다른 SSR 프레임워크와 비교하여 더 가벼우며, Svelte의 성능을 그대로 누릴 수 있습니다.

 

[HTML]

<!-- src/routes/index.svelte -->
<script>
  export let name = "World";
</script>

<h1>Hello {name}!</h1>

[JavaScript]

// src/routes/api/hello.js
export async function get() {
  return {
    body: {
      message: "Hello API!",
    },
  };
}

위 코드는 src/routes/index.svelte와 src/routes/api/hello.js 두 개의 파일로 구성되어 있습니다. index.svelte 파일은 브라우저에서 접근 가능한 / 경로에서 렌더링됩니다. hello.js 파일은 API 엔드포인트로, 클라이언트가 /api/hello 경로로 GET 요청을 보내면 {"message": "Hello API!"}를 반환합니다.

위 코드를 실행하기 위해서는 다음과 같은 명령어를 실행해야 합니다.

 

npm init svelte@next my-sveltekit-app
cd my-sveltekit-app
npm install
npm run dev

이후 localhost:3000으로 접속하면, Hello World!가 출력됩니다. localhost:3000/api/hello로 GET 요청을 보내면, {"message": "Hello API!"}가 출력됩니다.