როგორ მუშაობენ Suspense და React.lazy კოდის გაყოფისთვის?

Question

Accepted Answer

**`React.lazy`** ჩამტვირთავს კომპონენტის JavaScript ნაკრებს **მოთხოვნის საფუძველზე** (მხოლოდ როდესაც იგი პირველად რენდერდება). **`Suspense`** აჩვენებს დამხმარე UI-ს ხოლო ნებისმიერი lazy (ან მონაცემების შეზღუდვით) შვილი ჯერ კიდევ იტვირთება. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## რატომ მნიშვნელოვანია: უფრო მცირე საწყისი დატვირთვა კოდის გაყოფის გარეშე, ბრაუზერი ჩამტვირთავს თქვენი **მთელი** აპლიკაციას (მათ შორის მძიმე დიაგრამის ბიბლიოთეკა) რაიმე ჩვენების წინ. `lazy`-ის საშუალებით, `Chart`-ის კოდი გაიყოფა თავის ფაილად და ამოიტვირთება მხოლოდ მაშინ როდესაც მომხმარებელი რეალურად მას მიაღწევს — რაც გაუმჯობესებს საწყის დატვირთვის დროს და Core Web Vitals-ებს. ## როგორ კოორდინაციას უწევს Suspense-ს როდესაც `Chart` დაშევიწყდება (მისი ნაკრები მზად არ არის), React "შეაჩერებს" ხის იმ ნაწილს და ამის ნაცვლად რენდერ უკეთებს უახლოეს `Suspense` fallback-ს, შემდეგ კი ჩაანაცვლებს რეალური კომპონენტი ის დატვირთვის შემდეგ. ერთი საზღვარი შეძლებს რამდენიმე lazy შვილს აკრიფოს და ერთი fallback აჩვენოს: ```jsx }>

``` ## კოდის გაყოფის მიღმა Suspense ასევე კოორდინაციას უწევს **მონაცემების ჩატვირთვას** ფреიმვორკებთან/ბიბლიოთეკებთან, რომლებიც "შეჩერდებიან" pending fetch-ზე, და წყვილდება **streaming SSR**-თან (Next.js App Router) სწრაფი shell-ის გაგზავნისა და ნელი ნაწილების სტრიმირებაზე. საზღვრები გააზრებულად განათავსეთ რათა თავიდან აიცილოთ დიდი, აშფაფი განლაგების ცვლილებები როდესაც კონტენტი გამოჩნდება.