폴백없이 React Suspense 지연로드

Question

구성 요소를 지연로드하여 초기 번들 크기를 줄이고 반응 라우터를 사용하여 코드 분할을 사용하여 즉시 구성 요소를 가져오고 싶습니다.

그러나 React Suspense를 사용할 때로드를 위해 폴백을 사용해야합니다.
이것은 작동하지 않습니다.

const lazyLoadComponent = Component =>
    props => (
        <Suspense> // Missing fallback property
            <Component {...props} />
        </Suspense>
    );

제 경우에는 서버에서 html을 렌더링하므로 스피너를 사용하고 싶지 않습니다.
이것은 내 화면에 쓸모없는 깜박임을 만들 것입니다! 즉 :

• HTML로드
• 자리 표시자가 나타납니다.
• 경로에 대한 PageComponent가로드됩니다.
• 페이지 구성 요소 내에서 피드를로드하는 자체 스피너가 있습니다.

제 경우에는 html이로드되는 반응 구성 요소에 해당합니다.

이 문제를 쉽게 해결할 수있는 알려진 해킹이 있습니까 (HTML (!!)를 복사하는 모든 경로에 대한 로더를 만드는 경우를 제외하고는 지연 로딩을 쓸모 없게 만듭니다).

나는 우리에게 로더를 추가하도록 "강제"하는 것에 약간 불만 스러우며 의무적으로 결정한 논리를 이해하지 못합니다.

Answer 1

문서 에서 코드 분할을 사용하십시오.

fallbackprops는 React 요소 일 뿐이며 null.

<Suspense fallback={null}>
    <ComponentImportedByLazy />
</Suspense>

Answer 2

Github에서 이에 대한 문제를 만들었습니다. https://github.com/facebook/react/issues/19715

React-Router / React를 사용하는 현재 깨끗한 솔루션이 없습니다.
그러나 이것은 동시 모드를 사용하는 향후 릴리스에서 예상됩니다. Dan Abramov가 언급 한대로 :

구체적인 기능 요청에 대해서는 약간 다르게 재구성 할 수 있다고 생각합니다. 새 화면에는 의미가 없기 때문에 "선택적 대체"를 원하는 것은 아닙니다 (우리는 무언가를 보여야합니다). 내가 찾고 있다고 생각하는 것은 콘텐츠가 이미 HTML에있는 경우 대체 표시를 건너 뛰는 방법입니다. 이것이 바로 React가 Concurrent 모드에서 작동하는 방식이므로 기능 요청이 이미 구현되어 있으며 결국 안정적인 릴리스에서 기본 동작이 될 것입니다.

저에게는 기다릴 수있는 문제가 아니므로 현재는 취미 프로젝트와 관련이 있고 향후 릴리스를 기다릴 시간이 있으므로 경로 지연로드를 생략하겠습니다.