SvelteKit load() 함수를 사용하여 미묘한 데이터 가져오기 오류 방지

load() 기능을 사용하면 SvelteKit는 서버에서 데이터를 쉽게 얻을 수 있습니다.페이지의 HTML 서버 응답에 데이터를 표시하여 구글과 다른 검색엔진의 인덱스 성능을 향상시킬 수 있습니다.간단한 예를 들어 살펴보겠습니다.

<script context="module">
    const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1';

    export async function load() {
        const post = await (await fetch(apiUrl))?.json();

        return {
            props: {
                post
            }
        };
    }
</script>

<script>
    export let post;
</script>

<h1>{post.title}</h1>
<p>{post.body}</p>

브라우저에서 페이지의 HTML을 보고 HTML에 데이터가 있는지 확인할 수 있습니다.

그러나 네트워크 옵션을 검사할 때, 우리는 앞에서 이런 이상한 AJAX 데이터 요청을 다시 보았다.그런데 load() 백엔드에서 일해야 한다고 생각했어요?

미묘한 벌레 한 마리
사실이 증명하듯이, 우리 위의 원시 코드에 버그가 하나 있다.SvelteKit의 새 사용자는 load() 와 getServerSideProps() in Next.js 유사하다고 생각할 수 있으며, 후자는 백엔드에서만 실행될 것이다.그러나 load() 함수는 전단과 후단에서 모두 운행한다.그렇다면, 우리는 어떻게 그것이 앞쪽에서 데이터를 다시 새기는 것을 피할 수 있습니까?
관건은 load()passes to us a function parameter에 우리의 요청과 관련된 대량의 유용한 데이터와 함수가 포함되어 있다는 것이다.그중 하나는 정상the fetch function, which is a special version이다.이 버전의 특이한 점은 모든 요청이 HTML 응답의 JSON 데이터로 연결되는 것이다.이것은 우리가 전방에서 load() 함수를 실행할 때 추가 가져오기를 건너뛸 수 있도록 합니다.
그것을 사용하려면, 기본 fetch 함수를 덮어쓰는 매개 변수에서 해체하기만 하면 됩니다.
이전:

export async function load() { ... }

다음:

export async function load({ fetch }) { ... }

현재 우리는 특수한fetch 함수를 사용하고 있다. 우리는 전단fetch 요청이 사라진 것을 관찰할 수 있다. 우리는 새로운 내연 JSON 데이터를 사용했다.
Fetch API
다음은 완전하고 정확한 실현이다.

<script context="module">
    const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1';

    export async function load({ fetch }) {
        const post = await (await fetch(apiUrl))?.json();

        return {
            props: {
                post
            }
        };
    }
</script>

<script>
    export let post;
</script>

<h1>{post.title}</h1>
<p>{post.body}</p>