SvelteKit - Page options

https://kit.svelte.dev/docs/page-options
😎 이 글은 공식문서를 번역한 것입니다.

 

 

기본적으로 SvelteKit은 먼저 서버에서 모든 구성 요소를 렌더링(또는 사전 렌더링)하고 클라이언트에 HTML로 보낸다. 그런 다음 hydration라고 불리는 프로세스에서 상호작용 할 수 있도록 컴포넌트를 브라우저에서 다시 렌더링 할 것이다. 이러한 이유로 우리는 컴포넌트가 두 위치에서 모두 실행될 수 있는지 확인해야 합니다. 그런 다음 SvelteKit은 후속 탐색을 인계하는 라우터를 초기화 할 것이다.

 

우리는 +page.ts 혹은 +page.server.ts에서 옵션을 export하여 페이지별로 이것들을 제어할 수 있다. (혹은 +layout.ts, +layout.server.ts 에서 페이지 그룹별로 옵션 제어) 앱 전체에서 옵션을 정의 하기 위해서는 root 레이아웃에서 export해야한다. 자식 레이아웃과 페이지들은 부모의 레이아웃에 설정된 값을 오버라이드한다. 그래서 우리는 전체 앱에 대해 사전 렌더링을 할 수 있고 그 다음 동적으로 렌더링해야 하는 페이지에 대해 비활성화할 수 있습니다.

 

우리는 앱의 다른 부분에서 이 옵션들을 조합 하여 사용할 수 있는데, 예를 들어 최대 속도를 위해 마케팅 페이지를 사전 렌더링하고, SEO 및 접근성을 위해 동적 페이지를 서버에서 렌더링하고, 클라이언트에서만 렌더링하여 관리 섹션을 SPA로 전환할 수 있습니다.

 

1. prerender

우리의 앱중 최소한의 일부만 빌드 시에 생성된 간단한 HTML로 표현할 수 있다. 이러한 경로들은 미리 랜더링 될 수 있다.

// +page.ts/+page.server.ts/+server.ts
export const prerender = true;

 

또는 root +layout.ts 또는 +layout.server.ts에서 export const prerender = true를 설정하면 사전 렌더링할 수 없다고 명시적으로 표시한 페이지를 제외한 모든 항목을 사전 렌더링할 수 있다.

// +page.ts/+page.server.ts/+server.ts
export const prerender = false;

 

prerender = true 라고 설정한 경로들은 동적 SSR에서 사용되는 manifests에서 제외된다. 경우에 따라 경로를 미리 렌더링하고 manifests에 포함할 수도 있다. (예를 들어, /blog/[slug]와 같은 경로에서 가장 최근/인기 있는 콘텐츠를 사전 렌더링하지만 서버 렌더 시 오래 걸리는 경우) - 이러한 경우가 3번째 옵션에 해당한다.

export const prerender = 'auto';

 

2. ssr

기본적으로 Sveltekit은 먼저 서버에서 페이지를 랜더링하고 그 HTML을 클라이언트로 보낸다. 만약 ssr을 false로 설정하면 빈 껍데기 페이지가 랜더링 될 것이다. 이것은 우리의 페이지가 서버에서 랜더링 할 필요가 없을때 유용하지만 대부분의 경우에는 추천하지 않는다.

export const ssr = false;

만약 최상위 +layout.ts에서 export const ssr = false를 설정하면, 앱 자체는 클라이언트에 의해 랜더링 될 것이다. 이것은 본질적으로 앱을 SPA로 전환한다는 의미이다.

 

3. csr

보통 SvelteKit은 서버에서 랜더링된 HTML을 CSR 페이지로 hydrate한다. 일부 페이지는 Javascript가 전혀 필요하지 않다. (많은 블로그 게시물과 '정보' 페이지가 이 범주에 속한다) 이러한 경우 csr을 불가능하게 할 수 있다.

export const csr = false;

 

✍️ ssr csr 모두 false로 하면 아무것도 랜더링되지 않는다!

 

4. trailingSlash

SvelteKit은 URL에서 후행 슬래시를 제거한다. - 만약 너가 /about/ 경로로 유입하면 /about으로 리다이렉트 될 것이다. trailingSlash 옵션으로 이것을 바꿀 수 있다.  never(디폴트), always, ignore

 

다른 옵션과 마찬가지로 +layout.ts 혹은 +layout.server.ts에 export할 수 있고 이것은 자식들 페이지 전체에 적용 될 것이다. 또한 +server.ts 에서 설정할 수 있다.

export const trailingSlash = 'always';

 

이 옵션은 prerendering에 영향을 준다. 만약 trailingSlash을 always로 설정하면, /about 같은 라우트는 about/index.html이 되고, 그렇지 않으면 about.html을 생성할 것이다. 

 

✍️ trailingSlash을 무시하는것은 추천하지 않는다!

상대경로의 의미체계는 두개를 다른것으로 보기 때문이다. (/x로부터 ./y는 /y를 의미하지만, /x/로부터 ./y는 /x/y 이다.) 또한 /x와 /x/는 SEO에서 완전 다른 URL로 분리된다.