[Svelte] Router

1. 개요

Svelte 프레임워크 자체는 Routing 기능을 제공하지 않습니다. 따라서 Svelte를 사용하여 SPA를 구현하고자 한다면 별도의 라이브러리를 설치하여야 하지만 SvelteKit 프레임워크의 경우 Routing 기능이 내장되어 있습니다.

2. Svelte Routing (Feat. svelte-spa-router)

// router 모듈 설치
$ npm i svelte-spa-router

// route/index.js
import Home from './routes/Home.svelte'
import Author from './routes/Author.svelte'
import Book from './routes/Book.svelte'
import NotFound from './routes/NotFound.svelte'

export default {
    '/': Home,
    '/author/:first/:last?': Author,
    '/book/*': Book,
    '*': NotFound,
}

// app.svelte
<script>
	import Router from 'svelte-spa-router'
    import routes from './routes'
   	import Header from './components/Header.svelte'
</script>

<Header />
<Router {routes} />

 

3. SvelteKit Router

SvelteKit은 폴더기반의 Router입니다. URL 경로는 src/routes 디렉터리 경로에 의하여 결정됩니다. 

 

예를들어,

'/' : src/routes (root 경로)
'/about' : src/routes/about
'/blog/post' : src/routes/blog/post

따라서 src/routes 디렉토리에서 routing을 설정할 수 있습니다. 또한 각 디렉토리에는 하나 이상의 경로 파일이 필요하며, 경로파일은 '+' 접두사로 식별됩니다.

1) +page.svelte

- 해당 url 경로로 접근시 렌더링되는 페이지를 정의합니다. CSR, SSR 모두 렌더링 됩니다. 

2) +page.js

- 페이지 렌더링 이전에 Load해야할 데이터가 있는 경우 및 ssr, csr, prerender* 설정이 가능합니다.

 

*prerender : SEO 성능 향상을 위한 사전 렌더링 기능으로, 빌드 시 미리 HTML 파일로 생성합니다. 또한 root의 +layout.ts 또는 +layout.server.ts 에서 prerender=true로 설정하면 default가 사전 렌더링으로 세팅할 수 있으며 사전 렌더링 할 수 없는 경우에는 특정 경로 +page.js 에서 명시적으로 false를 해야 합니다.

export const prerender = true;

/** @type {import('./$types').PageLoad} */
export async function load({ fetch }) {
	const res = await fetch('/my-server-route.json');
	return await res.json();
}

3) +page.server.js

- 페이지 진입 시 Server Side영역 (api호출 및 환경 변수 활용 등)

import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
	const post = await getPostFromDatabase(params.slug);

	if (post) {
		return post;
	}

	error(404, 'Not found');
}

4) +layout (.js, .svelte, .server.js)

+page와 동일한 규칙으로 사용되는 파일이며, +page가 각각의 페이지에 대한 내용이라면, +layout은 해당 경로 전체 페이지에 공통으로 사용할 templete (navigation bar 등), 공통 load 데이터 등의 내용을 세팅합니다.

 

 

 

참고사이트

https://kit.svelte.dev/docs/routing#page

https://velog.io/@jude-ui/svelte-spa-router

https://www.npmjs.com/package/svelte-spa-router