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 page genelde bir şeyden fazlasına ihtiyaç duyar. Bunu yazmanın belirgin yolu, aynı zamanda yavaş olan 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

İşin sırrı zamanlamadadır. await kullanmadan getDishes() çağırmak işi başlatır ve hemen bir promise geri döndürür; böylece Promise.all beklemeye başladığı anda her iki yükleme de zaten çalışmaktadır. Listelediğiniz sırayla bir sonuç dizisine çözümlenir.

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, dishes ve drinks verilerini art arda yükler. Bunların birbiriyle bir ilgisi yoktur, bu yüzden ikisini birlikte çalıştırın.

Arka arkaya gelen iki await ifadesini, dishes ve drinks şeklinde destruct edilmiş tek bir await Promise.all([...]) ile değiştirin.

lib/data.js kilitlidir ve iki yüklemenin aynı anda çakışıp çakışmadığını izler. #report öğesi, Ran one at a time yerine Ran together değerini göstermelidir.

Kendin dene

import './globals.css';

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

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