Next.js im Vergleich zu React? Es ist eine Partnerschaft, kein Wettbewerb

Es gibt keinen Mangel an JavaScript-Bibliotheken und Frameworks für moderne Webentwickler. Eine der allgegenwärtigsten Bibliotheken ist React, die Facebook (jetzt Meta) erstellt hat, um funktionsreiche Anwendungen zu erstellen. React-Anwendungen werden traditionell in Webbrowsern ausgeführt, aber das Next.js-Framework erweitert die React-Funktionalität auf die Serverseite durch die JavaScript-Laufzeitumgebung Node.js.

In diesem Artikel sehen wir uns Next.js und React an, damit Sie entscheiden können, ob sie für Ihr nächstes Projekt geeignet sind.

Next.js und React: JavaScript auf dem nächsten Level

Eine SlashData-Umfrage aus dem Jahr 2022 ergab, dass es weltweit mehr als 17 Millionen JavaScript-Programmierer gibt, die ein Paket anführen, das beliebte Sprachen wie Python und Java enthält. JavaScript kann sowohl auf der Client- als auch auf der Serverseite verwendet werden, und diese Vielseitigkeit bedeutet, dass Entwickler vollständige Anwendungen mit einer einzigen Programmiersprache 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 Frontend- und Backend-Integration vereinfachen. Darüber hinaus können Entwickler JavaScript-Funktionen mit Paketmanagern wie npm (dem Node.js-Paketmanager) erweitern, um JavaScript-Bibliotheken und -Tools zu installieren. Diese Ressourcen bieten ausgeklügelte Funktionen, die die Menge an Code reduzieren, die Sie selbst schreiben müssen.

Die Erweiterbarkeit von JavaScript bedeutet, dass ein umfassendes Wissen über die gängigsten Tools der Schlüssel zu Ihrem Erfolg als Webentwickler ist.

Was ist Next.js?

Next.js wurde ursprünglich 2016 von Vercel veröffentlicht und ist ein Open-Source-React-Framework, das die Bausteine ​​zum Erstellen hochleistungsfähiger Webanwendungen bereitstellt. Große Unternehmen haben es seitdem übernommen, darunter Twitch, TikTok und Uber, um nur einige zu nennen.

Next.js bietet eine der besten Entwicklererfahrungen zum Erstellen schneller, SEO-freundlicher Anwendungen. Im Folgenden sind einige Funktionen von Next.js aufgeführt, die es zu einem außergewöhnlichen Produktionsframework machen:

• Hybrid-Rendering-Funktionen
• Automatisches Code-Splitting
• Bildoptimierung
• Integrierte Unterstützung für CSS-Präprozessoren und CSS-in-JS-Bibliotheken
• Eingebautes Routing

Diese Funktionen helfen Next.js-Entwicklern, viel Zeit für Konfiguration und Tools zu sparen. Sie können direkt zum Erstellen Ihrer Anwendung springen, die Projekte wie die folgenden unterstützen könnte:

• E-Commerce-Shops
• Blogs
• Dashboards
• Single-Page-Anwendungen
• Benutzeroberflächen interagieren
• Statische Webseiten

Was ist Reagieren?

React ist eine JavaScript-Bibliothek zum Erstellen dynamischer Benutzeroberflächen. Neben der Erstellung von Webschnittstellen können Sie mit React Native mobile Anwendungen erstellen.

Einige Vorteile der Verwendung 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.
• Stark komponentenbasiert: Sobald Sie eine Komponente erstellt haben, können Sie sie wiederholt wiederverwenden.
• Einfaches Debugging: React-Anwendungen verwenden einen unidirektionalen Datenfluss – nur von übergeordneten zu untergeordneten Komponenten.

Next.js im Vergleich zu React

Obwohl Entwickler Next.js und React häufig für denselben Zweck verwenden, gibt es einige grundlegende Unterschiede zwischen den beiden.

Benutzerfreundlichkeit

Es ist einfach, mit Next.js und React zu beginnen. Jeder erfordert die Ausführung einzelner Befehle in Ihrem Terminal mit npx , das Teil von npm für Node.js ist.

Für Next.js lautet der einfachste Befehl:

 npx create-next-app

Ohne zusätzliche Argumente für create-next-app wird die Installation im interaktiven Modus fortgesetzt. Sie werden nach einem Projektnamen gefragt (der für das Projektverzeichnis verwendet wird) und ob Sie Unterstützung für TypeScript und den Code-Linter ESLint einschließen möchten.

Es wird in etwa so aussehen:

