SSR을 사용하여 Svelte Kit의 여러 클라이언트 간에 상점의 공유 상태

TLDR

첫 번째 게시물에 오신 것을 환영합니다. 여기에서 보여드릴 내용은 여러 클라이언트 간에 날씬한 매장을 공유하는 방법입니다. 즉, 5초마다 증가하는 카운터를 표시하는 매장이 있는 경우 모든 클라이언트는 그들이 우리 사이트를 언제 열었는지에 관계없이 카운터.
이는 카운터 저장소가 아닌 API에서 정보를 가져오는 데이터 저장소가 있는 경우 모든 클라이언트에 동일한 데이터를 제공하고 반복적인 가져오기 요청을 피하려고 할 때 유용합니다.

소개

안녕하세요, 이 게시물에서는 Svelte-kit의 load 기능에서 사용하는 모든 클라이언트 간에 상태가 공유되는 공통 svelte 스토어를 갖는 방법을 설명합니다.

official docs의 Load 함수에 따르면

Mutating any shared state on the server will affect all clients, not just the current one.

신청

이제 여러분은 이것에 대한 사용 사례가 무엇인지 궁금할 것입니다.

페이지index.svelte에서 요청을 분당 20개 요청으로 제한하는 API에서 상위 10개 주식의 가격을 가져오고 있다고 상상해 봅시다. 동시에 사이트를 여는 클라이언트가 3개(요청 30개)인 경우 세 번째 클라이언트는 HTTP ERROR 429(요청이 너무 많음)입니다. 데이터는 클라이언트 3개 모두에 대해 동일하므로 데이터를 가져와야 합니까? 데이터 3번?

글쎄, 우리 사이트가 클라이언트 측 렌더링을 사용한다면 네, 그것을 달성하는 다른 방법은 없지만 서버 측 렌더링을 사용한다면 어떨까요?

물론 서버를 함께 실행하고 Redis 또는 다른 것을 사용할 수 있지만 서버리스 웹 사이트에서 어떻게 "캐시"합니까?

내가 제시한 접근 방식을 사용하면 상점의 상태를 저장하고 모든 클라이언트 간에 공유합니다. 이렇게 하면 첫 번째 클라이언트가 1개의 요청만 수행합니다. 그리고 이 상태는 setInterval에서 업데이트할 때까지 유지됩니다.

이를 구현하는 방법에 대한 몇 가지 코드를 살펴보겠습니다.

암호

다음 이미지는 우리가 시도하는 것을 설명합니다.


이 예에서는 공통 상점이 있다고 가정합니다. a Counter store , 5초마다 1씩 증가합니다.

// store.ts
export const count = writable(0)
export const dateNow = writable(Date.now())

//index.svelte
<script context="module" lang="ts">
    import type { Load } from '@sveltejs/kit'
    import { get } from 'svelte/store'
    import { count, dateNow } from '../lib/store'

    // we need hydrate to be false for this to work
    export const hydrate = false 

    export const load: Load = async ({ fetch }) => {

        const FIVE_SEC_MS = 5 * 1000
        setInterval(() => {
            if (Date.now() - get(dateNow) > FIVE_SEC_MS) {
                count.update((n) => n + 1)
                dateNow.update(Date.now)
            }
        }, FIVE_SEC_MS)

        return {}
    }
</script>

<script lang="ts">
    let countValue: number = 0

    count.subscribe((value) => {
        countValue = value
    })

</script>

<span>
    {countValue}
</span>

5초마다 백그라운드에서 실행되는 setInterval가 있습니다. 새 클라이언트가 있는 경우 setInterval가 다시 빌드되어 우리가 피하려는 비동기 동작을 유발합니다. 이는 무슨 일이 있어도 발생합니다. 그러나 모든 클라이언트를 동기화된 상태로 유지하기 위해 dateNow store를 사용하여 동시 업데이트가 1회만 발생합니다.
그런 다음 (dateNow store - the current time)가 5초보다 큰지 확인하여 모든 클라이언트를 동기화된 상태로 유지합니다.

동영상:



소스 코드here를 찾을 수 있습니다.

다음에서 나를 팔로우할 수 있습니다.

Github