Option server-side-rendering: :auto

ssr: :auto is the default option, as set on config file and can be overridden on the view helper.

By passing the ssr: :auto option to the view helper, it checks if the request is an initial request (request header X-Turbo-Request-ID is present // configurable by non_ssr_request_header):

On Initial-Request, it adds the attribute data-svelte-on-rails-initialize-action="hydrate" and returns a server side rendered component that will be hydrated on the frontend by the npm package.

Otherwise it adds mount instead of hydrate, and renders a empty element, but provided with the necessary attributes for the npm package.

More details to this point you can find on the npm package.

This works perfectly with hotwired/turbo because the javascript is only loaded on very first load to the frontend, then the most work is done in frontend and the server is relieved, except on initial request. You will see no unpleasant «blink» on the page.

Turbolinks

If you are working on turbolinks, you can config the header or set something like

document.addEventListener('turbolinks:request-start', (event) => {
    var xhr = event.data.xhr
    xhr.setRequestHeader("X-Turbo-Request-ID", "any-content-for-skip-svelte-ssr")
});

to your javascript file.

Tip: Performance optimisation for dropdowns

For example, with dropdowns, you will never see the unpleasant «blink» effect because the Svelte component is not visible for the first moment after rendering. Server-side rendering is unnecessary here. You can pass ‘ssr: false’ to the view helper. This relieves the server and reduces loading time.

Tip: Testing

Consider setting ssr: false for testing only for performance reasons. Yo can override this on a attribute on the view-helper for specific components. But, in normal cases it should not be neccessary testing ssr explicitly.