[NextJS] Module-Federation 4

Module Federation로 프로젝트 배포 후 prod 환경에서 작업을 하다보면 remote App의 변경사항이 추가되었고, 실제 Repo도 최신화 됐음에도 이전 버전의 remoteEntry.js를 가져오는 경우가 발생합니다.

 

이유는 Host App에서 remoteEntry.js를 가져오는데 캐시되어있는 remoteEntry.js와 새로운 remoteEntry.js를 구별할 수 없음에 remoteEntry.js가 교체되지않고 캐시되어있는 파일을 읽어오면서 생기는 문제인데요.

 

이 경우 브라우저의 캐시를 지워준다면 정상적으로 remoteEntry.js를 가져오는 것을 확인할 수 있었습니다. 하지만 우리가 서비스를 운영한다면 사용자에게 매번 업데이트가 있으니 캐시를 비워주세요! 할 수 도 없기 때문에 아래처럼 해결하기로 했습니다 !

HostApp next.config.js 수정하기

/** @type {import('next').NextConfig} */
const NextFederationPlugin = require("@module-federation/nextjs-mf");

const isDev = process.env.NODE_ENV === "development";
const isProd = process.env.NODE_ENV === "production";
const remoteComponentModule = isDev
  ? process.env.NEXT_PUBLIC_REMOTE_DEV_URL
  : process.env.NEXT_PUBLIC_REMOTE_PROD_URL



// 빌드시 TimeStamp생성 함수
const injectTimeStemp = () => {
  const stamp = Date.now();
  const queryString = `?t=${stamp}`;
  return queryString;
};

const nextConfig = {
  swcMinify: true,
  eslint: { ignoreDuringBuilds: true },
  webpack(config, options, deps) {
    config.resolve.fallback = {
      components: false,
    };

    if (!options.isServer) {
      config.plugins.push(
        new NextFederationPlugin({
          name: "host-name",
          filename: "static/chunks/remoteEntry.js",
          monoUi: {
          	//remoteEntry.js를 불러올때 timeStamp로 queryString 추가해주기!
            monoUi: `monoUi@${remoteComponentModule}/_next/static/chunks/remoteEntry.js${injectTimeStemp()}`,
          },
          exposes: {},
          shared: {},
        })
      );
    }
    return config;
  },
};

module.exports = nextConfig;

 

 

이렇게 빌드 때 불러오는 remoteEntry.js에 queryString을 추가해준 이후로 prod 환경에서 제대로 업데이트 되지않는 문제를 해결 할 수 있었습니다!