react next.js 하고 query가 react-query 를 말씀하시는건지? 

이런 케이스에선 api를 따로 작성해서 모달 마운트 시에 api 콜을 해서 데이터를 가져오는게 맞는 것 같습니다.
+page.server.ts 나 Next.js api 엔트포인트 하나 더 만드셔도 되고

그리고 svelte-query 라이브러리도 있긴한데, 

복잡하지 않으면 로컬스토리지를 스토어에 연결해서 사용하면,

조용하게 변경합니다.
 

svelte-local-storage-store 이게 편하게 store 하고 local storage 연동해서 쓰는 라이브러리입니다
store 를 이용하면 svelte 에서 백그라운드 프로그램 처럼 연결된 곳의 값을 변경시켜주는데, 문제는 요게 시간이 지나면 사라집니다.
그래서 다음에 접속하면 다시 api 요청을 해야하는 등의 문제가 발생합니다.
store와 연결된 storage 에 우선 api 요청 결과를 배열 형태로 너어 둔뒤
모달 불러올때 여기 저장된 배열중 특정 키로 값들을 불러오면 되지 않을까요?
그리고
모달 열때  store의 배열의 값을  우선 불러오고 또다시 api 호출해서 순간 갱신되도록하고, store의 키를 이용해서 해당키의 스토어의 값도 갱신해주는 방법으로
실제 서비스 하려면 문제 삼을 수도 있는게, 느리다거나, 깜박이는 것처럼 보인다거나일 텐데, 값이 없다가 api 콜로 불러와서 뿌려주면 깜박이는 것처럼보이니까.
우선 가장 가까운 스토어의 정보를 불러와서 보여주고 동시에 api 로 해당 글 부분만 불러와서 갱신해서 보여주면 크게 깜박이는 느낌이 최소화 되어서 보여주지 않을까합니다.
svelte 이용하는 이유가 네이티브처럼 팍팍 뜨는 느낌이 경쾌하고 빨라서 이용하게 되는데
열었을때 기나리거나 굼뜨면 좀 그렇잖아요.
그리고 pc 로 하는 경우 마우스 오버했을 때 a 태그의 경우 해당 페이지를 pre load 하는 기능이 있습니다.
꼼수라면 이게 될지 모르겠는데, 내용만 보여주는 페이지를 하나 만드시고 해당 페이지를 로드하면 store목록의 해당 키의 값을 갱싱하도록 넣어두세요.
그렇게 해 놓고 마우스 오버 되면 store가 로드되고 클릭하면 모달이 뜨게하고 페이지로 넘어가는 거는 막아두는 방법도 할 수 있고, 아니면 a 링크 말고 그냥 마우스 오버하면 api 요청해서 store 내용 갱신하도록 해도 되고
이렇게 하면 네이티브 처럼 바로 볼수 있지 않을까요.
물론 최초에 목록을 불러올때는 한번은 로드하는 시간이 걸리겠죠. 그건 첫페이지면 뭔가 엑션을 주어서 해결하시고 앱의 스플레시스크린 이나 스켈레톤 로드바 같은거로..

만약 다른 페이지에서 링크로 타고 온다면 이미 a 링크가 로드를 먼저 실행해주기 때문에 해당 페이지 열때는 이미 스토어에 저자된 이후의 값을 바로 보여주는 거라서 로드 시간도 느끼지 못할 꺼에요.