An JavaScript-Bibliotheken und -Frameworks für moderne Webentwickler/innen herrscht kein Mangel. Eine der am weitesten verbreiteten Bibliotheken ist React, die Facebook (jetzt Meta) entwickelt hat, um funktionsreiche Anwendungen zu erstellen. React-Anwendungen werden traditionell in Webbrowsern ausgeführt, aber das Next.js-Framework erweitert die React-Funktionen über die JavaScript-Laufzeitumgebung Node.js auf die Serverseite.
In diesem Artikel werfen wir einen Blick auf Next.js und React, damit du entscheiden kannst, ob sie für dein nächstes Projekt geeignet sind.
Next.js und React: JavaScript auf dem nächsten Level
Eine Umfrage von SlashData aus dem Jahr 2022 ergab, dass es weltweit mehr als 17 Millionen JavaScript-Programmierer/innen gibt. Damit liegt JavaScript an der Spitze einer Gruppe, zu der auch beliebte Sprachen wie Python und Java gehören. JavaScript kann sowohl auf der Client- als auch auf der Serverseite eingesetzt werden, und diese Vielseitigkeit bedeutet, dass Entwickler/innen mit einer einzigen Programmiersprache komplette Anwendungen erstellen können.
Die Einführung von JavaScript-Bibliotheken wie React und Frameworks wie Next.js hat diese Entwicklung weiter vorangetrieben. Diese Bibliotheken und Frameworks bieten Funktionen, die die Integration von Frontend und Backend vereinfachen. Außerdem können Entwickler/innen die JavaScript-Funktionen mit Paketmanagern wie npm (dem Node.js-Paketmanager) erweitern, um JavaScript-Bibliotheken und -Tools zu installieren. Diese Ressourcen bieten ausgefeilte Funktionen, die den Umfang des Codes, den du selbst schreiben musst, reduzieren.
Die Erweiterbarkeit von JavaScript bedeutet, dass ein umfassendes Wissen über die gängigsten Tools der Schlüssel zu deinem Erfolg als Webentwickler/in ist.
Was ist Next.js?
Next.js wurde erstmals im Jahr 2016 von Vercel veröffentlicht und ist ein Open-Source-React-Framework, das die Bausteine für die Erstellung leistungsstarker Webanwendungen liefert. Große Unternehmen haben es seitdem übernommen, darunter Twitch, TikTok und Uber, um nur einige von ihnen zu nennen.
Next.js bietet eine der besten Entwicklererfahrungen für die Erstellung schneller, SEO-freundlicher Anwendungen. Im Folgenden findest du einige Funktionen von Next.js, die es zu einem außergewöhnlichen Produktionsframework machen:
- Hybride Rendering-Funktionen
- Automatisches Code-Splitting
- Bildoptimierung
- Eingebaute Unterstützung für CSS-Präprozessoren und CSS-in-JS-Bibliotheken
- Eingebautes Routing
Diese Funktionen helfen Next.js-Entwicklern, viel Zeit bei der Konfiguration und beim Einsatz von Tools zu sparen. Du kannst direkt mit der Entwicklung deiner Anwendung beginnen, die Projekte wie die folgenden unterstützen kann:
- E-Commerce-Shops
- Blogs
- Dashboards
- Single-Page-Anwendungen
- Interaktive Benutzeroberflächen
- Statische Websites
Was ist React?
React ist eine JavaScript-Bibliothek, mit der du dynamische Benutzeroberflächen erstellen kannst. Mit React Native kannst du nicht nur Weboberflächen erstellen, sondern auch mobile Anwendungen entwickeln.
Einige Vorteile von React sind:
- Verbesserte Leistung: Anstatt jede Komponente im DOM zu aktualisieren, verwendet React ein virtuelles DOM, um nur die geänderten Komponenten zu aktualisieren.
- Starke Komponentenbasierung: Sobald du eine Komponente erstellt hast, kannst du sie immer wieder verwenden.
- Einfaches Debugging: React-Anwendungen verwenden einen unidirektionalen Datenfluss – nur von Parent- zu Childkomponenten.
Next.js vs. React
Obwohl Entwickler/innen Next.js und React oft für den gleichen Zweck verwenden, gibt es einige grundlegende Unterschiede zwischen den beiden.
Einfachheit der Nutzung
Der Einstieg in Next.js und React ist einfach. Für beide brauchst du nur einzelne Befehle in deinem Terminal auszuführen, und zwar mit npx, das Teil von npm für Node.js ist.
Für Next.js lautet der einfachste Befehl:
npx create-next-appOhne zusätzliche Argumente für create-next-app wird die Installation im interaktiven Modus durchgeführt. Du wirst nach einem Projektnamen gefragt (der für das Projektverzeichnis verwendet wird) und ob du die Unterstützung für TypeScript und den Code-Linter ESLint einbinden möchtest.
Es sieht in etwa so aus:
Beim Initialisieren einer React-Instanz enthält der einfachste Befehl einen Namen für das Verzeichnis des Projekts:
npx create-react-app new-appDadurch wird ein Ordner erstellt, der alle notwendigen Anfangskonfigurationen und Abhängigkeiten enthält:
Beides macht den Einstieg leicht, aber denk daran, dass Next.js auf React aufbaut. Du kannst Next.js also nicht lernen, ohne vorher React zu kennen und zu verstehen, wie es funktioniert. Zum Glück ist React leicht zu erlernen und eignet sich hervorragend für Anfänger.
Es ist auch wichtig zu wissen, dass React relativ unstrukturiert ist. Du musst einen React-Router installieren und einrichten und entscheiden, wie du das Abrufen von Daten, die Optimierung von Bildern und das Aufteilen von Code handhaben willst. Für diese Einrichtung musst du zusätzliche Bibliotheken und Tools installieren und konfigurieren.
Im Gegensatz dazu sind bei Next.js diese Tools bereits vorinstalliert und vorkonfiguriert. Mit Next.js dient jede Datei, die dem Ordner pages hinzugefügt wird, automatisch als Route. Dank dieser eingebauten Unterstützung ist es einfacher, täglich mit Next.js zu arbeiten, sodass du sofort mit der Programmierung der Logik deiner Anwendung beginnen kannst.
Next.js und React-Funktionen
Da Next.js auf React basiert, teilen sich die beiden einige Funktionen. Next.js geht jedoch noch einen Schritt weiter und bietet zusätzliche Funktionen wie Routing, Code-Splitting, Pre-Rendering und API-Unterstützung. Diese Funktionen musst du bei der Verwendung von React selbst konfigurieren.
Datenabrufe
React rendert Daten auf der Client-Seite. Der Server sendet statische Dateien an den Browser, der dann die Daten aus den APIs abruft, um die Anwendung zu füllen. Dieser Prozess verringert die Leistung der App und sorgt für ein schlechtes Nutzererlebnis, da die App langsam lädt. Next.js löst dieses Problem durch Pre-Rendering.
Beim Pre-Rendering tätigt der Server die notwendigen API-Aufrufe und holt die Daten ab, bevor er die Anwendung an den Browser sendet. So erhält der Browser fertig gerenderte Webseiten.
Pre-Rendering kann sich auf Static Site Generation (SSG) oder Server-Side Rendering (SSR) beziehen. Bei SSG werden die HTML-Seiten zum Zeitpunkt der Erstellung generiert und für mehrere Anfragen wiederverwendet. Next.js kann HTML-Seiten mit oder ohne Daten erzeugen.
Im Folgenden siehst du ein Beispiel, wie Next.js Seiten ohne Daten generiert:
function App() {
return <div>Welcome</div>
}
export default AppFür statische Seiten, die externe Daten verbrauchen, verwendest du die Funktion getStaticProps(). Sobald du getStaticProps() aus einer Seite exportierst, rendert Next.js die Seite mit den zurückgegebenen Props vor. Diese Funktion wird immer auf dem Server ausgeführt, also verwende getStaticProps(), wenn die Daten, die die Seite verwendet, zum Zeitpunkt der Erstellung verfügbar sind. Du kannst sie zum Beispiel verwenden, um Blogposts aus einem CMS abzurufen.
const Posts= ({ posts }) => {
return (
<div className={styles.container}>
{posts.map((post, index) => (
// render each post
))}
</div>
);
};
export const getStaticProps = async () => {
const posts = getAllPosts();
return {
props: { posts },
};
};In Situationen, in denen die Seitenpfade von externen Daten abhängen, verwendest du die Funktion getStaticPaths(). Um also einen Pfad auf der Grundlage der Beitrags-ID zu erstellen, exportiere die getStaticPaths() aus der Seite.
Du könntest zum Beispiel getStaticPaths() aus pages/posts/[id].js exportieren, wie unten gezeigt.
export getStaticPaths = async() => {
// Get all the posts
const posts = await getAllPosts()
// Get the paths you want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
return { paths, fallback: false }
}getStaticPaths() wird oft mit getStaticProps() gepaart. In diesem Beispiel würdest du getStaticProps() verwenden, um die Details der ID im Pfad abzurufen.
export const getStaticProps = async ({ params }) => {
const post = await getSinglePost(params.id);
return {
props: { post }
};
};In SSR werden die Daten zum gewünschten Zeitpunkt abgerufen und an den Browser gesendet. Um SSR zu nutzen, exportierst du die Funktion getServerSide() props von der Seite, die du rendern willst. Der Server ruft diese Funktion bei jeder Anfrage auf, was SSR für Seiten nützlich macht, die dynamische Daten verbrauchen.
Du kannst sie zum Beispiel verwenden, um Daten von einer Nachrichten-API abzurufen.
const News = ({ data }) => {
return (
// render data
);
};
export async function getServerSideProps() {
const res = await fetch(`https://app-url/data`)
const data = await res.json()
return { props: { data } }
}Die Daten werden bei jeder Anfrage abgerufen und über Props an die Nachrichtenkomponente übergeben.
Code-Splitting
Code-Splitting bedeutet, dass der Code in Teile aufgeteilt wird, die der Browser bei Bedarf laden kann. Dadurch wird die Menge des Codes, die beim ersten Laden an den Browser gesendet wird, reduziert, da der Server nur das sendet, was der Nutzer braucht. Bundler wie Webpack, Rollup und Browserify unterstützen Code-Splitting in React.
Next.js unterstützt Code-Splitting von Haus aus.
Mit Next.js wird jede Seite in Code gesplittet, und das Hinzufügen von Seiten zur Anwendung erhöht nicht die Größe des Bundles. Next.js unterstützt auch dynamische Importe, die es dir ermöglichen, JavaScript-Module zu importieren und sie während der Laufzeit dynamisch zu laden. Dynamische Importe tragen zu schnelleren Seitengeschwindigkeiten bei, da die Pakete nur langsam geladen werden.
In der Home-Komponente unten zum Beispiel wird der Server die Hero-Komponente nicht in das erste Bundle aufnehmen.
const DynamicHero = dynamic(() => import('../components/Hero'), {
suspense: true,
})
export default function Home() {
return (
<Suspense fallback={`Loading...`}>
<DynamicHero />
</Suspense>
)
}Stattdessen wird das Fallback-Element der Suspense gerendert, bevor die Hero-Komponente geladen wird.
API-Unterstützung in Next.js vs. React
Die Next.js API-Routing-Funktion ermöglicht es dir, Backend- und Frontend-Code in derselben Codebasis zu schreiben. Jede Seite, die im Ordner /pages/api/ gespeichert ist, wird auf die Route /api/* abgebildet und von Next.js wie ein API-Endpunkt behandelt.
So kannst du zum Beispiel eine API-Route pages/api/user.js erstellen, die den Namen des aktuellen Benutzers zurückgibt:
export default function user(req, res) {
res.status(200).json({ username: 'Jane' });
}Wenn du die URL https://app-url/api/user aufrufst, siehst du das Objekt username.
{
username: 'Jane'
}API-Routen sind hilfreich, wenn du die URL eines Dienstes, auf den du zugreifst, verschleiern oder Umgebungsvariablen geheim halten willst, ohne eine ganze Backend-Anwendung zu programmieren.
Leistung
Next.js ist zweifelsohne überlegen, wenn es darum geht, leistungsfähigere Apps mit einem vereinfachten Prozess zu erstellen. SSR und SSG Next.js-Anwendungen sind leistungsfähiger als React-Anwendungen mit Client-Side-Rendering (CSR). Da Next.js die Daten auf dem Server abruft und alles, was der Browser zum Rendern braucht, sendet, sind keine Datenabrufe bei APIs mehr nötig. Das bedeutet schnellere Ladezeiten.
Außerdem unterstützt Next.js client-seitiges Routing. Der Browser muss nicht jedes Mal Daten vom Server abrufen, wenn ein Nutzer zu einer anderen Route navigiert. Außerdem ermöglicht die Next.js-Bildkomponente eine automatische Bildoptimierung. Bilder werden nur dann geladen, wenn sie in den Viewport gelangen. Wenn möglich, liefert Next.js auch Bilder in modernen Formaten wie WebP.
Next.js bietet auch Optimierungen für Schriftarten, intelligentes Prefetching von Routen und Optimierungen für die Bündelung. Diese Optimierungen sind in React nicht automatisch verfügbar.
Support
Da es React schon länger gibt als Next.js, verfügt es über eine größere Community. Allerdings übernehmen viele React-Entwickler/innen Next.js, so dass die Community stetig wächst. Entwickler/innen finden leichter bestehende Lösungen für Probleme, auf die sie stoßen, als dass sie Lösungen von Grund auf neu entwickeln müssen.
Next.js verfügt außerdem über eine hervorragende Dokumentation mit umfassenden und leicht verständlichen Beispielen. Trotz seiner Beliebtheit ist die Dokumentation von React nicht so übersichtlich.
Zusammenfassung
Die Entscheidung zwischen Next.js und React hängt von den Anforderungen der Anwendung ab.
Next.js erweitert die Fähigkeiten von React, indem es Strukturen und Werkzeuge zur Verfügung stellt, die die Leistung verbessern. Diese Werkzeuge, wie Routing, Code-Splitting und Bildoptimierung, sind in Next.js integriert, so dass Entwickler/innen nichts manuell konfigurieren müssen. Dank dieser Funktionen ist Next.js einfach zu bedienen und die Entwickler können sofort mit der Programmierung der Geschäftslogik beginnen.
Aufgrund der verschiedenen Rendering-Optionen eignet sich Next.js für serverseitig gerenderte Anwendungen oder für Anwendungen, die statische Generierung und Node.js-Server-seitiges Rendering kombinieren. Dank der Optimierungsfunktion von Next.js ist es außerdem perfekt für Websites, die schnell sein müssen, wie E-Commerce-Shops.
React ist eine JavaScript-Bibliothek, mit der du robuste Frontend-Anwendungen erstellen und skalieren kannst. Ihre Syntax ist einfach, besonders für Entwickler/innen mit JavaScript-Kenntnissen. Außerdem hast du die Kontrolle über die Werkzeuge, die du in deiner Anwendung verwendest und wie du sie konfigurierst.
Planst du deine eigene weltbeherrschende Anwendung? Informiere dich über Kinstas Ansatz für das Hosting von Node.js-Anwendungen für Dienste, die React und Next.js unterstützen.
Salman Ravoof ist ein autodidaktischer Webentwickler, Autor, Kreativer und ein großer Bewunderer von Free and Open Source Software (FOSS). Neben Technik begeistert er sich für Wissenschaft, Philosophie, Fotografie, Kunst, Katzen und Essen. Erfahre mehr über ihn auf seiner Website und trete mit Salman auf X in Kontakt.
Schreibe einen Kommentar