Beim Initialisieren einer React-Instanz enthält der einfachste Befehl einen Namen für das Verzeichnis des Projekts:

 npx create-react-app new-app

Dadurch wird ein Ordner erstellt, der alle erforderlichen Erstkonfigurationen und Abhängigkeiten enthält:

Obwohl beide den Einstieg erleichtern, denken Sie daran, dass Next.js auf React aufbaut. Sie können Next.js also nicht lernen, ohne zuerst React zu lernen und zu verstehen, wie es funktioniert. Glücklicherweise weist React eine sanfte Lernkurve auf und eignet sich hervorragend für Anfänger.

Es ist auch wichtig zu beachten, dass React relativ unstrukturiert ist. Sie müssen einen React-Router installieren und einrichten und entscheiden, wie Sie mit Datenabruf, Bildoptimierung und Code-Splitting umgehen. Für dieses Setup müssen Sie zusätzliche Bibliotheken und Tools installieren und konfigurieren.

Im Gegensatz dazu sind diese Tools in Next.js vorinstalliert und vorkonfiguriert. Mit pages dient jede Datei, die dem Seitenordner hinzugefügt wird, automatisch als Route. Aufgrund dieser integrierten Unterstützung ist die tägliche Arbeit mit Next.js einfacher, sodass Sie sofort mit der Programmierung der Logik Ihrer Anwendung beginnen können.

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 enthält zusätzliche Funktionen wie Routing, Code-Splitting, Pre-Rendering und API-Unterstützung direkt nach dem Auspacken. Dies sind Funktionen, die Sie bei der Verwendung von React selbst konfigurieren müssten.

Datenabruf

React rendert Daten auf der Client-Seite. Der Server sendet statische Dateien an den Browser, und der Browser ruft dann die Daten von APIs ab, um die Anwendung zu füllen. Dieser Prozess verringert die App-Leistung und bietet eine schlechte Benutzererfahrung, da die App langsam geladen wird. Next.js löst dieses Problem durch Pre-Rendering.

Beim Pre-Rendering führt der Server die erforderlichen API-Aufrufe durch und ruft die Daten ab, bevor er die Anwendung an den Browser sendet. Als solches erhält der Browser bereit zum Rendern von Webseiten.

Pre-Rendering kann sich auf die Generierung statischer Websites (SSG) oder serverseitiges Rendering (SSR) beziehen. In SSG werden die HTML-Seiten zur Erstellungszeit generiert und für mehrere Anfragen wiederverwendet. Next.js kann HTML-Seiten mit oder ohne Daten generieren.

Unten sehen Sie ein Beispiel dafür, wie Next.js Seiten ohne Daten generiert:

 function App() { return <div>Welcome</div> } export default App

Verwenden Sie für statische Seiten, die externe Daten verbrauchen, die Funktion getStaticProps() . Nachdem Sie getStaticProps() von einer Seite exportiert haben, rendert Next.js die Seite mit den zurückgegebenen Requisiten vorab. Diese Funktion wird immer auf dem Server ausgeführt, verwenden Sie also getStaticProps() , wenn die von der Seite verwendeten Daten zur Erstellungszeit verfügbar sind. Sie können es beispielsweise verwenden, um Blog-Beiträge von 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 }, }; };

Verwenden Sie in Situationen, in denen die Seitenpfade von externen Daten abhängen, die Funktion getStaticPaths() . Um also einen Pfad basierend auf der Beitrags-ID zu erstellen, exportieren getStaticPaths() von der Seite.

Beispielsweise könnten Sie 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ürden Sie 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 Daten zum angeforderten Zeitpunkt abgerufen und an den Browser gesendet. Um SSR zu verwenden, exportieren Sie die Props-Funktion getServerSide() von der Seite, die Sie rendern möchten. Der Server ruft diese Funktion bei jeder Anfrage auf, was SSR für Seiten nützlich macht, die dynamische Daten verbrauchen.

Sie können es beispielsweise 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 News-Komponente übergeben.

Code-Splitting

Code-Splitting ist das Teilen von Code in Chunks, die der Browser bei Bedarf laden kann. Es reduziert die Codemenge, die während des anfänglichen Ladens an den Browser gesendet wird, da der Server nur das sendet, was der Benutzer benötigt. Bundler wie Webpack, Rollup und Browserify unterstützen Code-Splitting in React.

Next.js unterstützt standardmäßig Code-Splitting.

