I don't think that will run as expected on Cloudflare/Vercel etc. I'll experiment with it later this week. And again, if you have any user-land implementations, sharing it will help :)

Well, we are using unleash-client for now, but wanted to migrate to @unleash/nextjs. We are using a Unleash client instance, which will just fetch definitions every n seconds in the background. The client then exposes unleash.getFeatureToggleDefinitions() method which just returns these definitions from memory.

Something similar to this could work for us:

let definitions: Promise<ClientFeaturesResponse> | undefined;

export const getDefinitions = async (): Promise<ClientFeaturesResponse> => {
  if (!definitions) {
    definitions = loadDefinitions();
    setInterval(async () => {
      const updated = await loadDefinitions();
      definitions = Promise.resolve(updated);
    }, 15000);
  }
  return definitions;
};

from unleash-client-nextjs.

Ok. Thank you for explaining 👍🏻
I'm in favor of wrapping cache(getDefinitions(...), ttl) in a functional style instead of OOP instances. It's flexible. An example use case with long-running Next.js server is definitely something I'd like to cover soon.

from unleash-client-nextjs.

What we have right now

Server-side

App Router

You can do it with App Router server-side fetch cache, example here:
https://github.com/Unleash/unleash-client-nextjs/blob/main/example/src/app/app-page/page.tsx#L22

  const definitions = await getDefinitions({
    fetchOptions: {
      next: { revalidate: 15 },
    },
  });

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching#caching-data

Pages Router

You can have an API endpoint that will fetch definitions, with cache-control (Docs). Then use this URL as source of definitions. As in middleware example.

Client-side

Unleash Edge

If you need to scale right now, we have Unleash Edge. It's written in Rust, crazy-performant implementation of a concept similar to Unleash Proxy. We have clients experimenting with setting it up on CloudFlare Edge Workers. It doesn't work on Vercel yet.

from unleash-client-nextjs.

Plans

Client-side

I'll add an example of how to implement API route "proxying" for frontend API.

from unleash-client-nextjs.

@Tymek thanks for the reply. I'm particularly interested in the Pages Router. While cache-control would help with the load on BE, its still a network roundtrip, which will add at least 50ms latency to the SSR render time (assuming its cached on CDN).

I was thinking more of a in-memory cache which would be instant and add no overhead at all.

from unleash-client-nextjs.

You can use caching on SSR. (docs). Downside is that if you are returning definitions from there to the client, you will expose your configuration. You can filter toggles you're interested in I guess. Will including this in the library help? I'm hesitant because resolving feature toggles on frontend (running server-client on frontend) isn't something Unleash supported before Next.js SDK.

Correct me if I'm wrong, but I don't think it's possible to store something in-memory in a Serverless/Edge environment. I looked into using KV store, but definitions are too big for that.

from unleash-client-nextjs.

You can use caching on SSR. (docs). Downside is that if you are returning definitions from there to the client, you will expose your configuration. You can filter toggles you're interested in I guess. Will including this in the library help? I'm hesitant because resolving feature toggles on frontend (running server-client on frontend) isn't something Unleash supported before Next.js SDK.

Correct me if I'm wrong, but I don't think it's possible to store something in-memory in a Serverless/Edge environment. I looked into using KV store, but definitions are too big for that.

By in memory I don't mean anything fansy, just storing things in a local variable. Not using Serveless/Edge, but I'm pretty sure you can do that. That being said, this would be more for the pages router, where you have a node server running for a long time.

from unleash-client-nextjs.

I don't think that will run as expected on Cloudflare/Vercel etc. I'll experiment with it later this week. And again, if you have any user-land implementations, sharing it will help :)

Previous Next.js SDK experiment was using this approach (archived https://github.com/Unleash/next-unleash). I'll look into bringing it back.

from unleash-client-nextjs.