Skip to content

Svelte JS from Pug

Brian Takita
Authors:Brian Takita
Posted on:July 22, 2017

On my current project, I will be migrating from Pug to Svelte. The key concepts are Server Side Rendering, Hydration, client/server architectural options.

Now it's time to implement server side rendering (SSR) using SvelteJS.

On my current project, I will be migrating from Pug to sveltejs. The key concepts are Server Side Rendering, Hydration, client/server architectural options.

SvelteJS allows one to render in dom & server side environments. SSR is simpler than DOM rendering since Svelte does not worry about oncreate, ondestroy, or events, or methods. data & computed properties still work to create the properties and helpers are also available.

Svelte SSR is fully capable of replacing any server side html/xml templating system. For my current project, I replaced PUG.

Here's a relatively full-featured example of the Isomorphic Svelte components that utilize hydration.

One the server side, the __SSR component (Index__SSR.html) wraps the content (Index.html) component. On the dom, the Index.html component is rehydrated when loaded.

This allows html to be generated on the server side (enabling HTTP caching), while allowing dynamic behavior to be rehydrated in the dom.

All of this happens solely in Svelte components, creating a unified architecture for both server side & dom rendering.