Sveltekit의 캐싱 데이터

내 이전 게시물은 Sveltekit의 기능에 대한 일반적인 개요를 제공했습니다. 이 게시물은 웹 개발의 중요한 측면을 탐구합니다. 아직하지 않은 경우 컨텍스트에 대한 이전 게시물을 읽으십시오. 전체 코드와 라이브 데모는 github에서 사용할 수 있습니다.

이 게시물은 효율적인 데이터 처리에 중점을 둡니다. 페이지의 쿼리 문자열 (Sveltekit의 내장 기능 사용)을 수정하고 페이지의 로더를 다시 트리거하는 기본 검색 기능을 구현합니다. 데이터베이스를 반복적으로 쿼리하는 대신 캐싱을 활용하여 이전에 검색 한 데이터를 신속하게 검색합니다. 캐시 만료 관리 및 비판적으로 수동 캐시 무효화 기술을 탐색 할 것입니다. 마지막으로, 캐시를 동시에 지우면서 돌연변이 후에 데이터를 업데이트하는 방법을 보여줍니다.

. 이것은 평소보다 더 진보 된 주제입니다. 우리는 와 같은 라이브러리에서 발견되는 기능과 유사한 기능을 구현하지만 외부 의존성에 의존하지 않습니다. 웹 플랫폼 API 및 Sveltekit 기능 만 사용할 것입니다 웹 플랫폼의 기능은 더 낮은 수준이므로 더 많은 수동 노력이 필요하지만 외부 라이브러리가 없기 때문에 혜택은 번들 크기를 줄입니다. 그러나 절대적으로 필요한 경우 이러한 기술 만 사용하십시오. 캐싱은 복잡하고 쉽게 잘못 관리 할 수 ​​있습니다. 데이터 저장소와 UI가 충분히 수행되면 Sveltekit이 데이터를 직접 가져 오는 것을 직접 처리하십시오. 단순성이 핵심입니다. 이 게시물은 더 이상 충분하지 않을 때 솔루션을 제공합니다.

는 이제

가 이제 벨트 지원이 있습니다! 수동 캐싱이 자주 필요한 경우이 라이브러리 탐색을 고려하십시오.

설정 추가 Sveltekit 기능을 설명하기 위해 이전 코드를 수정하겠습니다. 먼저, 데이터로드를 react-query 로더에서 API 경로로 이동합시다. 에서 파일을 만들고 get 함수를 추가하십시오 :

다음으로 에서 (또는 )로 페이지 로더의 이름을 바꿉니다. 이로 인해 서버와 클라이언트 모두에서 실행되는 범용 로더가됩니다. 클라이언트 측 페치는 브라우저의 기본 함수를 사용합니다.

페이지에 간단한 검색 양식을 추가하십시오 react-query 이제 검색어를 입력하면 URL의 쿼리 문자열이 업데이트되어 로더를 트리거하고 할 일 항목을 검색합니다. 마지막으로, 캐싱 동작을 쉽게 관찰하기 위해

의 지연을 증가시킵니다.

전체 코드는 github에 있습니다 기본 캐싱 파일을 수정하여 엔드 포인트에 캐싱을 추가하겠습니다 :

import { json } from "@sveltejs/kit";
import { getTodos } from "$lib/data/todoData";

export async function GET({ url, setHeaders, request }) {
  const search = url.searchParams.get("search") || "";
  setHeaders({ "cache-control": "max-age=60" }); // Add caching header
  const todos = await getTodos(search);
  return json(todos);
}

이 캐시는 API가 60 초를 요구합니다. 필요에 따라이 값을 조정하십시오. 보다 정교한 캐싱 전략에 대해서는

를 고려하십시오 이제 60 초 창의 후속 검색이 캐시에서 즉시로드됩니다. 캐싱 동작을 관찰하기 위해 브라우저의 개발자 도구에서 캐싱을 비활성화하는 것을 잊지 마십시오. 캐시 위치 stale-while-revalidate 초기 서버 렌더링 된로드가 서버에서 가져와 클라이언트로 전송됩니다. Sveltekit은

