Express와 Vite를 결합한 React SSR: StartER 프레임워크를 통한 통합 서버 개발

핵심 기술

Express와 Vite 개발 서버를 단일 통합 서버로 결합하여 React 애플리케이션의 서버 측 렌더링(SSR)을 효율적으로 구현하는 StartER 프레임워크에 대한 소개입니다. 이 접근 방식은 복잡한 프록시 설정 없이 개발 워크플로우를 간소화하고 배포를 용이하게 합니다.

기술적 세부사항

• 통합 서버 아키텍처: Vite 개발 서버를 Express 애플리케이션 서버에 직접 연결하여 단일 서버로 운영합니다.
• Vite 미들웨어 모드 활용: Vite를 middlewareMode: true 및 appType: "custom" 옵션으로 설정하여 Express 서버가 제어권을 유지하면서 Vite의 개발 기능을 활용합니다.
• SSR 구현: Express의 캐치올(catch-all) 라우트 핸들러 내에서 Vite의 ssrLoadModule을 사용하여 서버 엔트리(entry-server.tsx)를 로드합니다.
• React Router SSR: react-router의 createStaticHandler 및 createStaticRouter를 사용하여 React 라우트를 정적으로 처리하고, renderToPipeableStream을 통해 Suspense를 지원하는 스트리밍 SSR을 구현합니다.
• HTML 변환 및 스트리밍: Vite의 transformIndexHtml로 HTML을 변환하고, renderToPipeableStream의 결과를 Express 응답 스트림에 직접 파이핑하여 TTFB를 개선하고 점진적 렌더링을 지원합니다.
• 구조: index.html, server.ts, entry-client.tsx, entry-server.tsx, react/routes.tsx 등으로 관심사를 분리하고 응집성을 유지하는 구조를 사용합니다.
• 프로덕션 빌드: 개발 환경에서는 Vite를 사용하고, 프로덕션 환경에서는 사전 빌드된 SSR 번들을 로드하는 투트랙 빌드 프로세스를 가집니다.

개발 임팩트

• 개발 워크플로우 단순화 및 복잡성 감소
• 코드베이스 구조 개선 및 유지보수성 향상
• 프록시 설정 제거로 인한 개발 및 배포 간소화
• React Suspense 지원을 통한 향상된 사용자 경험 제공
• 빠른 TTFB 및 점진적 렌더링을 통한 성능 최적화

커뮤니티 반응

해당 글은 커뮤니티 반응에 대한 직접적인 언급은 포함하지 않습니다.