svelte Prefetching

이번 프로젝트에서 내가 svelte(프론트) + 백엔드(스프링)일부를 맡기로 했다.
스벨트로 프론트를 개발하던 도중 일이다.

과정은 이렇다

프론트에서 /board/{id} 링크에 접속하면 이 주소에 있는 +page.ts속의

import type { PageLoad } from './$types';
import rq from '$lib/rq/rq.svelte';

export const load: PageLoad = async ({ params, fetch }) => {
  const { data } = await rq.apiEndPointsWithFetch(fetch).GET(`/api/v1/posts/{id}`, {
    params: {
      path: {
        id: parseInt(params.id)
      }
    }
  });

  return {
    post: data!.data
  };
};

이 코드가 실행되도록 구성되어 있다.
그런데 지금 현재는 이 get요청이 서버에서 제대로 구현되어 있지 않아 오류가 난다.

그런데 오류가 이 링크에 접속했을때가 아닌 이 링크로 가는 a태그에 마우스를 올릴때마다 발생하였다. 이는 SvelteKit (또는 유사한 프레임워크)에서 제공하는 "Prefetching" 기능 때문이였다. 이 기능은 사용자의 경험을 개선하기 위해 링크에 마우스를 올리는 순간 해당 페이지의 데이터를 미리 불러오는 역할을 한다.
그래서 이 참에 Prefetching에 대해 좀 알아보려고 했다.

Prefetching:

• 작동 원리: 사용자가 링크에 마우스를 올리면, SvelteKit는 해당 링크의 href 속성에 지정된 경로로 데이터를 미리 불러온다.
• 페이지 로드 함수: load 함수는 페이지 컴포넌트가 로드될 때 실행되며, 여기서 필요한 데이터를 불러온다. 이 경우, rq.apiEndPointsWithFetch(fetch).GET를 통해 API 요청을 보내고 있다.
• Prefetching 동작: 링크에 마우스를 올리는 것만으로 load 함수가 트리거되어 API 요청이 발생한다.

Prefetching 제어하기:

만약 이러한 자동 Prefetching 기능을 원하지 않는다면, 몇 가지 방법으로 제어할 수 있다.

1. 링크 컴포넌트 수정: SvelteKit의 <a> 태그나 링크 컴포넌트에서 Prefetching을 비활성화하는 옵션을 사용할 수 있다. 예를 들어, rel="nofollow" 속성을 추가하여 Prefetching을 막을 수 있다.

2. 글로벌 설정 변경: 프로젝트 설정에서 Prefetching을 비활성화하는 것도 가능하다. 이는 전체 애플리케이션에 영향을 미친다.

3. 조건부 데이터 로딩: load 함수 내에서 특정 조건에 따라 데이터를 불러오도록 로직을 수정할 수 있다. 예를 들어, 특정 사용자 상태나 환경에 따라 API 요청을 제한할 수 있다.

Prefetching은 유용한 기능이지만, 모든 경우에 적합한 것은 아니다. 때로는 네트워크 트래픽을 불필요하게 증가시키거나 예기치 않은 동작을 유발할 수 있으므로, 프로젝트의 요구 사항과 사용자 경험에 맞게 적절하게 설정하는 것이 중요하다.