Svelte kit 1.0 upgrade

Svelte kit is here and with its latest version it introduces several new things like changes in routing, server logic, typescript support… These changes remind me about the latest version of next js. It seems that it is a trend that web frameworks with client rendering in focus are changing to have server rendering first and deliver only needed js to client. This way is new-old solution since we have seen similar things in traditional web frameworks like asp.net, mvc .net, nodejs with jade,…

What changes in this version

Routing

• Svelte follows the same path as Next js in routing since it is using file based routing and folders to organize routes.
• now we have several new conventions, +page.svelte. +page.server.ts, page.ts and types.d.ts

Comments

• the new conventions with plus sign before is kind of weird to me because I usually name things without special characters like plus sign.

Fetching data

• Two new conventions for loading data, +page.server.ts and +page.ts. So instead of baking loading data in the same svelte file as before so now logics are separated to ts files. To choose page.server or page depends on you want logics server only or even clientside
• the loadData removes props property needed in the previous versions

Comments

• This move is very similar to nextjs. I do not have many comments on this thing. The separation rendering and fetching logic reminds me about traditional web frameworks. In general I think it is good to separate server data logic and rendering logic.

Layout

• +layout.svelte will handle shared layout between pages.

Comments

• this layout feature is general beneficials when we want to share things between pages.

Typescript support

• typescript is now supported even in svelte files via a conventional comment. /** @type {import('./$types').PageData} */

Comments

• I feel this is very unnatural way to add types to svelte files. I prefer the way we do client rendering in next js.