svelte-query 라이브러리 사용하세요.
딱 그런거 하라고 만들어 놓은 라이브러리 입니다.
react-query 만든 회사가(vercel 이네요) svelte 버전도 만들어서 배포 중입니다.
https://sveltequery.vercel.app/

비트코인 사이트들 챠트 이걸로 많이 만듭니다.

+layout.svelte

<script lang="ts">
import { QueryClient, QueryClientProvider } from '@sveltestack/svelte-query';

const queryClient = new QueryClient({
defaultOptions: {
queries: {
keepPreviousData: true,
refetchOnWindowFocus: false,
refetchOnMount: true,
refetchOnReconnect: false,
retry: 2,
refetchInterval: refreshStop ? false : 10 * 1000, // 10초 단위로 불러옴
refetchIntervalInBackground: true,
onError: (err) => {
console.log(err);
refreshStop = false;
// logout()
},
onSuccess: (data) => {
if (refreshStop) {
// refreshCheck()
}
}
}
}
});
</script>

<QueryClientProvider client={queryClient}>


<slot />
</QueryClientProvider>

이렇게 선언하면 10초 단위로 불러오는 설정이 된것이고

+page.svelte
각 페이지에서
<script lang="ts">
import { useQuery } from '@sveltestack/svelte-query';

const getChart = async (id)=>{

}

let id ='';//챠트
 $: queryResult  = useQuery([`getChart${id}`, id], getChart(
        id
    ), {
        onSuccess: res => {
            if(res.data){
                // console.log(res.data)
             
            }
     
        }
    });
</script>


{#if $queryResult.isLoading}
<!-- 로딩 보여주는 곳 -->
<Loading />

{:else if $queryResult.error}
<!-- 에러 메시지 보여주는 곳 -->
에러
{:else}

{#if $queryResult.data.data != null}
   
    {@const {
  // 받아온 값을 개별로 넘기거나
  id,xval,yval
    }= $queryResult.data.data}

<!-- 아니면 직접 컴포넌트에 넘기거다 -->
<Chart data={$queryResult.data.data} />

{/if}

{/if}

{/if}


이런식으로 하시면 되는데,
svelte-query 는
spa 앱을 만들때
사용자 경험을 높개 향상시켜주는 이유로 사용하게 됩니다.
서버와 통신은 시간적 지연이 있습니다. 먼곳에서 데이터를 불러오기 때문이죠
만면 페이지 전환은 즉각적으로 잃어납니다.
그래서 페이지전환이 이루어지고 데이터가 불러오기까지의 텀을 어떻게 처리하느냐의
문제가 발생합니다.

이를 위해서
스켈렛톤 바를 보여주기도 하고 로딩바를 보여주기도 하는데
이와 동시에
프론트를 직접 컨트롤 할 수 있기 때문에
프론트에 값을 주기적으로 갱신해서 프론트 브라우저의 저장공간에
저장해 놓습니다. 그리고
페이지가 전환되면 즉각적으로 레이아웃(디자인)과 브라우저 저장공간에 저장된
내용을 먼저 보여주고 그리고 서버 요청을 보내 내용을 갱신하는 방식을 사용합니다.

그러면 페이지전환이 즉각적으로 이루어지면서 동시에 데이터도 보이게 되겠죠.
그리고 스므스하게 데이터가 변경됩니다.

그래서 사용자는 매무 빠른 서비스를 받는다는 느낌을 받게 되는 기술입니다.

svelte-query 는
백그라운드에서 주기적으로 데이터를 불러와서 갱신처리할 수 있는 기술을
짧게 설정하면 자주 갱신되는 주식 챠트나
가끔 변경하면 사용자 경험개선에 사용합니다.

@지구인 특정 페이지 새로고침시 문제라면,  첫페이지에서 값을 가져와서 저장해놓고 있어야하는 값들이 있을 수 있는데, 중간 페이지에서 불러오게 되면 이 값이 그전 페이지를 거져 오지 않다 보면 값을 갖지 못하고 있어서 발생하는 경우가 있습니다. 주로 값을 store 에 넣어 두는 경우 그렇습니다.  store 는 좀 말랑말랑해서 좀더 엄격하게 값을 유지하려면,
url route slug 를 이용하거나  아니면,
stoer와 함께 보조 수단으로 브라우저의 스토리지를 사용하는 방법도 있습니다.
store 에 저장하면 localstorage 에 같이 자동 저장되는 라이브러리도 있습니다.

저도 타입스크립트 쓸려고 설정 적용하고 쓰긴하는데, string, number 외에는 모르면 any 로 넘깁니다.
svelte 개발자인 리치헤리슨도 얼마전 사람들이 타입스크리트 쓴다고들 하는데, 대부분이 요 3개만 쓰는 경우가 많아서, 타입스크립트 쓰지말고, jsdoc 쓰는 쪽으로 말을 하는 것 같더라구요.