Next.js - loading feature toggles server-side

[jebax]

Hi there,

I'm trying to integrate unleash into our next.js app using the react proxy client. We previously found that it was unsuitable for use as it didn't support SSR, and recent releases have added some form of SSR support, so I gave it another go.

However I ran into problems when it comes to fetching feature toggles server-side (with context fields), and passing the result down into the client side code. In order for the page content to be the same across server and client, we need to have the server-fetched toggles available in the initial render of the app - this can be done by passing the server-fetched toggles into the bootstrap parameter of the client-side unleash client (you can see an example of this here). It seems that we could go about this a couple of ways:

1. Instantiate a new unleash client with every request, and block page load until the client has started and the toggles have fetched
2. Instantiate a global server-side client

With method 1, we're going to increase page load times significantly so this isn't really an option unless anyone else has other suggestions.

Method 2 works, but the unleash proxy client has no way of checking if a toggle is enabled with context unless you set the context on the client instance. This is opposed to the node SDK where you can do isEnabled(toggle, context). This means that on every request, we have to set the context fields with the current user data and check the toggles. But since it's a global instance, the context is shared across requests, which feels pretty dodgy to me and I could imagine a scenario where a user accidentally gets the unleash context from a different user's request, especially since our app processes a high volume of requests.

So I'm pretty stuck here, and I was wondering if I was missing something, or if anyone had better suggestions for how to fetch server-side toggles?

From what I can tell, in order to get full SSR support, we need one of 2 things:

1. The unleash proxy client needs to be able to check isEnabled without setting context on the instance itself OR
2. The node SDK needs to have some way of retrieving all toggles in the correct structure that allows it to be passed into the bootstrap option of the react proxy client. Then we could use the node SDK on the server and the react proxy on the client.

Like I say, I could be missing something here, so if anyone has better suggestions, please let me know! Thanks :)

[thomasheartman]

Hey, @jebax! Thanks for the question and for the amount of research you've put into it. I might have a suggestion for you, but let me add additional context for you.

tl;dr: You might be able to use the Unleash proxy and its getEnabledToggles method.

On SSR

We don't have a complete story for SSR at the moment, but we're seeing questions about it more and more frequently, so it's probably something we'll devote more resources to in the somewhat near future.

On your solutions and options (additional context)

Regarding your two options, I agree that instantiating a new Unleash client with every request would incur prohibitive load times.

Regarding option two:

the unleash proxy client has no way of checking if a toggle is enabled with context unless you set the context on the client instance. This is opposed to the node SDK where you can do isEnabled(toggle, context). This means that on every request, we have to set the context fields with the current user data and check the toggles.

That is a good point. I think the reason the proxy clients don't accept a context parameter is that their intended use is for a single user on a web page. In those cases, there's no real need for setting context on a per-toggle check. In fact, it might be detrimental to the user experience if you're not very careful (imagine if the context used is different on two different parts of the same page).

A potential solution: the Unleash proxy

From what I can tell, in order to get full SSR support, we need one of 2 things:

1. The unleash proxy client needs to be able to check isEnabled without setting context on the instance itself OR
2. The node SDK needs to have some way of retrieving all toggles in the correct structure that allows it to be passed into the bootstrap option of the react proxy client. Then we could use the node SDK on the server and the react proxy on the client.

As mentioned previously, I don't think there's any plans to add a context parameter to the proxy client at the moment (though if that turns out to be the best solution for something , then it's definitely worth evaluating ☝🏼).

For your second point, though, that is doable: In fact, that is exactly what the Unleash proxy is. It is a wrapper around the node SDK that formats toggle data for proxy clients.

It's not very well documented at the moment, but the Unleash proxy does export its Client implementation. Using that, it should be possible to do what you want, though the path isn't optimal at the moment. I haven't tried this, but if you'd be willing to work with me, let's see if we can make it work!

You'll need to import the client from the proxy package and construct an instance of it. Like with Node and other SDKs, you need to provide it with an Unleash URL, API keys, etc.

When you have constructed the client, you should be able to call its getEnabledToggles with the context to get a list of feature toggles that you can pipe into the proxy client.

The Proxy constructor takes an argument of type IProxyConfig. There's a lot of options here, so the easiest way is to use the createProxyConfig function, which is also exposed. Note that even though you won't connect any clients to the proxy API, you still need to provide the clientKeys option due to how the proxy is set up.

So it'd be something like:

const { Client, createProxyConfig } = require('@unleash/proxy');

const proxyConfig = createProxyConfig({
  unleashUrl: "",
  unleashApiToken: "",
  clientKeys: ["placeholder"] // just`[]` might work, but I'm not sure
  // ... you might also want to disable metrics or perform other config here
})

const proxy = new Client(proxyConfig)

// whenever you want to check toggles:
const proxyClientToggles = proxy.getEnabledToggles(context);

How does that sound? Would you be willing to check that out? ☺️