Svelte Svelte

Server Rendering in Sapper

Check out a free preview of the full Svelte course:
The "Server Rendering in Sapper" Lesson is part of the full, Svelte course featured in this preview video. Here's what you'd learn in this lesson:

Rich explains how the [slug].json fetch data and renders it into the right static file and a static website.

Get Unlimited Access Now

Transcript from the "Server Rendering in Sapper" Lesson

[00:00:00]
>> So when we navigate from another page to the blog page, it needs to get the JSON, this address before it can render this markup here. And if it was doing that inside an unmount handler like we were doing earlier, then what we'd see is a flash of missing content before that stuff loaded.

[00:00:22] What we really want is when we navigate from home to blog, is for that content to get loaded before the navigation occurs. And in Sapper, we can do that by exporting a function called preload from the component. So this index.svelte file here has a script context=module like we saw with that example earlier with a multiple audio element.

[00:00:46] And it's returning a promise that fetches the blog.json file, turns it into JSON, and then passes that data to the component as a prop. So it's able to load the data before the component gets rendered, meaning that you get this seamless client side navigation. And that preload function serves another purpose, which is that if you have the right attribute applied to any anchor tags that link to a particular component, then it's able to preload data before you've even begun navigation.

[00:01:18] So in our nav component over here, On the link that takes us to the blog page, we have this thing rel = prefetch. That is a signal to Sapper that if the user looks like they're about to click on the blog link either because they've tapped the link but haven't yet removed their finger or because their mouse has hovered over the link.

[00:01:44] Then it should go ahead and prefetch the data that it's about to need in order to do that navigation. So that makes navigation nice and fast and seamless. And we can see that in action if we open dev tools and move away from blog and refresh the page, and then look at the requests that are coming in.

[00:02:03] It's gonna clear that so that we don't see it. And now if I hover over the blog link in the nav, you'll see it fetched the blog.JSON before I actually clicked on it. And so now when I click, that data is already loaded and it can render instantly.

[00:02:21] In the case of pages with dynamic parameters like slug.svelte, the preload function received a set of parameters that correspond to the parts of the file name that are dynamic. So in our case, params.slug corresponds to the part of the URL within the square brackets. So for example, if we navigate to /blog/what-is-sapper, params.slug will be equal to what-is-sapper.

[00:02:50] So inside our preload function, we can fetch blog/what-is-sapper.json and that in turn gets passed to this JSON file. Which means that we can then find our data whether it's from our database or by looking on disk. In this case, we're just going through the array and finding the piece of hard coded data inside this post whether it correspond to that slug, and then we can just return that object from the get handler.

[00:03:26] And then we can send it back to the preload function where upon it gets turned into a post that gets passed to the prop, which is then used to render the page. So this preload function runs on the server and then it runs on the client when you do client side navigation.

[00:03:44] So if the first page that you visit when you come to this site is what-is-sapper, then it will run on the server and generate this HTML and serve that back to you. But if you're navigating from home to blog and enter here, then instead of running on the server, the preload function will run in the client.

[00:04:06] So this needs to be what we call universal, it can run in both environments. Now we don't actually need to run a node server to serve this site because it's never gonna change. Until we redeploy it with some new content, every request we're giving URL is gonna return the exact same content.

[00:04:24] So instead of running on node server, what we want to do is export this site as a series of static files. And we can do that in Sapper by shutting down our development server and doing mpm run export, which is gonna build the site in production mode and then it's gonna crawl the site.

[00:04:46] And it's gonna generate files from any links that it finds as it's crawling from index.html outwards. And we see at the bottom here it said npx serve __sapper__/export to run the app, we can look at what's inside that directory. And it's just a bunch of static files that you would use with GitHub Pages or Netlify or any static hosting service.

[00:05:17] So let's do what it says, npx serve __sapper__/export. It's installing serve then it has made that site available on localhost 5000. And there we go. So even though it's a static site with full server rendering, we still get the interactivity in the client side navigation that gives us this nice, slick reload free experience.

[00:05:47] And we can take those files and we can put them pretty much anywhere we like. We've already seen a couple of sites like this today, the Svelte workshop site is a similar sort of thing. This is a statically exported site. And the Cameo Explorer site that we were looking at, this is also a statically exported site.

[00:06:09] Even though we've got, All of the interactivity that you'd expect to have in a JavaScript driven application, it's all just basically static file. There's no server anywhere in site. And in fact sapper.svelte.dev, which is a documentation site for Sapper is itself a statically exported Sapper site.