Chodzi Ci o to, że osoba na filmie wykonała request do api? I dlatego Suspense się wykonał, bo czekał na załadowanie tych danych w komponencie ?
Chodzi o to że Ty próbujesz dynamicznie załadować komponent bez dynamic-importów - i to nie ma prawa działać.
Gość w filmiku synchronicznie wczytał komponent.
Co masz na mysli pisząc: "synchronicznie wczytał komponent" ?
Nie dynamicznie.
Umyślałeś sobie że <Suspense/> działa z dynamicznymi komponentami bez React.lazy() i bez dynamic-importów - otóż nie działa; i filmik który pokazałeś również na to nie wskazuje.
Owszem, pojawia się fallback w <Suspense/> na filmiku gościa, ale to nie znaczy że ten suspense czeka na wczytanie komponentu (tak jak Ty sobie to wyobrażasz), bo komponent został już wczytany synchronicznie wcześniej. Na filmiku ten <Suspense/> czeka na wczytanie danych w komponencie.
Nie musisz tego rozumieć, ważne jest to że:
-
Jeśli chcesz wczytać dynamicznie komponent, to MUSISZ użyć dynamic importów oraz
React.lazy(), nie ma innego wyjścia.
Jak piszesz import Something from 'something' to w tym momencie ten komponent jest wczytany nie dynamicznie, i nie ważne czy go opakujesz później <Suspense/> czy nie, to to nie zmieni tego w jaki sposób ten komponent jest wczytany.
import React, { Suspense } from "react";
import HomePage from './HomePage'; // tutaj, komponent jest wczytany synchronicznie i masz po zawodach
import AboutPage from './AboutPage'; // już nie zamienisz tego na dynamic import
function App() {
const [page, setPage] = React.useState("home");
return (
<div>
<button onClick={() => setPage("home")}>Home</button>
<button onClick={() => setPage("about")}>About</button>
<Suspense fallback={"Loading..."}>
{page === "home" && <HomePage />} { /* tutaj <HomePage/> jest już wczytany */ }
{page === "about" && <AboutPage />}
</Suspense>
</div>
);
}
export default App;