How to Pass Data from Server using SSR in SvelteKit?

user_15210515 0
Viewed 314

I'm used to using Express with a templating engine, like Handlebars. I want to start working with Svelte and SvelteKit, but I'm unsure how to start working with both. I am stuck on passing data to the frontend from the server. In Express, I'd normally connect to the database, and then pass the data to res.render, where the templating engine would then take over. So far, I think I have to run a handle function to pass the data, and then I can access it from my page. But it seems that the handle function runs for every request, and if all my pages require different data, does that mean I have to use a giant switch statement or something for every page?

Can anybody tell me if that's the right way to pass data over, or if there's a better way. Sorry, I'm fairly new to metaf rameworks and Svelte.

sveltekit svelte web-frameworks javascript
1 Answers

There are two ways to achieve what you want to do. Let for both cases assume you have an about page and want to show dynamic data on this page like some team members. You would have a file called about.svelte (this makes the /about route) with in it something like:

<script>
  export let team = [];
</script>
{#each team as member}
  ...
{/each}

Now how to get the team data to the page itself ?

the load function

The first option is the load function, this is a function that runs before the page is loaded and can be used to fetch data for this page. You would put the following block in about.svelte, usually before the other script block:

<script context="module">
  export async function load({ fetch }) {
    const team = await fetch('/api/team').then(res => res.json());
    return {
      props: {
        team
      }
    }
  }
</script>

Important to note with this one is that you need some sort of api (/api/team in this case) that can give you the data.

a page endpoint

The second option is to make a so called page endpoint this acts as a kind of api and lives next to the page itself. In the same folder as about.svelte add a file about.js:

export async function get() {
  const team = []; // add team data here somehow
  return {
   status: 200,
   body: {
     team
   }
}

what's the difference ?

When to use which approach is mostly up to you, but you have to remember the following two things:

  • The load function will likely need another api somewhere (this does not have to be SvelteKit)
  • The load function is, on the first page, executed on the server and afterwards will always run on the client. The endpoint on the other hand always runs serverside.
user_119561070
Related