Aynı Anda İki Veri Çekme

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası. Ders 25 / 47.

Bir sayfa genellikle birden fazla şeye ihtiyaç duyar. Bunu yazmanın bariz yolu aynı zamanda yavaş yoldur:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, yalnızca şimdi başlıyor
// toplam: 120ms

await, burada dur anlamına gelir. İkinci yükleme, ilk yüklemenin sonucuna hiç ihtiyaç duymamasına rağmen, birincisi bitene kadar başlamaz bile.

İkisini de başlatın, sonra ikisini de bekleyin:

const [dishes, drinks] = await Promise.all([
    getDishes(),
    getDrinks(),
]);
// toplam: 60ms

Püf noktası zamanlamada. await olmadan getDishes() çağrısı işi başlatır ve hemen bir promise döndürür; bu nedenle Promise.all beklemeye başladığında her iki yükleme de zaten çalışıyor olur. Listelediğiniz sıraya göre bir sonuç dizisine çözülür.

Temel kural:

Bir yükleme diğerinin sonucuna ihtiyaç duyuyorsa → sıralı await'ler kullanılır, başka yolu yoktur
Bunlar independent ise → Promise.all

İki yükleme küçük bir kazançtır. Beş yükleme ise anında açılıyormuş gibi hissettiren bir sayfa ile öyle hissettirmeyen arasındaki farktır.

Görev

Kolay

app/page.jsx yemekleri ve içecekleri art arda yükler. Bunların birbiriyle ilgisi yok, bu yüzden onları birlikte çalıştır.

Ardışık iki await ifadesini, await Promise.all([...]) ve dishes değişkenlerine ayrıştırılmış tek bir drinks ifadesiyle değiştir.

lib/data.js kilitlidir ve iki yüklemenin birbiriyle örtüşüp örtüşmediğini izler. #report sonunda Ran together yerine Ran one at a time değerini okumalıdır.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}