Book Image

SvelteKit Up and Running

By : Dylan Hildenbrand
Book Image

SvelteKit Up and Running

By: Dylan Hildenbrand

Overview of this book

The JavaScript ecosystem has grown vast, complex, and daunting for newcomers. Fortunately, SvelteKit has emerged, simplifying the process of building JavaScript-based web applications. This book aims to demystify SvelteKit, making it as approachable as it makes web app development. With SvelteKit Up and Running you’ll be introduced to the philosophy and technologies underlying SvelteKit. First, you’ll follow a standard educational programming approach, progressing to a 'Hello World' application. Next, you’ll explore the fundamental routing techniques, data loading management, and user submission, all through real-world scenarios commonly encountered in day-to-day development, before discovering various adapters employed by SvelteKit to seamlessly integrate with diverse environments. You’ll also delve into advanced concepts like dynamic route management, error handling, and leveraging SvelteKit to optimize SEO and accessibility. By the end of this book, you’ll have mastered SvelteKit and will be well-equipped to navigate the complexities of web app development.
Table of Contents (19 chapters)
1
Part 1 – Getting Started with SvelteKit
5
Part 2 – Core Concepts
10
Part 3 – Supplemental Concepts

Creating Server Pages

In previous examples, we’ve used the +page.js and +page.server.js files for loading data. Often, they can be used interchangeably, but when is the best time to use which? In this section, we’ll break down some of the differences between the two and also discuss various features available in the +page.server.js files. We’ll break it down into these topics:

  • load()
  • Page options
  • Actions

load()

As we’ve seen in previous examples, data can be loaded into a +page.svelte component by exporting the data property on that page. Both +page.js and +page.server.js can then be used for loading data to that page template as they can both export a load() function. When to use which file depends on how you plan to load that data. When run in a +page.js file, load() will run on both the client and the server. It is recommended to load data here if you are able, as SvelteKit can manage grabbing data from calls with fetch(). This...