Zusammenfassung: Datenabruf
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 28 von 47.
Aufgabe
MittelKapitelzusammenfassung: Ein Menü, das alles auf dem Server lädt.
lib/data.js ist bereitgestellt und gesperrt: getDishes() gibt ein Promise für ein Array von { id, name, price } Objekten zurück, und getDish(slug) sucht ein einzelnes heraus.
- In
app/page.jsx, macheHomezu einerasync-Funktion undawait getDishes()in einedishes-Variable. - Rendere innerhalb von
<ul id="dish-list">ein<li>pro Gerichts-Eintrag mitkey={dish.id},id={dish.id}und demnamedes Gerichts als Text. app/menu/[slug]/page.jsxzeigtUnknown dishfür jede URL an: Es destrukturiertparams, ohne darauf zu warten. Verwendeawaitfürparams, damit die Suche einen echten Slug erhält. Der Aufruf von/menu/carbonaramussCarbonarain#dish-nameund dessen Preis in#dish-priceanzeigen.
Probier es selbst
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Alle Lektionen in Next.js Essentials
4Server & Client
Zwei Arten von KomponentenDen Fehler lesenDie 'use client'-ZeileClient-Teile klein haltenServer innerhalb von ClientZusammenfassung: Server & Client7Client-seitige Navigation
Der aktive LinkProgrammatisches RoutingFiltern mit der URLRoute-HandlerZusammenfassung: Navigation2Routing & Links
Ordner sind RoutenVerschachtelte RoutenSeiten verlinkenDynamische RoutenNicht-gefunden-SeitenZusammenfassung: Routing5Daten auf dem Server
Asynchrone KomponentenWarten auf Route-ParameterZwei Fetches gleichzeitigLadezuständeFehlerbehandlungZusammenfassung: Datenabruf