SSR explained in SvelteKit

3
votes

I recently started working with Svelte via SvelteKit and I have a few questions about this framework to which I haven't been able to find any direct answers in the source/documentation:

  1. SvelteKit has SSR and in the documentation it says:

All server-side code, including endpoints, has access to fetch in case you need to request data from external APIs.

  • What code is server-side rendered besides endpoints and how it decides this? All the code from scripts from svelte pages runs on the client or some of it runs on the server?
  • In order to make use of SSR locally you need an adapter for it or does svelte start a server on its own?
  • How does SSR work in a production environment like Netlify for example. Is the netlify adapter is used for SSR (running the endpoints in a netlify function)? If a netlify adapter is not provided, how/where would the endpoints run?
  1. If I want to use custom netlify functions in a sveltekit project what configurations are needed (besides netlify.toml and netlify adapter) in order for netlify to recognize the functions from inside the functions directory?
  2. What is the difference here between SSR and prerendering? SSR is used only for endpoints and other js code and prerendering is used for generating the Html to send it to the client which will then be hydrated, with the compiled js code, also sent to the browser?

Thanks!

1
server-side-renderingsvelteprerendersveltekitnetlify-function
Hi, it seems as though you have multiple questions: you should separate these into multiple posts. – Connor Low

1 Answers

6
votes

By default, pages are also server-side rendered when you first visit a site. When you navigate to a subsequent pages they will be client-side rendered.

Adapters are only used in production. If you run npm run dev for local development you still get SSR. In production, how exactly SSR is run depends on the adapter you choose. An adapter is required for production. adapter-node runs SSR on a Node server, adapter-netlify runs SSR in Netlify functions, etc.

See here for discussion of custom Netlify functions: https://github.com/sveltejs/kit/issues/1249

SSR is used for pages as well, but prerendering means that rendering happens at build time instead of when a visitor visits the page. See this proposed documentation for more info: https://github.com/sveltejs/kit/pull/1525