SSR is used for pages as well, but prerendering means that rendering happens at build time instead of when a visitor visits the page.

This function allows you to modify (or replace) a fetch request for an external resource that happens inside a load function that runs on the server (or during pre-rendering). For example, your load function might make a request to a public URL like https://api.yourapp.com when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).

network requests are a big deal, and having to deal with this kind of thing is one of the prices of switching away from server-side rendering to a distributed system

When fetch runs on the server, the resulting response will be serialized and inlined into the rendered HTML. This allows the subsequent client-side load to access identical data immediately without an additional network request.

The thing that makes the client-side invocation return the same data as the server-side one is that the results of calling fetch during SSR are serialized and inlined into the page. This ensures consistency when the page hydrates, and saves network round-trips (and also means less data needs to come over the wire, since everything can get compressed using the same gzip dictionary or whatever).

Preload functions are typically used to load data that the page depends on, hence its name. This avoids the user seeing the page update as it loads, as is typically the case with client-side loading.

I put together a POC that resembles react-rails and helps with server- and client-side rendering, and provides a view helper (svelte_component):

webpacker-svelte misses server-side rendering, though.

(That's a SMUI button and card running in a Sapper instance (and the markup is there on page load with JS turned off).)

Node doesn't have a DOM available. So in order to render HTML we use string concatenation instead. This has the fun benefit of being quite efficient, which in turn means it's great for server rendering!

It's designed for Single Page Applications (SPA). If you need Server Side Rendering then consider using Sapper.

It's recommended to put the fetch in onMount rather than at the top level of the <script> because of server-side rendering (SSR). With the exception of onDestroy, lifecycle functions don't run during SSR, which means we can avoid fetching data that should be loaded lazily once the component has been mounted in the DOM.

By rendering important parts of the application with the real data on the server-side, an isomorphic application can show a meaningful initial page. On the other hand, client rendering application can’t show any meaningful information until it fetches all external data it needs. In the meantime, the only thing a user will see is a loading indicator.

server-side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup. Check out the reference implementations, bit by bit.

// require('hammerjs') when in a browser. This is safe because Hammer is only // invoked in componentDidMount, which is not executed on the server. var Hammer = (typeof window !== 'undefined') ? require('hammerjs') : undefined