Lab 3: More SvelteKit

Enda Lee 2025

PDF version

Getting Started

1. Download or clone this repository.
2. Open the app folder in VS Code
3. In a terminal run npm install
4. Start the application using npm run dev

Introduction

This lab will cover the following topics:

1. Server-Side rendering (SSR) vs Client-Side Rendering.

2. Environment variables and keeping secrets safe.

3. Passing parameters via the URL.

4. Handling events.

5. Exercises.

1. Client-side Rendering (CSR) vs Server-side Rendering (SSR)

Client-side

The current product page, http://localhost:5173/product, loads data from https://dummyjson.com/products on the client-side. All of the product data is loaded after the page loads. This can be verified by logging the products after they are loaded in the page load() function: src/routes/product/+page.ts:

After adding the console.log and reloading the page, the array of products received from dummyjson will be displayed in the browser console - proving that the data is loaded client-side:

Server-side

Changing to server-side rendering is easy - rename src/routes/product/+page.ts to src/routes/product/+page.server.ts

This change marks the script as server-side only meaning that it will be executed and used to render the page, before it is sent to the browser - Server-side Rendering (SSR).

Before testing the page again, there are a few errors to fix. You should see some keywords underlined red, and the filename also in red:

The errors are displayed as PageLoad only works client-side. The error can be resolved by using PageServerLoad instead.

After saving the file, reload the application and check he console for log messages. The page should load as before but the browser console will not display the log message as before. Instead, you will find that the message has been logged on the server-side - check the server terminal in VS Code:

Also check the Network tab in the browser developer tools and compare with client-side loading.

Server and Client Product loading

In this example, the the initial data will be loaded server-side but updates loaded client-side. A user case for this might be filtering products, for example if a user wanted to see products from just one category.

The products page includes a menu on the left side with some placeholders. We will use these to filter products by category. The dummyjson docs show how to request data by category, see: https://dummyjson.com/docs/products#products-category.

1. Modify product/+page.svelte

This page always runs client-side in the browser. The changes are as follows:

1. declare the variable products and inititialise it with data.products from the load() function when it executes server-side.

2. Add a new function getProducts().

   • This function accepts a parameter, catName with a default value (this will be useful later).

3. If catName has a value then modify productURL so that it requests products from a category matching the value of catName

4. The function filterByCat() will be used as an event hander function in the next step.

2. Use a button in the left menu to filter products

The first button will be modified so that when it is clicked, only products from the smartphones category will be displayed. To achieve this, add an onclick={} event hander on the first button in the list and use it to call the filterByCat() function and pass the category name as a parameter.

<button class="list-group-item list-group-item-action" onclick={()=> (filterByCat('smartphones'))}> Smartphones </button>

1. When clicked, the button calls filterByCat('smartphones')

2. Products are retrieved via getProducts('smartphones')

3. The result updates products and the page.

4. This all happens client-side.

3. Test and check where console.log messages are displayed.

You should see that the initial products load happens server-side but subsequent loads, triggered by the filter, happen client-side and are logged in the browser.

2. Passing Parameters via the URL

Dynamic routes provide a way to pass paramters (values) to a page at runtime in order to generate dynamic content.

In this example, the /about route will be modified so that if the URL includes a name a greeting will be displayed.

For example a route to /about/Bob will display:

These dynamic routes are often refered to as slugs. To try it it:

1. Add a subfolder to the about route, named [name] (note the square brackets are required).

   If VS Code displays the path as /about/[name] that can be fixed by disabling Compact Folders in VS Code Preference or Settings.

2. Then add +page.ts and +page.svelte to the new folder so that it looks like this:

   

3. Add code to read the name parameter then the page loads in about/[name]/+page.ts Note passing of params to the load() function.

   

4. Display the greeting in about/[name]/+page.svelte

   

3. More event handling

Handling page events is useful as it allows content to be dynamically uopdated depending on events such as clicks, data entry, etc.

This example displays a running total. Each time a value is entered and the button clicked, the new value is added to the running total.

1. Start by adding a new route named runningtotal to the application including a nav menu entry so that it can be loaded.

2. Open +page.svelte and add code below - read the comments for details

   

Exercises

1. Show all of the categories in the left menu and attach event handlers to allow filtering by each. Do not hard code!

   • Add an extra button to display all products when it is clicked

   • Use the dummyjson docs, e.g. https://dummyjson.com/docs/products#products-category_list

2. Modify the parameter example to accept a second parameter to define the number of times to display the welcome message, for example /Bob/3 should display the Welcome mesage 3 times

3. Add functionality to allow the running total in part 3 to be reset (via a button click)

4. Build a simple calculator with the following functionality:

   • Allow the user to enter 2 numbers

   • Allow user to choose Add, Subtract, Multiply, or Divide

   • Validate the inputs

   • Display the input values and result (style appropriatly)

5. Add a new route which accepts two values and an operator (add, sub, multi, div). The perform the calculation and display the result.

---

Enda Lee 2025