We need a clean graphic that visually shows how and when everything is executed in SSR from the server to the client.

[silasabbott]

I've noticed SSR in SvelteKit is a common point of confusion for a lot of people. I think many are missing the point of SSR and how powerful it actually is. It would be awesome to have one place in the docs that explains each part of SvelteKit in relation to SSR, for example:

• <script>
• <script context='module'>
• load()
• stand-alone endpoints and page endpoints
• onMount() and other lifecycle functions
• hooks.js
• prerendering
• hydration

I have a decent understanding by trial and error, but where can I find the most accurate information on this? I do graphic design for a living and am more than willing to take that info and transform it into something clean, organized, and readable so we can get it into the docs. I was thinking something similar to Vue's lifecycle diagram which I heavily relied on back when I was learning Vue.

If you have any knowledge or resources to share you can reply to the separate comment thread below

---

Here's my current understanding when using SSR (SvelteKit's default out of the box). This is not in any kind of order, and obviously there's still a lot missing:

	Server	Client
hooks.js	🟢	✖️
Standalone Endpoints	🟢	✖️
Page Endpoints	🟢	✖️
<script>	🟢	🟢
<script context='module'>	🟢	🟢
load()	🟢	🟢
onMount()	✖️	🟢
beforeUpdate()	✖️	🟢
afterUpdate()	✖️	🟢
onDestroy()	🟢	🟢

Progress

• Make a list of every SvelteKit utility that should be shown in the graphic
• Sort the list by order of execution when a page is requested
• Add any other details unique to each item
• Design a graphic from the list

I think we should start with what runs on the server and the client when a page is visited on a fresh SvelteKit install (without adapter-static or prerendered pages). We can expand on build time and static/prerendered pages later. Honestly though, with SvelteKit being in prerelease, it might be best to take this slow and wait for things to be more settled.

Resources

• YouTube: lihautan

If you have anything to add to this list you can reply to the separate comment thread below.

[0gust1]

A sort of graphic could be nice ! (IMHO: it fits my learning style when I approach a new technology).
It's not that easy, and maybe covering only the sveltekit specificities could help to bootstrap (because in the list above, there are Svelte topics).

[silasabbott]

Good idea—that also brings up the other topic of people getting confused on the difference between Svelte and SvelteKit 🫠

[einarpersson]

I totally agree on this.

I have read the docs multiple times, experimenting, building apps and I have to admit that I'm still confused on "exactly what happens, when, why, where". For me a visual map and / or an in-depth youtube-video (not another "hello world") explaining how all these concepts tie together and dispelling common misunderstandings would have been of great value.

[thenbe]

@einarpersson I've frequently found @tanhauhau channel on Youtube to be a rich source of information when it comes to this type of stuff. His material is a breath of fresh air in a sea full of "hello world" videos.

https://www.youtube.com/c/lihautan/videos

[colinhowells]

Big cosign on that, there are a ton of people making great Svelte tutorial vids but he shows you why things are the way they are and will recreate functionality to demonstrate it in depth

[silasabbott]

Share info here ↓

If you find anything that could help with this, reply to this comment with a list of what you know and/or links to any sources. For example:

• Svelte compiles your code to tiny, framework-less vanilla JS
• Svelte writes code that surgically updates the DOM when the state of your app changes
• Svelte was recently voted the most loved web framework with the most satisfied developers in a pair of industry surveys
• https://svelte.dev/

Thanks!

[thenbe]

I remember coming across this post a while back. There's a diagram linked in that post that could be relevant here, although it might be a bit outdated as some things have changed in recent updates.

[elliott-with-the-longest-name-on-github]

Totally agree. The two biggest confusion points I see are around this and prerendering -- both of which are strongly-related topics.

[malgor]

The diagram that @ambiguous48 mentions was essential for me to understand where session data was coming from and how to get it to the client but it is now sadly out of date. Whatever is produced needs to be put into the official SvelteKit docs in an editable form so that it can be maintained.

[lukaszpolowczyk]

I see this is the last moment to add my "Range and Direction of Data Flow in SvelteKit" diagram.

I wanted to refine it at some point and describe it heavily, with examples, etc., but now it won't make sense.

You can take a look:

SVG version(crashes) - link

Originally posted by @lukaszpolowczyk in #5748 (comment)

[ehzro3]

I couldn't agree more. I'm expecting much more educational material when 1.0 arrives.

[fcrozatier]

Let's draw it together, we can make something clean later. Here's a collaborative link you can update with your understanding of the data flow in sveltekit:
https://excalidraw.com/#room=3f899e0d6f94b1112ac3,QdVfgSg8lDYOolfrQ-TLfA

[oskarrough]

I'm also confused (and excited) by all the options Sveltekit gives you. Here I tried to make a diagram of the different pages and options for loading and posting data:

https://www.figma.com/file/sQHahYhwrUvTpH92osAxzP/how-to-sveltekit

Anyone is welcome to edit. I hope it can help settle on something useful that might end up in the documentation in one form or another. Thanks for pointing me here Enrico/etrain.

[richarddavenport]

That's a pretty good start! Might want to now start incorporating hooks.

[lukaszpolowczyk]

Range and Direction of Data Flow in SvelteKit 1.0:
Maybe someday I'll do a description of each stage for this, along with code and additional explanations and additional graphics, but I don't know when or if at all. :P

I left out the triggers(those things in green, on previous version graphics). I'll make a separate graphic someday with the triggers themselves - things like error, redirect, invalidate, POST etc.

SVG version - link
Corel Vector version - link

[0gust1]

Pretty nice, it looks better and better imho !

I don't graphically understand everything right now, but the global flow and the boxes already help a lot. We currently have a data-flow problem on our app, I'll try to use your graphic proposal as a guide for the team to debug the issue ;)

One remark: you may want to add a mention to the sveltekit routing ("sveltekit client routing" ?) on the client box on the top (it's important imho, to make everyone understand that the router has "two heads")

[lukaszpolowczyk]

One remark: you may want to add a mention to the sveltekit routing ("sveltekit client routing" ?) on the client box on the top (it's important imho, to make everyone understand that the router has "two heads")

@0gust1 I don't quite feel it.
For now it has to stay as it is, because it's hard to include every single thing in a simple scheme. The diagram would get very complicated.
I have no idea how to present client routing and server routing at the same time to make it clear.

If you have the desire, make a fork of this diagram, here the source: Corel Vector version - link
(Menu: File -> Save to cloud as)

[einarpersson]

One crucial thing to realize is that the handle hook won't run on every navigation, only on every new request to the server. So if the client determines that no request to the server is necessary, the hook won't run. This gave me some headache earlier. I remember removing a dummy +page.server.ts (which I thought didn't do anything) but later realizing that it's purpose was to force a roundtrip to the server, triggering an auth check in the handle-hook.

[lukaszpolowczyk]

I will signal that my diagram has a certain shortcoming, and I need to correct it at some point. The structure will change a bit and I have a little problem with it.

And the issue of triggers is completely a person's issue, which I will probably also do at some point....

[multics]

This is a great discussion and the diagram is exciting! Please someone put it onto the website.

Since SvelteKit pre-defines lots of (route) files, e.g. +page.*, +*.server.*, +layout.*, hooks.*, error.*, giving a clear description on when they are executed/loaded and what happens when they are loaded/executed would be a great help to understand this framework.

I personally took some time to figure it out, and realized the design is so brilliant.

So, please put a diagram on the doc site to let more people to see the brilliance.