Single-spa: 추가 마이크로프런트엔드 없이 경로

이 기사에서는 전용 오류 페이지 마이크로프런트엔드를 제거하여 단일 스파 마이크로프런트엔드 아키텍처를 단순화하는 방법을 살펴보겠습니다

마이크로프런트엔드 아키텍처를 기반으로 하는 프로젝트에는 장점이 있지만 몇 가지 과제도 있습니다.

과제 중 하나는 마이크로프런트엔드 수의 불가피한 증가입니다. 이러한 성장은 유지 관리, 업데이트 및 릴리스할 마이크로프런트엔드가 더 많아진다는 것을 의미합니다. 마이크로프런트엔드 수를 줄이면 더욱 원활한 개발 환경이 보장됩니다.

마이크로 프런트엔드 수를 줄이기 위해 기존 기능 중 일부를 이미 존재하는 마이크로 프런트엔드로 마이그레이션할 수 있습니다. 이는 단일 책임 원칙을 깨뜨리게 되므로 신중하게 수행해야 합니다.

오류 페이지 렌더링만을 목적으로 하는 마이크로프런트엔드를 제거하면 얼마나 좋을까요?

단일 스파에서 404 마이크로프런트엔드 제거

싱글 스파에서 React로 작성된 404 페이지를 추가하려면 404 오류를 표시하는 별도의 애플리케이션 마이크로프런트엔드가 있어야 합니다.

일반적으로 이는 레이아웃 정의에서 수행됩니다.

<route default>
    <application name="error-microfrontend"></application>
</route>

오류 마이크로프런트엔드를 제거하는 것은 까다로울 수 있습니다.

A) React를 HTML로 리팩토링 ?

단일 스파 경로는 HTML로 정의됩니다. 즉, 반응 구성 요소를 렌더링하려는 경우 모든 논리를 포함하기 어려울 것입니다(특히 구성 요소에서 사용자 정의 논리를 사용하는 경우). 따라서 이는 실행 가능한 옵션이 아닙니다.

B) customProps 전달 ?

customProps를 전달하여 기존 마이크로프런트엔드로 교체할 수도 있습니다.

// top-level layout engine API
const singleSpaRoutes = constructRoutes(template, {
    props: {
        errorPage: true
    },
    loaders: {},
});

...

// single-spa-template
<route path="/test">
    <application name="global-microfrontend"></application>
</route>

<route default>
    <application name="global-microfrontend" customProps="errorPage"></application>
</route>

어떤 이유로든 작동하지 않습니다. customProps는 global-microfrontend에서 액세스할 수 없습니다.

저는 동일한 작업을 수행하기 위해 여러 가지 방법을 시도했습니다. 심지어 global-microfrontend에 대한 loadRootComponent도 변경했습니다.

const lifecycles = singleSpaReact({
    React,
    ReactDOM,
    loadRootComponent: (props) => {
        console.log(props);

        return Promise.resolve(() => <Root />);
    },
});

이 역시 작동하지 않았고 이상합니다. 왜냐하면 constructorApplications에 대한 반환을 보면 다음과 같기 때문입니다.

// usage
const applications = constructApplications({
    loadApp: ({ name }) => globalThis.System.import(name),
    routes,
});

// result
...
name: 'global-microfrontend',
app: f(),
customProps: f(e, n),
activeWhen: [
    0: f $(),
    1: f(n)

]

single-spa는 global-microfrontend가 2개 루트에 탑재될 것이라는 점을 인지하고 있는 것으로 보이며, 그 중 하나는 커스텀 소품과 함께 제공됩니다.

싱글스파가 소품들을 합치는 방식 때문에 이 방법은 통하지 않을 것 같아요.

C) 해키웨이?

아무것도 효과가 없었고 마이크로프런트엔드 오류를 정말로 없애고 싶었기 때문에 해결 방법을 생각해냈습니다.

// single-spa-template
<route default>
    <div id="PAGE_NOT_FOUND"></div>
</route>

애플리케이션의 최상위 수준에 로드되는 글로벌 마이크로프런트엔드:

import React, { useEffect, useState } from "react";

const ErrorContent = () => (
    <div>
        <h1>404 not found</h1>
        <h3>Please try visiting another page</h3>
    </div>
);

const ErrorPage = () => {
    const [visible, setVisible] = useState<boolean>(false);

    const checkForPageNotFound = () => {
        const el = document.getElementById("PAGE_NOT_FOUND");

        setVisible(!!el);
    };

    useEffect(() => {
        window.addEventListener("single-spa:routing-event", checkForPageNotFound);

        checkForPageNotFound();

        return () => window.removeEventListener("single-spa:routing-event", checkForPageNotFound);
    }, []);

    return visible ? <ErrorContent /> : null;
};

export default ErrorPage;

이것은 Single-spa:routing-event 이벤트를 수신하여 작동하며, 이벤트가 실행될 때마다 레이아웃 정의에 추가한 div가 존재하는지 확인합니다. div는 기본 경로에서만 렌더링되므로 404 페이지의 내용을 자신있게 렌더링할 수 있습니다.

이것이 가장 멋진 솔루션은 아닐 수도 있지만 이를 통해 기존 마이크로프런트엔드 내부에 404 로직을 캡슐화하고 유지 관리가 필요한 또 다른 마이크로프런트엔드를 제거할 수 있습니다.

마이크로프런트엔드 기반 아키텍처를 단순화하기 위한 다른 창의적인 솔루션을 찾았다면 귀하의 경험을 듣고 싶습니다!

위 내용은 Single-spa: 추가 마이크로프런트엔드 없이 경로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!