Pre-Rendering: beim ersten Laden der React-Anwendung erhält der Browser vorgerendertes HTML, um das Laden / Anzeigen zu beschleunigen
Vorteile:
Beispiel:
Deaktiviere JavaScript in den Einstellungen der Browser-Entwicklertools und besuche reactjs.org - es werden Inhalte angezeigt, auch wenn Teile der Interaktivität nicht funktionieren (z.B. Dropdowns)
Ãœblicher Prozess zum Laden von Daten in einer React-Anwendung:
Prozess mit next.js:
React-Framework mit Unterstützung für:
Die next.js Website hat sehr gute Materialien: https://nextjs.org
npx create-next-app@latest
npx create-next-app@latest --ts
mögliche Projektstruktur:
npm run dev
um einen Produktionsbuild zu erstellen:
npm run build
um ihn zu starten:
npm run start
nur möglich, wenn kein server-seitiges Rendering benötigt wird (also kein getServerSideProps)
Ändern des build-Scripts in package.json auf: next build && next export
Ein statischer Build (im Ordner out) wird dann ausgeführt via:
npm run build
Beispiel einer Seitendefinition:
// pages/index.tsx
import type { NextPage } from 'next';
import Link from 'next/link';
import Head from 'next/head';
const Index: NextPage = () => (
<div>
<Head>
<title>Home</title>
</Head>
<Link href="/about">
<a>About Page</a>
</Link>
<p>Hello Next.js</p>
</div>
);
export default Index;
besondere Komponenten, die next zur Verfügung stellt:
Link: Link innerhalb einer Single-Page-AnwendungHead: Ermöglicht das einfache Setzen von Inhalten des <head>-Elements der Seitedefinieren von "globalem" Inhalt, der über alle Seiten hinweg gleich ist:
// _app.tsx
function MyApp({ Component, pageProps }: AppProps) {
return (
<div>
{/* fixed header content */}
<header>header content</header>
{/* variable content - defined by the route */}
<Component {...pageProps} />
{/* fixed footer content */}
<footer>footer content</footer>
</div>
);
}
Aufgabe: Erstelle weitere Seiten
definieren von Code, der zu verschidenen Zeiten in next.js ausgeführt wird:
Beim build werden alle Einträge im Ordner pages vorgerendert
Manche pages werden ohne zusätzlichen Input gerendert, andere sind mit Datenquellen verbunden
besondere (asynchrone) Funktionen, die wir aus einer Seitendefinitionsdatei exportieren können:
getServerSideProps (läuft bei jedem Request)getStaticProps (läuft während des Builds)können Daten laden und sie als Props an die Seitenkomponente übergeben
werden jeweils nur auf dem Build-Rechner oder dem Server ausgeführt → können Dateien einlesen oder direkte Datenbankabfragen machen
Funktionalität von fetch ist automatisch durch ein Polyfill vorhanden
Beispiel: Seite, die einen zufälligen Witz von einem API lädt
import type { GetServerSideProps, NextPage } from 'next';
type JokeProps = { joke: string };
const Joke: NextPage<JokeProps> = (props) => (
<article>{props.joke}</article>
);
const getServerSideProps: GetServerSideProps<JokeProps> = async () => {
const url = 'https://api.chucknorris.io/jokes/random';
const res = await fetch(url);
const joke = (await res.json()).value;
return { props: { joke: joke } };
};
export default Joke;
export { getServerSideProps };
Ãœbungen:
Wir können aus URLs wie den folgenden Parameter auslesen:
/todos/3/todos/?todoid=3Routenparameter werden in eckigen Klammern im Dateipfad angegeben, z.B.: pages/todos/[id].js
dynamisches Abfragen von Routenparametern:
import { NextPage } from 'next';
import { useRouter } from 'next/router';
const TodoDetails: NextPage = () => {
const router = useRouter();
return (
<div>
<h1>detail view for todo {router.query.id}</h1>
</div>
);
};
export default TodoDetails;
Vorrendern von Seiten basierend auf einem Satz Routenparameter - via getStaticPaths
export const getStaticPaths: GetStaticPaths = () => {
const paths = [];
for (let i = 1; i <= 200; i++) {
paths.push({ params: { id: String(i) } });
}
return { paths, fallback: false };
};
getStaticPaths gibt unter dem Namen paths ein Array zurück, das Routen beschreibt - diese werden jeweils an getStaticProps übergeben
nach der Implementierung von getStaticPaths können wir Seiten mit dynamischen Routen vorrendern
npm run build