what happens if remix app is redeployed while someone is using it

[pdeva]

since part of the code executes on the server, the newwer server version of the code might send back some response that the older client code was not expecting. wont that cause the client to go in an unexpected/error state?

[lili21]

It can happen, just like any normal backend api service. and maybe you should keep the loader/action compatible or version it.

[kiliman]

Remix generates a version prop on each build. It is sent in the initial SSR response as window.__remixManifest.version. You can also access it from your server entry as build.assets.version.

You could patch Remix to send an x-remix-version header on every request and compare it to the server version. If they differ, the server can send a response to refresh or something.

I'll play around and create a patch.

[putuoka]

Remix generates a version prop on each build. It is sent in the initial SSR response as window.__remixManifest.version. You can also access it from your server entry as build.assets.version.

You could patch Remix to send an x-remix-version header on every request and compare it to the server version. If they differ, the server can send a response to refresh or something.

I'll play around and create a patch.

sorry i'm new here and i don't get it. i hopes there's some example so i can understand from an example

[kiliman]

Remix does not currently support this scenario. I was simply offering an option on how to implement it. It would require patching Remix though, so not a general solution.

[kiliman]

// entry.client.tsx
let originalFetch = global.fetch;
// override fetch to add a header to all requests
global.fetch = function fetch(
  input: Request | string,
  init: RequestInit | undefined
) {
  let url = new URL(typeof input === "string" ? input : input.url);
  // don't add the header to requests to other origins
  if (url.origin !== window.location.origin) return originalFetch(input, init);
  // don't add the header if not a remix data request
  if (!url.searchParams.get("_data")) return originalFetch(input, init);
  // add the header
  return originalFetch(input, {
    ...init,
    headers: {
      ...init?.headers,
      "x-remix-version": window.__remixManifest.version,
    },
  });
};

// server.js
app.all("*", (req, res, next) => {
  if (process.env.NODE_ENV === "development") {
    purgeRequireCache();
  }
  let build = require(BUILD_DIR);

  // get remix version from request header
  let remixVersion = req.header("x-remix-version");
  console.log(
    `Remix version server: ${build.assets.version} client: ${remixVersion}`
  );
  if (remixVersion && remixVersion !== build.assets.version) {
    console.log(
      `Client version mismatch, reloading client... server: ${build.assets.version} client: ${remixVersion}`
    );
    // 🚫 not sure what we should do here to force app to refresh
  }

  return createRequestHandler({
    build,
    mode: process.env.NODE_ENV,
  })(req, res, next);
});

[lili21]

how about send data back to client and let the client make the decision, like notify to user that you need to refresh to get the latest content.

// server.js
if (remixVersion && remixVersion !== build.assets.version) {
    console.log(
      `Client version mismatch, reloading client... server: ${build.assets.version} client: ${remixVersion}`
    );
  
    res.set('x-remix-version', build.assets.version);
    res.status(500).json({ error: 'some error message'});
  }

// entry.client.tsx

return originalFetch(input, {
    ...init,
    headers: {
      ...init?.headers,
      "x-remix-version": window.__remixManifest.version,
    },
  }).then(res => {
    if (res.headers.get('x-tt-remix-version') !== window.__remixManifest.version) {
      // notify user to refresh
    }
    return res;
  });