Using Unleash with Svelte SSR

[JE4GLE]

I'm currently working on integrating Unleash with Svelte. I followed your documentation on how to integrate it on the client-side.

Now I'm facing the problem on how to integrate it on the server side. For example, in my +page.server.ts, I want to check the status of a flag. For this, I'm expecting a global unleash instance to be created on server startup, but I'm unable to find documentation for this.

Is anyone able to assist with this issue? Thanks in advance!

[gastonfournier]

Hi @JE4GLE, can you add more details on what you're trying to achieve here? Is it rendering different pages based on the value of a feature flag or do you have something else in mind?

[JE4GLE]

Thank you for your answer. Exactly, I want to prevent sending some data to the client based on feature flags. That may be data from the database or serving an entire page.

[gastonfournier]

If you also want to prevent that information from going to Unleash, I think you'll have to use the server side SDK in Node.

Svelte uses the proxy client https://github.com/Unleash/proxy-client-svelte/blob/c661f8e1b26b76d84de0d2b6b99d63298c57e5c2/package.json#L53 which sends all the context information to Unleash. It's true your client's won't see it, but it will leave your network. In that case I'd recommend you use the Node SDK https://docs.getunleash.io/reference/sdks/node because you won't be able to reuse the client from Svelte SDK to do backend.

If you're ok using the frontend SDK in the backend (i.e. sending context information to Unleash server), then there might be a way of reusing the client, but I don't know how. I can ask around our team.

But, the more I think about it I believe it's fine to have two clients, one for frontend and one for backend, that's what most languages would have to do.

[JE4GLE]

I also thought about using two clients (Svelte frontend and Node backend), but there is a conflict between both. When setting up both, there are two instances running simultaneously during SSR. Unleash doesn't like that and throws an error.

[gastonfournier]

Oh... If that's the problem it might be related to https://github.com/Unleash/unleash-client-node/blob/2e59c9645b4bee1320bbd4448a5736f3849432c1/src/unleash.ts#L93-L97

This is a feature we've built to help notify users about potential mis-configurations, which was a recurring topic. And we didn't have a case were you'd need two clients (perhaps we should differentiate between frontend and backend clients 🤔). But if that's the issue you're facing, you can disable that check from the configuration of Unleash: https://github.com/Unleash/unleash-client-node/blob/2e59c9645b4bee1320bbd4448a5736f3849432c1/src/unleash-config.ts#L35

[FredrikOseberg]

@JE4GLE Do you need to run both in the backend? I imagine you could use the NodeSDK in the backend to fetch the feature flags and use that to seed the frontend client with the correct data?

I'm not that familiar with Svelte, but that's how I've done feature flags with Unleash and SSR in the past with other frameworks.

[JE4GLE]

I think it works now. Another issue I got is when the Vite server "restarted" in dev mode due to some changes made. In this case, Unleash reports an already running instance and I need to restart the dev server completely.

I'm now using NodeSDK for backend and Svelte client for frontend :)