I have just read on the SvelteKit docs that SSR is enabled by default and you need to manually disabled it if you don't want it present. This is great for SEO so I'm happy that SvelteKit enforces this by default 😁
I'm getting a little confused though with how SSR interacts with Client side routing.
When a SvelteKit app with client side routing enabled is rendered into a browser, is the entire compiled SvelteKit app passed to the browser so that the main content of the page can be swapped in and out with JavaScript when you navigate to a new route on the client side?
e.g. :
You have a SvelteKit app with two pages /home
& /about
. A user travels to the /home
page. Would then compiled content of the /about
page also be passed to the client on page load of the /home
page with client side routing enabled?
If this is the case should it be a common practice to disable client side routing by default? This way the entire SvelteKit app wouldn't be loaded into the browser when a user may only view a single page of it ?
Thanks for reading ! 👋🤠
SSR renders the HTML for first page load, after that the client requests the necessary code/styles for the current page and any pages that the user navigates to on navigation. Subsequent HTML is then generated on the client using JS.
It does not load everything up front, it just gets what is necessary on demand. It would actually be slower if you turn client side navigation off, because then the whole page would have to be regenerated even though only a part changes and chunks of the required code may already be loaded.
See also Rich Harris's presentation on "transitional apps", i.e. the combination of server-side and client-side rendering.