Server-side Svelte

Published: Thu Jan 12 2017

In the following post I will show how to make use of server-side rendering in Svelte.

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

In my opinion the primary use case for server-side rendering is SEO. Doing an initial rendering on the server will make your website much more crawler accessible. Crawlers typically support some JavaScript execution, but a complex JavaScript application is unlikely to be indexed correctly.

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.

Doing the initial rendering on the server allows crawlers to download the application as fully constructed html. There is no need to execute JavaScript on the client to compose the initial view since the view was already built on the server.

Server-side vs Client-side

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-side PHP 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.

I start by creating an Article component that will be used to render the articles in the carousel. The component should probably be split into two components, but keeping it as one for the purposes of this blog post.

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.

{{{articles}}}

Client

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.

Because the nav is so static, there is no reason to regenerate the server side html for every request. As an optimization I have decided to cache the different variations of the nav. The only difference between the different versions of the nav is that the "active" nav items style is applied to different elements.

Here is some basic caching logic that ensures that we only generate each nav version once.