sveltekit - Should I access the api directly inside the script tag in a svelte SPA? - Stack Overflow

admin管理员组

文章数量:1187328

I am writing a Svelte CSR application. I am wondering whether this is ok:

<script>
    const data = api.getDataAsync()
<script>

{#await data}
   <span>Loading</span>
{:then data}
   //display data
{/await}

If not why? should I do it the react way

<script>   
   let data = $state(undefined)
   onMount(()=>{
       api.getDataSync().then(apiData=>data=apiData)
   })
</script>
{#if !data}
   <span>loading...</span>
{:else}
   //display data
{/if}

Edit: Because I am using PocketBase, I have SSR turned off.

I am writing a Svelte CSR application. I am wondering whether this is ok:

<script>
    const data = api.getDataAsync()
<script>

{#await data}
   <span>Loading</span>
{:then data}
   //display data
{/await}

If not why? should I do it the react way

<script>   
   let data = $state(undefined)
   onMount(()=>{
       api.getDataSync().then(apiData=>data=apiData)
   })
</script>
{#if !data}
   <span>loading...</span>
{:else}
   //display data
{/if}

Edit: Because I am using PocketBase, I have SSR turned off.

• svelte
• sveltekit

Share Improve this question Follow edited Jan 26 at 12:28 Oussam Larkem asked Jan 26 at 10:27 Oussam LarkemOussam Larkem 522 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Neither, in SvelteKit use a load function.

This is the standard mechanism for loading data which hooks into other mechanisms, including navigation where data can be pre-loaded on link hover or tap and a page is only shown when the data is loaded.

(If the load is known to take longer you can return a promise and #await that on the page, but for data that load quickly, only showing the page once it is done gives a better experience without any layout shifts.)

本文标签： sveltekitShould I access the api directly inside the script tag in a svelte SPAStack Overflow