Bei Next.js wird jede Seite durch Code aufgeteilt, und das Hinzufügen von Seiten zur Anwendung erhöht die Paketgröße nicht. Next.js unterstützt auch dynamische Importe, wodurch Sie JavaScript-Module importieren und während der Laufzeit dynamisch laden können. Dynamische Importe tragen zu schnelleren Seitengeschwindigkeiten bei, da Bundles verzögert geladen werden.

In der Home -Komponente unten wird der Server beispielsweise die Heldenkomponente nicht in das ursprüngliche Paket 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

Mit der API-Routingfunktion von Next.js können Sie Back-End- und Front-End-Code in derselben Codebasis schreiben. Jede im Ordner /pages/api/ gespeicherte Seite wird der Route /api/* zugeordnet und von Next.js wie ein API-Endpunkt behandelt.

Sie können beispielsweise eine API-Route pages/api/user.js erstellen, die den Namen des aktuellen Benutzers wie folgt zurückgibt:

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

Wenn Sie die URL https://app-url/api/user aufrufen, sehen Sie das Objekt username.

 { username: 'Jane' }

API-Routen sind hilfreich, wenn Sie die URL eines Dienstes, auf den Sie zugreifen, maskieren oder Umgebungsvariablen geheim halten möchten, ohne eine ganze Backend-Anwendung zu codieren.

Leistung

Next.js ist zweifellos überlegen in seiner Fähigkeit, leistungsfähigere Apps mit einem vereinfachten Prozess zu erstellen. SSR- und SSG Next.js-Anwendungen sind leistungsfähiger als React-Anwendungen für clientseitiges Rendering (CSR). Durch das Abrufen von Daten auf dem Server und das Senden von allem, was der Browser zum Rendern benötigt, macht Next.js eine Datenabrufanforderung an APIs überflüssig. Das bedeutet schnellere Ladezeiten.

Außerdem, weil Next.js clientseitiges Routing unterstützt. Der Browser muss nicht jedes Mal Daten vom Server abrufen, wenn ein Benutzer zu einer anderen Route navigiert. Darüber hinaus ermöglicht die Next.js-Bildkomponente eine automatische Bildoptimierung. Bilder werden nur geladen, wenn sie in das Ansichtsfenster gelangen. Wo möglich, stellt Next.js auch Bilder in modernen Formaten wie WebP bereit.

Next.js bietet auch Schriftartoptimierungen, Smart Route Prefetching und Bündelungsoptimierungen. Diese Optimierungen sind in React nicht automatisch verfügbar.

Unterstützung

Da es React schon länger gibt als Next.js, hat es eine umfangreichere Community. Viele React-Entwickler übernehmen jedoch Next.js, sodass die Community stetig wächst. Entwickler finden leichter bestehende Lösungen für Probleme, auf die sie stoßen, anstatt Lösungen von Grund auf neu erstellen zu müssen.

Next.js bietet auch eine hervorragende Dokumentation mit umfassenden und leicht verständlichen Beispielen. Trotz ihrer Popularität ist die React-Dokumentation nicht so navigierbar.

Zusammenfassung

Die Wahl von Next.js oder React hängt von den Anforderungen einer Anwendung ab.

Next.js erweitert die Fähigkeiten von React, indem es Strukturen und Tools bereitstellt, die die Leistung verbessern. Diese Tools wie Routing, Code-Splitting und Bildoptimierung sind in Next.js integriert, sodass Entwickler nichts manuell konfigurieren müssen. Dank dieser Funktionen ist Next.js einfach zu verwenden, und Entwickler können sofort mit der Programmierung der Geschäftslogik beginnen.

Aufgrund der unterschiedlichen Rendering-Optionen eignet sich Next.js für serverseitig gerenderte Anwendungen oder Anwendungen, die statische Generierung und serverseitiges Rendering von Node.js kombinieren. Dank der von Next.js bereitgestellten Optimierungsfunktion eignet es sich außerdem perfekt für Websites, die schnell sein müssen, wie z. B. E-Commerce-Shops.

React ist eine JavaScript-Bibliothek, mit der Sie robuste Front-End-Anwendungen erstellen und skalieren können. Seine Syntax ist auch einfach, insbesondere für Entwickler mit JavaScript-Hintergrund. Darüber hinaus haben Sie die Kontrolle darüber, welche Tools Sie in Ihrer Anwendung verwenden und wie Sie sie konfigurieren.

Planen Sie Ihre eigene weltbeherrschende Anwendung? Tauchen Sie ein in Kinstas Ansatz zum Node.js-Anwendungshosting für Dienste, die React und Next.js unterstützen.