How to connect redis before start server

[Capricair]

Summary

I want to use redis as a cache to optimize my application. I want to connect redis before start server, and then use it when fetching data on the page. I use register function in instrumentation to created a redis client, but the redis client is empty after imported in getServerSideProps of the page. If I establish a redis connection in getServerSideProps, it is not much different from directly requesting the http api, what should I do?

// instrumentation.js
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const [{ createClient }, Helper] = await Promise.all([
      import("redis"),
      import("@/helper").then((m) => m.default),
    ]);
    const redis = new createClient({ url: `redis://localhost:6379` });
    await redis.connect();
    Helper.setRedis(redis);  // Here redis is already opened
  }
}

// pages/index.js
export async function getServerSideProps() {
  const Helper = await import("@/helper").then(x => x.default);
  return { props: { open: Helper.redis.isOpen } };  // Cannot read properties of undefined (reading 'isOpen')
}

// helper/index.js
let _redis;

const Helper = Object.freeze({
  get redis() {
    return _redis;
  },

  setRedis(redis) {
    _redis = redis;
  },
});

export default Helper;

Additional information

No response

Example

No response

[icyJoseph]

Yeah, it must be that the module is loaded into two different bundles... I wonder if you'd need to append stuff to globalThis, that wouldn't be nice...

Here for example, I've built an app, where a page, and instrumentation access a file that contains marker1337:

➜ rg "marker1337" .next -l
.next/server/chunks/273.js
.next/server/chunks/781.js

Searching for that marker, gives two chunks. I think there has to be a way to tell webpack to use one bundle only, but I don't remember how.

[Capricair]

Thanks, it works

// instrumentation.js
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { createClient } = await import("redis");
    const redis = new createClient();
    await redis.connect();
    globalThis.redis = redis;
  }
}

// pages/index.js
export async function getServerSideProps() {
  return { props: { ready: globalThis.redis.isReady} };  // ready is true
}

[icyJoseph]

Right, I'd consider this a partial/temporary solution. I'll investigate a bit more in some time, how to have one bundle only.

[Capricair]

The next12 does not have instrumentation. I can only connect to redis in the phase of next.config.js, but the PHASE_DEVELOPMENT_SERVER phase will run twice when running next dev. How can I make it run only once?

// next.config.js
export default async function (phase, { defaultConfig }) {
  if ([PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_SERVER].includes(phase)) {
    if (!globalThis._myRedis) {
      globalThis._myRedis = "loading";
      const { createClient } = await import("redis");
      const redis = createClient({ socket: { connectTimeout: 30000 } });
      await redis.connect();
      globalThis._myRedis = redis;
    }
  }
  return nextConfig;
}