I'm trying to understand how SvelteKit renders my web app in different scenarios, and I'm a bit puzzled by load().
I created a page with a load function which calls an external API and uses the response as prop for the component. In .svelte-kit/output/prerendered/pages/mypage.html I can see that it has fetched the data during the build step, and prerendered my html using the response.
When I then navigate to that page in my web app, the network tab tells me that it calls the external API before rendering it. So, what was the point of prerendering then?
The SvelteKit docs says:
A component that defines a page or a layout can export a load function that runs before the component is created. This function runs both during server-side rendering and in the client, and allows you to fetch and manipulate data before the page is rendered, thus preventing loading spinners.
I don't understand this. How can I prevent the loading spinner if its calling the API every time I navigate to the page? When is it supposed to use the prerendered html?
The whole concept of rendering both in the client and server doesn't make sense to me. The way I see it, I would want to prerender on the server if the data is static, but if it changes then I would want to call the API every time I go to the page (maybe with caching). But why would I want to do both??