본문 바로가기
자바스크립트/Svelte

[번역] svelteKit -fetch requests

by zenna 2022. 11. 11.
728x90

Making fetch requests

출처 : https://kit.svelte.dev/docs/load#making-fetch-requests

 

외부 API 또는 +server.js 핸들러에서 데이터를 가져오려면 제공되는 'fetch' 기능을 사용할 수 있습니다. 이 기능은 몇 가지 추가 기능이 있는 native fetch web API 와 동일하게 작동합니다.

  • 페이지 요청에 대한 쿠키(cookie) 및 권한 부여(authorization) 헤더를 상속하므로 서버에서 자격 증명 요청을 만드는 데 사용할 수 있습니다.
  • 서버에서 상호적인 요청을 할 수 있습니다(일반적으로 fetch는 서버 컨텍스트에서 사용될 때 출처가 있는 URL이 필요합니다)
  • 내부 요청(예: +server.js 경로)은 HTTP 호출의 오버헤드 없이 서버에서 실행될 때 핸들러 함수로 직접 이동합니다.
  • 서버 측 렌더링 중에 응답이 캡처되어 렌더링된 HTML에 인라인됩니다. filterSerializedResponseHeaders를 통해 명시적으로 포함되지 않는 한 헤더는 직렬화되지 않습니다. 그런 다음 hydration하는 동안 HTML에서 응답을 읽어 일관성을 보장하고 추가 네트워크 요청을 방지합니다. - load fetch 대신 브라우저 fetch를 사용할 때 브라우저 콘솔에 경고가 표시되면 이것이 이유입니다.

src/routes/items/[id]/+page.js

/** @type {import('./$types').PageLoad} */
export async function load({ fetch, params }) {
  const res = await fetch(`/api/items/${params.id}`);
  const item = await res.json();
 
  return { item };
}

쿠키는 대상 호스트가 SvelteKit 응용 프로그램 또는 해당 응용 프로그램의 보다 구체적인 하위 도메인과 동일한 경우에만 전달됩니다.

728x90

댓글