How the page load function works in Svelte / SvelteKit

Stefan Schuchlenz — Thu, 16 Dec 2021 07:03:23 +0000

When starting off with SveltKit, I realized that somehow getting an url parameter into a page component wasn't super clear.

The example

Let's say you have a component PostList.svelte which holds some posts which you get from an external API and which you want to link to a url structure like mydomain.com/blog/[id] to show the detail of a blogpost.

Getting the id into the link inside the post loop is easy but then what?

First, let's create a Svelte file in /src/routes/blog named [id].svelte.

This tells SvelteKit that we have a template for /blog/some_id to use for our blog post detail.

Inside this Svelte file, we create the following code:

<script context="module">
  export async function load({page}) {
    const id = page.params.id;
    const url = `https://api.somedomain.tld/posts/${id}`;
    const res = await fetch(url);
    const product = await res.json();
    return {props: {post}}
  }
</script>

<script>
  export let post;
</script>

<h1>{post.title}</h1>

What this does

First, we tell Svelte that we need this JS to run first hand when we call the route, therefore the context="module" part.

Then, we create an async function load which gets the page from our requests - this holds the url params which we assign to a constant in the next line and use it to fetch the data from our API.

Once we've awaited the result we need to transform the resulting promise to json with .json() and return it as props for our Svelte component which then shows the post name in its headline.

This is just a quick and very basic example, more info on enriching your page components with load() functionality can be found in the Svelte docs at https://kit.svelte.dev/docs#loading

A new stack - from Vue.js to Svelte & more

Stefan Schuchlenz — Thu, 16 Dec 2021 06:37:01 +0000

Recently I gave Svelte a shot after I neglected it for quite some time (just basically tested it out right when it came out but decided that at the time, it wasn't for me).

Boy was I surprised! After working extensively with React and then Vue.js for quite some time, meandering to stuff like gridsome and nuxt.js in the process I was really surprised how amazing Svelte and SvelteKit have become.

Since at my company we are currently bootstrapping a new e-commerce startup I've decided to go with a totally new stack (at least for the MVP) and if this is interesting for you guys, I'm thinking about making a series of posts documenting the journey - so drop me a line or fave this if you like it ;)

The components

Currently I'm not yet 100% sure which components to pick from the selection since we're still evaluating everything for the project but here's the shortlist:

backend-as-a-service with graphCMS or cosmicJS
authentication-as-a-service with Auth0
e-commerce with CommerceLayer or Vendure
frontend with Svelte
graphQL and REST for the data

What I absolutely like about Svelte is that components are really readable and since it all boils down to plain vanilla javascript it just feels a lot lighter than Vue or React. I also love that it plays nice with one of our main staples, Tailwind CSS, and that the local dev environment is blazingly fast.

DEV Community: Stefan Schuchlenz

How the page load function works in Svelte / SvelteKit

A new stack - from Vue.js to Svelte & more