SvelteKit이냐 svelte-spa-router냐? 라우터로 뭐쓰지?

 

React와 Next.js만 써보다가 이번 프로젝트에서 Svelte를 쓰게 되어 머리가 리셋이 되어버렸다.

 

여긴 어디? 나는 누구?

 

 

꽤나 익숙해졌던 Next.js를 쓰지 않게 되니, 나는 다시 프린이가 되어버렸다.

 

라우터조차 어떻게 쓰는지 모르겠어서 검색해보니 svelte-spa-router를 많이 쓰는 것 같아 일단 사용해봤다.

 

---

svelte-spa-router

 

클라이언트 사이드 라우팅을 구현하기 위한 경량 라우터 라이브러리(클라이언트 사이드 라우팅만 지원)

 

라우팅 설정은 routes.js나 기타 설정 파일에서 경로를 정의해야 함.

import Home from './pages/Home.svelte';
import About from './pages/About.svelte';
import User from './pages/User.svelte';

const routes = {
  '/': Home,
  '/about': About,
  '/:id': User
};

<script>
  import { Router } from 'svelte-spa-router';
  import routes from './routes';
</script>

<Router {routes} />

 

:id와 같은 동적 경로를 지원

 

beforeNavigate나 afterNavigate 훅을 통해 라우팅 동작을 제어 할 수 있음.

 

라이브러리가 매우 가볍고 간단하다는 장점이 있다.

 

<script>
  import { goto } from 'svelte-spa-router';

  function navigateToAbout() {
    goto('/about'); // '/about' 페이지로 이동
  }
</script>

<button on:click={navigateToAbout}>About 페이지로 이동</button>
<a href="/about">About 페이지로 이동</a>

 

button과 goto 함수를 사용하거나, a 태그를 사용하여 페이지를 이동 할 수 있다.

 

---

SvelteKit

 

풀스택 애플리케이션 프레임워크로, 라우터 기능뿐 아니라 전체 애플리케이션 구조를 제공한다.

 

src/routes 디렉토리 구조를 기반, 자동으로 라우팅을 설정

 

예) src/routes/about/+page.svelte -> /about

 

서버 사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링을 모두 지원한다.

 

백엔드 API 엔드포인트를 +server.js 파일로 쉽게 설정할 수 있다.

 

[id].svelte처럼 대괄호를 사용하여 동적 라우팅을 처리한다.

 

load 함수로 데이터를 비동기적으로 가져오고 로딩 상태를 관리 할 . 수있다.

 

SEO와 퍼포먼스 최적화에 강점이 있다.

 

---

 

선택은?

 

SvelteKit을 선택했다.

 

결정적인 계기는 내가 못찾았을 가능성이 훠얼~씬 높지만, svelte-spa-router에서는 페이지를 새로고침 하지 않고 + 함수 내에서 페이지를 이동하는 방법이 없었기 때문이다.

 

예를 들어 Next.js에서는

export default function Example() {
    const handleSomething = async () => {
    	await addSomething();
        
        router.push('/about');
    };

	return (
    	<div>
        	<button onClick={handleSomething}>
            	누르면 어떤 일을 처리하고 페이지를 이동하는 버튼
            </button>
        </div>
    );
}

 

이런 식으로 이동 할 수 있으나, svelte-spa-router를 사용하면

 

<script>
	const handleSomething = async () => {
    	if (window === undefined) return;
        
    	await addSomething();
        
        window.location.href = '/about';
    }
</script>

<div>
	<button on:click={handleSomething}>
    	누르면 어떤 일을 하고 새로고침 되는 것 처럼 보이는 버튼
    </button>
</div>

 

이런 식으로 브라우저의 주소를 변경하여 페이지를 로드하도록 한다.

 

그럼 전체 페이지 새로고침이 된다.

 

반면 SvelteKit을 이용하면

 

<script>
	const handleSomething = async () => {        
    	await addSomething();
        
        goto('/about');
    }
</script>

<div>
	<button on:click={handleSomething}>
    	누르면 어떤 일을 하고 새로고침 하지 않는 버튼
    </button>
</div>

 

이렇게 이동이 된다.

 

또한, 페이지를 생성할때마다 routes.js에 어떻게 귀찮아서 하나 하나 적냐!!!!! 라는 크나큰 귀차니즘 때문에 SvelteKit 사용을 적극적으로 어필했다.

 

---

 

SvelteKit은 라우터만의 역할을 하는 것이 아니므로, 다른 프레임워크나 프레임워크를 사용하지 않는다면 라우터만의 기능을 위해 사용하는 것은 불필요한 선택이라고 생각된다.

 

그러나 프로젝트 초기 단계에서 이것 저것 규칙 정하기 귀찮고, 풀스택 개발도 어짜피 할 예정이다~ 라면 그냥 SvelteKit을 사용하는 것을 추천한다.

 

나에게는 러닝 커브는 svelte-spa-router가 더 높게 느껴졌기 때문이다.. (생각보다 문서나 커뮤니티가 부실.. 아마도 내가 완전히 잘못 쓰고 있었을 가능성이 높지만..)