Node.js API를 브라우저 환경에서 함부로 사용하면 안되는 이유

📌 문제 상황

bundle-analyze를 사용해서 번들링 최적화를 진행하는 중 build된 파일의 크기가 너무 크다는 것을 알았다.

가장 크게 보이는 번들 사이즈가 355KB였고 crypto-browserify로 묶여있는 것을 확인

crypto-browserify?
crypto-browserify는 Node.js의 crypto 모듈을 브라우저에서 사용할 수 있게 해주는 JavaScript polyfill 라이브러리

나도 모르는 사이에 사용한 라이브러리에서 polyfill을 만들어서 브라우저 환경에서 돌아가게 만든 것이였다.

📌 어떻게 변환되는 걸까? e.g.

import crypto from "crypto";
crypto.createHash("md5").update("hello").digest("hex");

↓↓↓↓↓

import crypto from "crypto-browserify";

이렇게 번들러가 알아서 변환해버리기 때문에 번들크기가 커지는 문제가 발생!

📌 해결

서버 전용 모듈(Node.js API)는 서버에서만
(Next.js 서버 컴포넌트, API route, getServerSideProps 등)

클라이언트(브라우저) 컴포넌트에서는 브라우저 표준 API만 사용해야한다.
(window, document, fetch, WebSocket 등)

그래서 내가 사용한 import crypto from "crypto"를 일단 제거해줬더니 다음과 같이 번들이 깔끔하게 바뀜

너무 좋당 헷ㅎ