Πώς λειτουργούν το Suspense και το React.lazy για τη διαίρεση κώδικα;

Question

Accepted Answer

**`React.lazy`** φορτώνει το bundle JavaScript μιας συνιστώσας **κατ' απαίτηση** (μόνο όταν αποδίδεται για πρώτη φορά). **`Suspense`** εμφανίζει ένα fallback UI ενώ οποιαδήποτε lazy (ή data-suspending) θυγατρική συνιστώσα φορτώνεται ακόμη. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Γιατί έχει σημασία: μικρότερο αρχικό φορτίο Χωρίς διαίρεση κώδικα, ο browser κάνει λήψη της **ολόκληρης** εφαρμογής σας (συμπεριλαμβανομένης της βαριάς βιβλιοθήκης γραφημάτων) πριν εμφανίσει τίποτα. Με το `lazy`, ο κώδικας του `Chart` διαιρείται στο δικό του αρχείο και ανακτάται μόνο όταν ο χρήστης φτάνει πραγματικά εκεί — βελτιώνοντας τον αρχικό χρόνο φορτώσης και Core Web Vitals. ## Πώς το Suspense το συντονίζει Όταν το `Chart` αναστέλλεται (το bundle του δεν είναι έτοιμο), το React "διακόπτει" αυτό το μέρος του δέντρου και αποδίδει το πλησιέστερο fallback του `Suspense` αντί αυτού, στη συνέχεια αντικαθιστά την πραγματική συνιστώσα μόλις φορτωθεί. Ένα μόνο όριο μπορεί να τυλίξει αρκετές lazy θυγατρικές συνιστώσες και να εμφανίσει ένα fallback: ```jsx }>

``` ## Πέρα από τη διαίρεση κώδικα Το Suspense συντονίζει επίσης **φόρτωση δεδομένων** με frameworks/βιβλιοθήκες που "αναστέλλονται" σε ένα εκκρεμές fetch, και συνδυάζεται με **streaming SSR** (Next.js App Router) για αποστολή ενός γρήγορου shell και ροής των πιο αργών μερών. Τοποθετήστε τα όρια με σύνεση για να αποφύγετε μεγάλες, ενοχλητικές μετατοπίσεις διάταξης όταν εμφανίζεται το περιεχόμενο.