Fullstack Svelte with SvelteKit by Rich Harris | Preview

[MUSIC] Hi, my name is Rich Harris. I'm an engineer at Vercel and the creator of Svelte. I made this course so that you would have the definitive guide for learning how to use Svelte and SvelteKit to build apps of all shapes and sizes. From small demos all the way up to full stack production grade applications. In this SvelteKit course, you'll learn how to build full stack applications with server-side rendering,

rooting, environment variables, data fetching and all of the other ingredients that go into making a successful performance full stack application. I hope you enjoy it. Just as layout.svelte files create UI for every child route layout.server.js files load data for every child route. So I suppose we'd like to add a more posts sidebar to our blog post page. We could return summaries from the load function here that powers the blog page.

In the same way that we're returning it from the page server js that powers the index page but that would be repetitive. Instead, what we're gonna do is rename this file to layout server js. And you'll notice that this page continues to work. It's still able to access the summaries data that's being returned from the layout load function.

So now if you go to the individual posts page we have a layout already scaffolded out here. And we can add a sidebar inside here just below the main element. Give it a title of more posts then we'll create an unordered list and then we're gonna iterate over data.summaries as slug, title,

I'm just gonna copy the code on the left into this component. And you can see that we're now able to render the summaries in the sidebar on the blog page as well as the blog index page.

And what's neat about this is that as we navigate between these posts, we're not having to go back to the server and reload those summaries. Because SvelteKit is aware that even though the post page has changed the layout has not changed and so we don't need to go and refetch that data. So in the chapter on loading data we saw how you can export a load function from your page.server.js and your layout.server.js files. While we can also export page options from those files, we can export an SSR Boolean, a CSR Boolean, prerender value and

the trailing slash value and this control how the page behaves. And in the following exercises we're gonna learn about each of these in turn. All of the page options that we're about to discuss can be exported from individual pages or they can be applied to groups of pages by exporting them from a layout file. So if you want some behavior to apply to your entire application, you can put it in a root layout js file and then in child pages you can enable or

disable other aspects of that behavior as you need. This allows you to mix and match different behaviors in your application. For example, you can have an application that is mostly pre-rendered as static HTML but has some dynamic pages that are rendered with personalized data for example. And so, this makes SvelteKit very versatile for whatever kind of application you're building. The first one we're gonna learn about is, SSR. The server-side rendering is the process of generating HTML on the server and