Most of the time you will probably run your Svelte code client-side, but there are scenarios where you can benefit from server-side Svelte rendering.SEO
My experience is that applications that make ajax calls to fetch data are particularly challenging to index. The crawler might successfully render the initial static part of the application, but the data will be missing since the crawler won't make the necessary ajax calls.
Technically you could build a Svelte application without any client side components, but it would be completely static. Basically the application would behave much like an old server-sidephp application. Great for crawlers, but real users typically expect a richer user experience.
This is where server-side meets client-side.
Once the server generated html is fully rendered in the browser, we can start a client-side counterpart of the application. The client-side version picks up where the server side application left off.
Both versions of the application may use the same Svelte components, but it's important to understand that they execute independently of each other. The server-side version does not know about the client-side version and vice versa.
It's also important to understand that there is no default state sharing between client and server (e.g. data property).Article Carousel
I decided to use server side Svelte to build an article carousel for the landing page of my blog. The idea is to use a Svelte component to cycle through articles in four of my article categories.
The carousel should load instantly on page load, so I decided to render the initial view on the server. Once the page has loaded I start the client-side counterpart of the Svelte component to dynamically cycle through the articles.
I am not known for css or design skills, so don't expect a pretty UI, but here's how I wired everything up.
Let's take a look at the server code.
The first thing we have to do is activate the compiler by requiring svelte/ssr/register
require( 'svelte/ssr/register' );
Next we have to require the component html file to get a handle to the component.
We then call the render method and pass it an initial data object. The data object is a standard Svelte data object.
After calling render we get back a fully rendered component. We now have to pass this to the node view engine.
In my case I am using Express with Mustache, so I can just pass the component as an object to the render method. Then in my index.html page I use Mustache view syntax with triple curly braces to render the component on the page like so.
What we have so far is enough to render the initial view of my component, but it won't support cycling through new articles every few seconds.
To achieve this we have to start up a client-side version of the Article component.
The client side version is loaded as a standard Svelte client-side component.
Once the client-side version is activated we will have two components in the DOM. As soon as the client-side version is ready to take over I wipe out the server-side version.
There might be a more elegant way to do this, but I simply clear out the server generated DOM element and flip a style on the client-side version.Demo
If you want to test out my server-side vs client-side view you can find ithere.
In addition to the article carousel I also built my main navigation as a Svelte server side component. The nav is a pure server side component with no client side counterpart.