Sveltekit Braking 변경 사항: 라우팅, 로드 기능 및 섀도우 엔드포인트의 새로운 방식

이 기사에서는 이번 달에 sveltekit이 만든 모든 주요 변경 사항을 설명합니다. 예, 큰 프로젝트에는 약간 미쳤다는 것을 알고 있으며 문제도 있었기 때문에 이 게시물을 작성하고 있습니다.

이 모든 것은 새 svelte 버전으로의 마이그레이션으로 시작됩니다. 그들이 설명한 곳how to migrate을 확인할 수 있습니다Github discussion.

변경 사항 목록

이제 경로가 디렉토리 기반입니다.

함수 소품을 로드하고 모든 값을 반환하고 데이터 소품을 사용하여 액세스합니다.

페이지 저장소에서 모든 페이지 데이터에 액세스합니다.

노선

이제 sveltekit은 이전에 파일 시스템 기반 라우팅이었던 디렉터리 기반 라우팅을 도입했습니다. 이제 모든 경로에 세 개의 서로 다른 파일을 포함하는 디렉토리가 있습니다. 해당 파일은 +page.svelte, +page.js, +page.server.js입니다. 모든 파일을 자세히 살펴보겠습니다. 여기에서는 내 경로가 blog 인 예를 들어 보겠습니다.

블로그/+page.svelte

<!--blog/+page.svelte-->

This page going to contain all the html css and js 
frontend handling from now on there will be no `script` 
tag with `module`. Which will also make our code more readable.

<h1>About this site</h1>
<p>TODO...</p>
<a href="/">Home</a>

블로그/+page.js

<!--blog/+page.js-->

Here you going to add your load function which will be called 
on route rendering. Which basically means load have a 
new separate file for itself.

This will be used to export values that configure the 
page's behaviour:

- export const prerender = true or false
 overrides config.kit.prerender.default
- export const hydrate = true or false 
overrides config.kit.browser.hydrate
- export const router = true or false 
overrides config.kit.browser.router


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

/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  if (params.slug === 'hello-world') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum 
dolor sit amet...'
    };
  }

  throw error(404, 'Not found');
}

블로그/+page.server.js

<!--blog/+page.server.js-->

This is your new way of shadow endpoints. You can write 
your server side code here with all the request methods. 


src/routes/blog/[slug]/+page.server.js
import { error } from '@sveltejs/kit';

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

  if (post) {
    return post;
  }

  throw error(404, 'Not found');
}

로드 기능

로드 기능이 변경되어 파일(+page.js)에 추가되었으므로 이제 추가된 props 속성 없이 여러 개의 props를 반환할 수 있습니다.

// +page.js

/** @type {import('./$types').LayoutLoad} */
export function load() {
  return {
    sections: [
      { slug: 'profile', title: 'Profile' },
      { slug: 'notifications', title: 'Notifications' }
    ]
  };
}

// +page.svelte

<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

{#each data.sections as section}
<h1>{section.slug}</h1>
<div>{section.title}</div>
{/each}

보시다시피 props 없이 load에서 여러 항목을 반환했으며 data prop을 사용하여 load 함수에서 반환된 모든 데이터에 액세스할 수 있습니다.

페이지 스토어

이로 인해 많은 일이 쉽고 때로는 지루해졌습니다. 어디에서 사용할 것인지에 따라 다릅니다. 이 상점에는 예를 들어 모든 데이터가 있습니다. URL, 데이터, 오류 등

<script>
  import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h1>

보시다시피 앱 스토어에서 페이지를 가져와 상태 및 오류 메시지를 가져오는 데 사용했습니다.

이것들은 몇 가지 특정 주요 변경 사항이며 내가 남긴 것이 있으면 주석에 언급하십시오. 자세한 내용은 SvelteKit Docs 을 확인하십시오.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.