New and upcoming features coming to SvelteKit

This is my personal take on Rich Harris's talk with Svelte Society video. As I took some notes while watching it I decided to write down the best I could of what he said during his talk, so I could publish in a blog post and take advantage of it while working with SvelteKit.

---

Recent additions to the framework

1. Optionally install Playwright (E2E testing tool kinda like Cypress) when you create your SvelteKit app for the first time.

2. Page Endpoints: After this was introduced some time ago, now it's the recommended way to do data fetching. Quoting Rich: "For the majority of cases, page endpoints are now the recommended way to do data fetching in SvelteKit" and "You can still use load because there are some situation where it's useful like if you're hitting an external api and you don't want to go via your own server".

3. Generated Types: Endpoints generate types in .svelte-kit/types. They're useful because if we have a route [id].svelte we can import these generated types in our Page Endpoints or Load functions with URL params type safety. It provides us an alias ./[id] for easier imports.

4. Route Matching: A way to define routes with params matching a Regular Expression. Docs. In my case, I'm using a [id=integer].svelte route along with Generated Types so I don't have to check if my id parameter is, indeed, a number.

5. Named Layouts: We can now create layouts with an explicit name and then use them instead of the default layout by referencing the layout name. Docs.

6. Endpoints: Quoting Rich: "Previously you could only GET pages and that was a limiting factor. With page endpoints you can now POST to pages, or PUT or DELETE or any other HTTP verb besides GET". We can now handle mutations by using these HTTP verbs. What's more, once these handlers run, the GET handler runs another time to bring fresh data that we could have mutated recently. This is similar to how Remix handles this with actions and loaders, but "more HTTP-ish because we're actually using the HTTP verbs here" according to Rich.

---

Stuff coming to the framework for 1.0

• Layout Endpoints: A way to provide data to a layout, like the same thing that we have with Page Endpoints. In the future, we could have a __layout.svelte with its endpoint in __layout.ts that provides data to the layout.
• Prerendered Endpoints: A way to mix some data that a page needs prerendered ahead of time, along with data that need to be generated on demand, so "server rendering could take less time and be more cost effective". This means prerendering pages as well as endpoints, something that we can already do now but these new changes will allow us to do these things at a more granular level.
• Better handling of config.kit.paths.base
• Navigation Types: Something that would allow us to know more about the kind of navigation (like going backward/forward, first time loading a page, programmatic navigation with goto) before or after the user navigates, because different navigations could involve different responses.
• Modal Navigation/History Store: Kinda like Instagram does when you click on a photo on the web, where it opens a modal for the first time, but if we refresh it takes us to the page for this specific photo. This is hard to do right now in SvelteKit.
• Scoped Middleware/Hooks: "Scope these only for a subset of your app", like layouts.
• Client-Side Hooks: Run client-side initialization before your app runs.
• Rename src/routes to src/app
• getLoadArguments: To make it easy to integrate GraphQL clients. Too abstract right now, should wait for examples.
• Streaming requests and responses: Something that could be done on Node.js but not on all serverless platforms, so it wasn't a priority until now.
• Consistent handling of environment variables: Right now they are only handled through Vite.
• Various bugfixes, docs, examples and demos: New tutorial for SvelteKit, like the one for Svelte.

😱"Stable release not tooo far away"😱

---

Stuff coming to the framework post 1.0

• i18n Internationalization
• Incremental Static Regeneration (ISR, like the one in Next.js), and even better, on demand ISR via webhook to prevent these cases where users get slightly stale pieces of content in ISR.
• Faithful dev environments to prod environments
• Websockets/Realtime
• Better monorepo support for packages
• More performance improvements - import maps, preload links...

---

I hope this summary of what's coming next to SvelteKit was interesting to you. I also hope I explained everything right, but if you think I'm wrong don't hesitate to point that out so I can correct it for future readers and myself!

Comments

[SHAREEJ V K]

Yes these are nice features.
Named layouts now available in latest release there is a video on how to do named layouts in nested routes in SvelteKit
youtube.com/watch?v=hKg_V3jouLk

[Marcelo Paternostro]

That's great. Thank you!