Guide on how-to enable caching on Hydrogren deployed to production Node.js environment

[iliapir2]

Hey there,
I'm playing with Hydrogen and it works great on the dev machine with {devCache: true} and setLoggerOptions({showCacheApiStatus: true});

But I can't make cache work on production environment. I'm using Node.js.

What I've done:

1. Created 'server.js' in the root. For simplicity I'm using a built-in InMemoryCache (code based on https://shopify.dev/custom-storefronts/hydrogen/deployment#apply-extra-middleware and https://shopify.dev/custom-storefronts/hydrogen/framework/cache#caching-in-production)

const { hydrogenMiddleware } = require('@shopify/hydrogen/middleware')
const { createServer } = require('./dist/server');
const { InMemoryCache } = require('@shopify/hydrogen/dist/node/framework/cache/in-memory')

let inMemoryCache = new InMemoryCache()

createServer().then(({ app }) => {
    app.use(
        '*',
        hydrogenMiddleware({            
            cache: inMemoryCache,            
        }),
    );

    app.listen(3000, () => {
        console.log(`Server ready`);
    });
});

2. Build a project with "yarn build"
3. Launch server with "node server.js"
4. Cache is not working, no errors in console

I explored a code a bit and it seems like when using "createServer" function, it's not possible to override params passed to hydrogenMiddleware

Can you please provide me with a working code snippet? Or point on what I'm doing wrong?

[jplhomer]

In order to apply a cache, you'll want to follow the instructions for "Use a different Node framework" instead: https://shopify.dev/custom-storefronts/hydrogen/deployment#use-a-different-node-js-framework

Here's what I have in my project:

import {hydrogenMiddleware} from '@shopify/hydrogen/middleware';
import serveStatic from 'serve-static';
import compression from 'compression';
import bodyParser from 'body-parser';
import connect from 'connect';
import path from 'path';
const {
  InMemoryCache,
} = require('@shopify/hydrogen/dist/node/framework/cache/in-memory');

const inMemoryCache = new InMemoryCache();

const port = process.env.PORT || 8080;

function createServer() {
  const app = connect();

  app.use(compression());
  app.use(
    serveStatic(path.resolve(__dirname, '../', 'client'), {index: false}),
  );
  app.use(bodyParser.raw({type: '*/*'}));
  app.use(
    hydrogenMiddleware({
      getServerEntrypoint: () => import('./src/App.server'),
      indexTemplate: () => import('./dist/client/index.html?raw'),
      cache: inMemoryCache,
    }),
  );

  return app;
}

const app = createServer();

app.listen(port, () => {
  console.log(`Hydrogen server running at http://localhost:${port}`);
});

FYI, I think this differs slightly from the example in the docs — I will be sure to update the docs.

Cache is working in production: https://hydrogen-fly-redis.fly.dev/ (the name implies redis, but it's actually in mem).

[Cache] HIT    query homeShopInfo
[Cache] STALE  query welcomeContent
[Cache] STALE  query indexContent
[Cache] HIT    query shopInfo
[Cache] HIT    query layoutContent
[Cache] HIT    query Localization

[iliapir2]

Thank you @jplhomer for your prompt reply! It helped a lot. I would like to mention that I also changed the package.json as mentioned in the docs (https://shopify.dev/custom-storefronts/hydrogen/deployment#use-a-different-node-js-framework) to launch custom server.

// Remove this line
- "build:server": "vite build --outDir dist/server --ssr @shopify/hydrogen/platforms/node",

// Add this line
+ "build:server": "vite build --outDir dist/server --ssr server",

For those, who want to use Redis instead of InMemoryCache, here is a sample code -> Shopify/hydrogen#805 (comment)