SvelteKit은 @sveltejs/adapter-static으로 모든 페이지를 빌드 시 사전 렌더링하고 결과를 일반 파일로 작성할 수 있습니다. Lobsite는 그 파일을 호스팅합니다. 정적 어댑터로 빌드하고 npx lobsite를 실행하면 HTTPS가 적용된 *.lobsite.app 주소로 사이트가 공개됩니다. 이 페이지는 완전히 사전 렌더링된 사이트에 관한 것입니다. 서버 라우트와 폼 액션에는 서버에서 SvelteKit을 실행하는 호스트가 필요합니다.
작동 방식
- 정적 어댑터로 전환하고 모든 페이지를 사전 렌더링한 다음(아래 참고)
npm run build를 실행하세요. 사이트가build/에 생성됩니다. - 프로젝트에서
npx lobsite를 실행하세요.static/이나.svelte-kit/이 아닌build/를 배포합니다. 첫 배포는 계정이 필요 없으며 6시간 동안 유지됩니다. - 가져오기 링크로 무료 계정에 사이트를 유지하세요. 그 후
npm run build && npx lobsite로 같은 주소가 업데이트됩니다.
adapter-static과 사전 렌더링
// svelte.config.js
import adapter from "@sveltejs/adapter-static";
export default {
kit: { adapter: adapter() },
};
// src/routes/+layout.js
export const prerender = true;
- 루트 레이아웃의 **
prerender = true**는 모든 페이지를 빌드 시 렌더링합니다. 사전 렌더링할 수 없는 페이지가 있으면 빌드가 실패하고 어떤 페이지인지 알려 주므로 깨진 것이 배포되지 않습니다. - **
fallback: "200.html"**은 사전 렌더링할 수 없는 페이지를 위한 것입니다. SvelteKit이200.html셸을 작성하고, Lobsite는 파일이 아닌 모든 경로에 이를 제공하므로 해당 페이지는 브라우저에서 렌더링됩니다. 검색 엔진과 첫 로드에는 여전히 사전 렌더링된 페이지가 더 좋습니다. - **
trailingSlash**는 기본값으로 두어도 됩니다./about은about.html로 작성되어/about에서 제공됩니다.
빌드 시 실행되는 것과 실행될 수 없는 것
+page.server.js의 함수를 포함한 load 함수는 페이지가 사전 렌더링될 때 빌드 중에 실행되므로, 파일이나 API의 데이터가 HTML에 포함됩니다. 동적 라우트는 페이지의 링크를 따라가 찾습니다. 링크되지 않은 라우트는 prerender.entries에 나열하세요. 서버 없이 작동할 수 없는 것은 폼 액션, 사전 렌더링된 GET 외의 +server.js 엔드포인트, 요청마다 실행되는 훅, 쿠키 읽기입니다. 문의 폼은 폼 액션 대신 /_lobsite/forms/contact로 전송하세요. 폼을 참고하세요.
파일은 해시로 저장됩니다. 변경되지 않은 사이트를 다시 배포하면 0바이트가 업로드됩니다.
공개 전에 미리 보세요. 리디렉션까지 포함해 클릭 한 번으로 롤백합니다.
모든 사이트는 첫 배포부터 HTTPS가 적용된 *.lobsite.app 주소를 받습니다.
폼의 대상을 /_lobsite/forms/contact로 지정하세요. 스팸 필터링이 포함됩니다.
리디렉션, 헤더, 폼은 lobsite.toml에 있으며 각 배포와 함께 이동합니다.
모든 한도가 공개되어 있고, 모든 오류는 다음에 할 일을 알려 줍니다.
SvelteKit 호스트 비교
| Lobsite | Vercel | Netlify | Cloudflare Pages | |
|---|---|---|---|---|
사전 렌더링 사이트(adapter-static) |
예 | 예 | 예 | 예 |
| 서버 렌더링, 폼 액션 | 아니요 | 예 | 예 | 예 |
| 서버에서 빌드 | 아니요: build/ 배포 |
예 | 예 | 예 |
| 첫 배포 전 계정 | 불필요: 6시간 공개 후 무료로 유지 | 필요 | 필요 | 필요 |
| 백엔드 없는 폼 | 예, 사이트가 계정에 있으면 | 아니요 | 예 | 아니요 |
| 커스텀 도메인 | 예, 무료 | 예 | 예 | 예 |
앱이 요청 시 페이지를 렌더링한다면 이를 실행하는 호스트의 어댑터를 사용하세요. 마케팅 사이트, 블로그, 문서처럼 모든 페이지를 사전 렌더링할 수 있다면 Lobsite가 명령어 하나로 호스팅하며 각 빌드에서 변경된 파일만 업로드합니다.
자주 묻는 질문
Lobsite에는 어떤 SvelteKit 어댑터를 사용해야 하나요?
모든 페이지를 사전 렌더링한 @sveltejs/adapter-static입니다. adapter-auto와 플랫폼 어댑터는 서버와 함수용으로 빌드하며, Lobsite는 이를 실행하지 않습니다.
폴백 페이지가 있는 SvelteKit SPA가 여기서 실행되나요?
네. adapter({ fallback: "200.html" })을 설정하세요. Lobsite는 파일이 아닌 모든 경로에 상태 200으로 200.html을 제공하고, SvelteKit 라우터가 브라우저에서 페이지를 렌더링합니다. 사전 렌더링된 페이지는 그대로 제공됩니다.
SvelteKit 빌드가 사전 렌더링 오류로 실패한 이유는 무엇인가요?
페이지를 빌드 시 렌더링할 수 없었습니다. 보통 url.searchParams, 쿠키 또는 폼 액션을 읽기 때문입니다. 해당 작업을 브라우저로 옮기거나, 빌드 시 사용 가능한 데이터만 사용하는 load 함수로 옮기세요.
사전 렌더링 후에도 SvelteKit 페이지 전환이 작동하나요?
네. 사전 렌더링된 페이지는 SvelteKit 클라이언트를 로드하고, 첫 페이지 후에는 클라이언트가 탐색을 넘겨받으므로 링크는 전체 새로고침 없이 페이지를 바꿉니다.