인프런 커뮤니티 질문&답변

안녕하세요 제로초님

next 15버전으로 바뀌고나서 새로 처음부터 다시 강의를 들으면서 만들어 보고 있습니다.

next 15버전으로 바뀌고 나서 옛날꺼랑 msw 설정이 바뀌었더라구요
그런데 강의대로 msw 설정을 하니 ssr 적용이 제대로 안되는 것 같습니다.

msw 설정 후 페이지의 network 탭에 localhost document의 미리보기 내용이 없습니다.

ssr이 된다면 document에 미리보기에 내용이 넘어와야 하는데 msw 설정 후에 없습니다.

옛날에 만들어 놓았던, next14 버전으로 했었던 프로젝트에서는 미리보기에 내용이 잘 담겨 ssr이 잘되고 있고,

15버전으로 진행한 프로젝트에서

layout에 있는 mswprovider 컴포넌트를 없애주니 다시 미리보기에 내용이 생기는 것으로 보아 msw 설정에서 문제가 생긴 것으로 추측됩니다.

아래는 옛날 14 버전으로 진행했던 코드입니다. msw 2.1 버전입니다.

"use client";

import { useEffect } from "react";

export const MSWComponent = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
        require("@/mocks/browser");
      }
    }
  }, []);

  return null;
};

아래는 지금 하고있는 코드입니다. msw 2.7.3 버전입니다.

"use client";

import { Suspense, use } from "react";
import { handlers } from "@/mocks/handlers";

const mockingEnabledPromise =
  typeof window !== "undefined" // browser일 때
    ? import("@/mocks/browser").then(async ({ default: worker }) => {
        if (process.env.NODE_ENV === "production") {
          return;
        }
        await worker.start({
          // msw가 처리할 수 없는 요청이 들어왔을 때
          onUnhandledRequest(request, print) {
            if (request.url.includes("_next")) {
              // next가 내부적으로 처리하는 url이기 때문에 msw가 처리할 필요 없음 그래서 return
              return;
            }
            print.warning();
          },
        });
        worker.use(...handlers);
        (module as any).hot?.dispose(() => {
          worker.stop();
        });
        console.log(worker.listHandlers());
      })
    : Promise.resolve();

export function MSWProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // If MSW is enabled, we need to wait for the worker to start,
  // so we wrap the children in a Suspense boundary until it's ready.
  return (
    <Suspense fallback={null}>
      <MSWProviderWrapper>{children}</MSWProviderWrapper>
    </Suspense>
  );
}

function MSWProviderWrapper({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // use 사용해서 promise 실행 기다리고 children return
  use(mockingEnabledPromise);
  return children;
}

제 추측으로는 MSWProvider에 있는 Suspense때문에 ssr 이 안되는 것 같은데, 맞는지 궁금합니다.

그리고 맞다면 next 사용시 msw로 데이터를 mocking 하게 되면 ssr 확인을 어떻게 해야 할까요??