SvelteKit load 정리[1] 타래 🧵
[1] client-side navigation 기준
1️⃣ server load 함수들은 병렬적으로 실행된다. 그리고 그 반환값이 합쳐져 하나의 HTTP 응답으로 돌아온다.
2️⃣ +page.ts, +layout.ts에서는 sibling server load 함수의 반환값을 data 속성을 통해 활용할 수 있다.
(이어서)
3️⃣ +page.svelte, +layout.svelte 컴포넌트에선 silbling, parent load 함수들의 반환값을 **모두** 활용할 수 있다.
4️⃣ await parent()는 load 함수에서 상위 load 함수들의 반환값이 필요할 때 활용한다. 병렬 실행을 막고 waterfall을 야기하므로 주의해서 사용해야 한다.
(이어서)
5️⃣ server load 함수는 반환값의 형태가 제한된다. 네트워크를 통해 전송돼야 하므로 devalue로 serialize 돼야하기 때문이다. JSON과 달리 RegExp, Date, Map 등을 반환할 수 있지만, Svelte 컴포넌트 등은 불가하다.
(이어서)
github.com/rich-harris/devalue
6⃣ load 함수 내에선 제공된 fetch를 활용해야 한다. SSR에 필수적일뿐더러, 내부 경로로 요청을 보낼 때 다음 이점이 있다.
(편의) 상대 경로를 사용 가능
(성능) HTTP 요청하지 않음
7️⃣ server load 함수는 서버에서 실행되므로 - HTTP 요청이 이뤄짐 - 쿠키를 get, set 할 수 있다.
(이어서)
8️⃣ server와 universal load 함수에서의 parent()는 **각각** 부모 server와 universal layout load 함수의 반환값을 불러온다. 애초에 서버에서 실행되는 load 함수는 서버에서 실행되는 load 함수들만 기다릴 수 있으며, 단일 페이지에는 load 함수 쌍만 여러 개 가질 수 있다.
(이어서)
9️⃣ load 함수에서는 @sveltejs/kit에서 제공하는 redirect, error를 throw 해야 한다. 후자는 가장 가까운 +error.svelte를 렌더링 한다.
9️⃣ load 함수는 함수가 활용한 의존성[1]이 바뀌었을 때만 재실행된다. 수동으로 invalidate 할 수도 있다. [1] url, params, route 등 kit.svelte.dev/docs/load#invalidation