esbuild 사용해보기(with React SSR)

• esbuild는 빠른 실행 속도, JavaScript, CSS, TypeScript 및 JSX 내장, 간단한 API, ESM 및 CommonJS 모듈 번들, CSS 모듈을 포함한 CSS 번들, 트리 쉐이킹, 축소 및 소스 맵, 로컬 서버, 시계 모드 및 플러그인 등의 기능을 제공한다.

• esbuild를 이용해 React에서 SSR과 hydrate를 실행하는 예제를 통해 실제 사용법을 확인할 수 있다. 이를 통해 esbuild의 빠른 속도와 typescript와 jsx의 빌드, 번들링 기능을 체험해볼 수 있다.

• 서버에서는 http 요청을 받아 처리하는데, root 경로가 아닌 경우에는 모든 요청을 readableStream으로 만들어 응답을 보내주고, root 경로인 경우에는 App.js를 text/html 형식의 stream으로 응답해준다. 이때 React의 renderToPipeableStream을 사용하여 요청이 들어올 때마다 해당 컴포넌트를 pipe를 통해 response에 전달한다.

• 클라이언트 코드는 React의 hydrateRoot를 사용하여 서버에서 렌더링된 HTML을 재사용하고, 이벤트 핸들러 등을 추가한다. 이 코드는 간결해 보이지만 내부에서 많은 동작을 수행하므로 빌드 후 크기가 크다. 이를 해결하기 위해 esbuild의 --minify 옵션을 사용하여 크기를 줄인다.