프레임워크 및 툴

Angular와 Next.js 같은 프론트엔드 프레임워크는 부족하지 않지만, 대부분은 마이크로 프론트엔드를 염두에 두고 만들어지지 않았습니다. 따라서 마이크로 프론트엔드 아키텍처의 문제를 해결할 수 있는 메커니즘이 없는 경우가 있습니다.

일반 프레임워크 고려 사항

이 가이드는 개별 프레임워크를 추천하거나 비교하는 것을 목표로 하지 않습니다. 동일한 웹 애플리케이션 페이지에서 여러 마이크로 프론트엔드가 실행되는 경우가 많기 때문에 로딩 및 런타임 성능이 주요 관심사입니다. 오버헤드가 최대한 적은 프레임워크를 선택하는 것이 중요합니다.

프레임워크는 렌더링 레이어에 따라 구분됩니다.

• 클라이언트 사이드 렌더링 (CSR)

• 서버 측 렌더링(SSR)

프런트엔드 아키텍처에는 정적 사이트 생성 (SSG) 과 같은 다른 기능이 포함됩니다. 하지만 SSG는 한 번만 수행됩니다. 마이크로 프론트엔드는 주로 런타임에 구성되므로 CSR과 SSR이 주요 옵션입니다.

클라이언트 사이드 렌더링

CSR의 경우 널리 사용되는 두 가지 옵션이 있습니다.

• 단일 SPA 프레임워크

• 모듈 페더레이션

단일 SPA는 마이크로 프론트엔드를 구성하기 위한 간단한 선택입니다. 동일한 페이지에 여러 마이크로 프론트엔드를 구성하고 종속성 충돌을 방지하는 등 마이크로 프론트엔드 아키텍처에서 가장 흔히 발생하는 문제를 해결합니다.

모듈 페더레이션은 webpack 5에서 제공하는 플러그인으로 시작되었으며, 다양한 아티팩트 간의 종속성 관리를 포함하여 마이크로 프론트엔드 아키텍처의 대부분의 문제를 해결합니다. 모듈 페더레이션 2.0은 기본적으로 Rspack, webpack, esbuild와 함께 작동하며 현재는 함께 작동합니다. JavaScript

프레임워크를 전혀 사용하지 않는 것을 고려해 보세요. caniuse.com에 따르면 전체 시장 점유율이 98% 에 달하는 최신 브라우저는 사용자 지정 요소와 같은 기능을 기본적으로 제공하며 마이크로 프론트엔드 애플리케이션에 적합합니다. 필요한 경우 이벤트 전파, 국제화 또는 기타 특정 문제를 해결하기 위해 사용자 정의 요소를 간단한 라이브러리와 결합하세요.

서버 사이드 렌더링

SSR 측에서는 두 가지 주요 옵션이 더 복잡합니다.

• Next.js 같은 기존 프레임워크를 수용하고 모듈 페더레이션을 사용하는 마이크로 프론트엔드 원칙을 적용하세요.

• over-the-wire HTML-를 사용하여 마이크로 프론트엔드를 나타내는 HTML 프래그먼트를 교환하고 런타임에 템플릿 내에서 이러한 프래그먼트를 구성하십시오. 이러한 접근 방식의 예로는 Podium이 있습니다.