헤더를 관찰하고 지정된 기간 내에 캐시 된 데이터를 사용합니다. 클라이언트 측 검색은 브라우저의 캐시를 사용하여 페이지 재 장전 후에도 (캐시 버스트 구현에 따라) 잠재적으로 지속됩니다. 캐시 무효화 캐시를 수동으로 무효화하려면 URL에 쿼리 버스트 값을 추가합니다. 우리는이 값을 쿠키에 저장하고 서버에서 정산 할 수 있지만 클라이언트에서 읽을 수 있습니다.

.

경로 폴더의 루트에서 파일을 만듭니다 :

이것은 초기 요청에 따라 쿠키를 설정하고 후속 요청에서 읽습니다. 는 캐시 파열 목적으로 클라이언트 측 액세스를 허용합니다 캐시 값 우리의 범용 로더는 실행 환경에 관계 없이이 캐시 값을 읽어야합니다. 클라이언트에서는

를 구문 분석 할 것입니다 Cache-Control 캐시 값 보내기

이제이 값을

엔드 포인트로 보내십시오 :

캐시를 파열

: 를 사용하여 모든 서버 작업에서 캐시 버스트 값을 업데이트하십시오

구현 우리는 필요한 프리미티브를 다루었습니다. 이제 통합합시다. layout.server.js 페이지에 편집 기능을 추가하겠습니다. 이 행을 테이블에 추가하십시오 :

export async function load({ fetch, url, setHeaders }) {
  const search = url.searchParams.get("search") || "";
  const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}`);
  const todos = await resp.json();
  return { todos };
}

폴더에서 파일을 만듭니다 : httpOnly: false

이것은 양식 제출을 처리하고, 할 일 항목을 업데이트하고, 캐시를 지 웁니다. . 편집 후,

의 페치는 업데이트 된 데이터를 검색합니다. 즉각적인 업데이트

편집 후 페치를 피하려면 UI를 직접 업데이트하십시오. 로더를 수정하여 쓰기 가능한 상점을 반환합니다

document.cookie 템플릿에서

를 사용하십시오 : . 이제 매장을 직접 업데이트하십시오

<div>
  <label for="search">Search:</label>
  <input type="text" id="search" bind:value="{searchQuery}" on:keypress="{(e)"> { if (e.key === 'Enter') { navigate(`/list?search=${encodeURIComponent(searchQuery)}`) } }}>
</div>

이것은 재 렌더를 트리거하지 않고 상점을 업데이트합니다. 캐시가 지워지고 변경 사항이 즉시 표시됩니다 즉시 업데이트 코드는 github에 있습니다 리로드 함수 다시로드 버튼을 추가하여 캐시를 지우고 현재 쿼리를 다시로드하겠습니다. 서버 추가 조치 :

<:> 및 양식 :

이를 개선하기 위해 피드백과 제어 무효화를 추가합시다

/api/todos 이것은

를 사용하여 다시로드 된 것을 제어하여 불필요한 재 렌더를 방지합니다. 로더를 업데이트하십시오 :

import { json } from "@sveltejs/kit";
import { getTodos } from "$lib/data/todoData";

export async function GET({ url, setHeaders, request }) {
  const search = url.searchParams.get("search") || "";
  setHeaders({ "cache-control": "max-age=60" }); // Add caching header
  const todos = await getTodos(search);
  return json(todos);
}

Reload 버튼의 코드는 github에 있습니다

결론 이 게시물은 Sveltekit의 고급 캐싱 기술을 탐색했습니다. 필요한 경우에만 사용해야합니다. 깨끗하고 간단한 코드의 우선 순위를 정하고 성능이 문제가 될 때만 최적화하십시오. 목표는 최적화가 필요할 때 도구를 제공하는 것이 었습니다.

위 내용은 Sveltekit의 캐싱 데이터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!