NextJS - der Gamechanger für deine Web Performance

In diesem Blogbeitrag erfährst du, wie du mit NextJS das Maximum aus deiner Web Plattform herausholen kannst. Entdecke, warum diese Technologie die Web-Performance revolutioniert und was du tun kannst, um die Nutzererfahrung zu verbessern, deine Absprungraten zu reduzieren und deine Konversionsrate zu erhöhen.

Wenn es darum geht, eine effiziente, schnell ladende Website oder Webanwendung zu erstellen, gibt es keinen Spielraum für Kompromisse. Die Geschwindigkeit, mit der eine Seite lädt oder eine Webanwendung läuft, hat einen großen Einfluss auf Benutzererfahrung, Absprungrate und Conversions.

Wenn du mit Performance-Problemen auf deiner Plattform kämpfst, kann NextJS die Lösung sein, die du brauchst. In diesem Blog-Post werden wir das Thema NextJS näher betrachten und wie es dein Web-Projekt revolutionieren kann.

Was ist NextJS?

NextJS ist ein leistungsstarkes Framework, das auf React basiert und dessen Funktionen erweitert.

Vielleicht kennst du bereits moderne UI Technologien wie React, VueJS, Solid oder Svelte. Diese Open-Source JavaScript Bibliotheken ermöglichen die Erstellung interaktiver Benutzeroberflächen aus isolierten Bausteinen ("Komponenten"). Die wiederverwendbaren Komponenten machen den Code übersichtlich und einfach zu warten.

Es gilt jedoch zu beachten, dass der Fokus dieser Frameworks meist rein auf dem Rendering der Oberflächen liegt und einige essentielle Funktionen wie beispielsweise ein Routing nicht standardmäßig enthalten sind.

Frameworks wie Nuxt (VueJS), Sveltekit (Svelte), SolidStart (Solid) und NextJS (React) erweitern den Funktionsumfang, sodass vollumfängliche Projekte auf der Technologie implementiert werden können.

Mit NextJS und ähnlichen Frameworks können Entwickler auf einer höheren Ebene arbeiten und sich auf Business Features konzentrieren, ohne sich mit dem komplexen Setup und der Konfiguration der Bibliothek befassen zu müssen. Das ist ein großer Gewinn für die Produktivität deines Entwicklungsteams. Das Framework bietet eine strukturierte Umgebung, die es ermöglicht, schneller zu arbeiten und hochwertige Web-Anwendungen zu erstellen.

Die Kombination aus statisch und dynamisch

Wenn wir auf die Vergangenheit des Internets schauen, erkennen wir den enormen Vorteil des statischen Webs: Es war einfach abrufbar und unter Berücksichtigung der Verbindungsgeschwindigkeiten schnell abrufbar. Mit der technologischen Weiterentwicklung wurde das Web immer dynamischer und von aufwendiger Logik getrieben. Die heutige Rechenleistung verschleiert oft, wie viel Rechenkraft für die Darstellung einer einfachen Webseite benötigt wird. So erzeugt beispielsweise ein einfacher Aufruf einer Wordpress-Seite standardmäßig rund 59 SQL-Abfragen. Häufig wird dieser Performanceverlust nur durch die Verwendung eines zusätzlichen Caching-Layers wie z.B. Varnish abgemildert.

NextJS hingegen ermöglicht uns, die Vorteile von statischen Websites (hohe Geschwindigkeit und Sicherheit) mit dynamischen Bestandteilen zu verknüpfen. Performance ist hierbei nicht ein Add-On, sondern ein Kern-Feature des Frameworks.

Das Framework berücksichtigt, dass Bereiche deiner Anwendung unterschiedliche Anforderungen haben können. Während eine Kontakt-Seite sich vlt. 1-2 mal pro Jahr verändert, muss eine Produktdetailseite Tagesaktuelle Preis- und Bestandsinformationen aufzeigen können.

Um dies zu ermöglichen unterscheidet NextJS zwischen verschiedenen Generierungs-Methoden: Static Site Generation (SSG), Serverseitigen Rendering (SSR) und Clientseitigen Rendering (CSR)

Static Site Generation

Static Site Generation ist ein Ansatz, bei dem die gesamte Webseite oder Teile davon im Voraus – z.B. während eines Deployments vor generiert werden. Dies bedeutet, dass für jeden Seitenaufruf keine serverseitige Berechnung notwendig ist, da die Seiten bereits als statische HTML-Dateien vorhanden sind. SSG ist besonders geeignet für Seiten mit Inhalten, die sich selten oder nie ändern, wie z.B. Blog-Posts oder Produktbeschreibungen.

Da die Seite statisch ist, kann sie von CDN (Content Delivery Networks) ausgeliefert werden, was zu einer noch schnelleren Ladezeit führt.

Serverseitiges Rendering

Serverseitiges Rendering ist ein anderer Ansatz, um Webseiten zu erzeugen und darzustellen. Es ist besonders nützlich für Inhalte, die häufig aktualisiert werden müssen oder für Seiten, die auf spezifische Benutzerdaten reagieren müssen. Im Gegensatz zur statischen Seitengenerierung, bei der die Seiten im Voraus generiert werden, erfolgt das Serverseitige Rendering zur Laufzeit, d.h. jede Anforderung an den Server resultiert in einer neu gerenderten Seite.

Dies hat den Vorteil, dass die Seite stets mit den neuesten Daten aus der Datenbank oder von einer API dargestellt wird. So können beispielsweise Produktdetails, Preise oder Benutzerinformationen, die sich häufig ändern, immer auf dem neuesten Stand gehalten werden.

Clientseitiges Rendering

Clientseitiges Rendering, oder CSR, ist ein dritter Ansatz zur Erzeugung von Webseiten, der stark auf JavaScript und insbesondere auf Frameworks wie Next.js angewiesen ist. Bei diesem Ansatz wird der Großteil der Arbeit auf den Client, also den Webbrowser des Nutzers, verlagert.

Im Gegensatz zu SSG und SSR, bei denen Seiten serverseitig generiert und dann an den Client gesendet werden, erhält der Client beim CSR zunächst eine minimale HTML-Seite. Der restliche Inhalt der Seite wird dann durch JavaScript geladen und gerendert, das nach der anfänglichen Seite vom Server heruntergeladen wird.

Ein Hauptvorteil von CSR ist, dass nach dem ersten Laden der Seite, auf nachfolgende Anfragen nur noch die notwendigen Daten geladen werden, was zu einer besseren Nutzererfahrung führt. Allerdings erfordert CSR mehr Rechenleistung auf Client-Seite und kann bei langsamen Internetverbindungen zu längeren Ladezeiten führen.

Das Framework bietet dabei eine elegante Lösung, die die Vorteile von SSG, SSR und CSR zu kombinieren, um eine optimale Webseiten-Performance zu gewährleisten.

Ausblick auf die Zukunft von Web-Entwicklung mit Next.js

In der aktuellen Praxis führt das Aufrufen einer dynamischen Funktion innerhalb deiner Route – wie zum Beispiel der Zugriff auf Cookies dazu, dass deine Route vollständig dynamisch behandelt wird. Diese Zweiteilung zwischen statischem und dynamischem Rendering prägt den Aufbau vieler heutiger Web-Applikationen. Entwickler stehen oft vor der Wahl, sich für das eine oder das andere Rendering-Verfahren für ihre gesamte Anwendung oder spezifische Routen zu entscheiden.

Doch die Realität vieler Webseiten und Applikationen spiegelt diese strikte Trennung nicht wider. Nehmen wir als Beispiel eine E-Commerce-Seite: Während große Teile der Produktseite statisch vorgerendert werden können, gibt es Elemente wie den Warenkorb des Nutzers oder Empfehlungen, die dynamisch und auf Abruf generiert werden müssen.

Hier setzt das innovative Konzept des "Partial Pre-Rendering" an, das mit Next.js 14 als Vorschau-Funktion Einzug hält. Dieses experimentelle Feature ermöglicht es, eine Route mit einer statischen "Ladehülle" zu rendern, während gewisse Bereiche dynamisch bleiben. Kurz gesagt: Es erlaubt die Isolierung dynamischer Elemente innerhalb einer ansonsten statischen Seite.

Wie funktioniert das in der Praxis?

Besucht ein Nutzer eine solche partiell vorgerenderte Route, wird ihm zunächst eine statische Hülle ausgeliefert. Diese schnelle initiale Darstellung verbessert nicht nur die Ladezeit, sondern auch das Nutzererlebnis erheblich. Innerhalb dieser Hülle befinden sich "Lücken", die dazu bestimmt sind, dynamische Inhalte asynchron nachzuladen. Diese dynamischen Inhalte werden parallel zum initialen Ladevorgang gestreamt, was die Gesamtladezeit signifikant verkürzt.

Diese Herangehensweise unterscheidet sich grundlegend von der bisherigen, bei der Routen entweder vollständig statisch oder dynamisch gerendert werden.

Durch die Einführung des Partial Pre-Renderings schlägt Next.js eine Brücke zwischen der blitzschnellen Auslieferung statischer Inhalte und der Flexibilität dynamischer Anwendungen. Dieser Ansatz verspricht, die Landschaft der Web-Entwicklung nachhaltig zu prägen, indem er das Beste aus beiden Welten vereint: Die Geschwindigkeit statischer Seiten und die Anpassungsfähigkeit dynamischer Inhalte.

Automatische Optimierung von Bildern, Schriftarten und Skripten

NextJS bietet automatische Optimierungen für Bilder, Schriftarten und Skripte an, die zur Verbesserung der Nutzererfahrung und der Core Web Vitals beitragen. Mit NextJS können Bilder sowohl serverseitig als auch clientseitig optimiert werden. Bilder werden automatisch in das effizienteste Format umgewandelt und basierend auf Gerät und Netzwerkverbindung des Nutzers auf die ideale Größe zugeschnitten.

Was Schriftarten betrifft, unterstützt NextJS den modernen Web-Standard Font Loading API. Mit diesem können Entwickler die Zeit bis zur ersten sichtbaren Textdarstellung (FCP –First Contentful Paint) optimieren und das unschöne Aufblitzen von Webfonts (FOUT – Flash of Unstyled Text) verhindern.

Ebenso wie Bilder und Schriftarten, sorgt das Framework dafür, dass JavaScript Logik optimiert wird. So wird nur der Teil der Scripte geladen, welcher für den Endnutzer in der aktuellen Ansicht auf seinem Gerät benötigt wird. Dazu teilt NextJS die Logik deines Projektes in kleinere, verwaltbare Stücke auf ("Code-Splitting"). Durch die Integration von Server Komponenten, können Entwickler zudem gezielt große und langsame Berechnungen auf den Server verlagern.

Das Ergebnis: Effizientes Ressourcenmanagement und blitzschnelle Ladezeiten.

Fazit

NextJS ist ein leistungsfähiges Framework für die Webseitenentwicklung. Es kombiniert verschiedene Rendering-Methoden und bietet automatische Optimierungen für eine ideale Projektbasis. Mit NextJS profitieren deine Kunden von einer verbesserten Nutzererfahrung und hervorragenden Ladezeiten.

Neben den verschiedenen Rendering Methoden, bietet NextJS weitere Innovative Funktionen wie bspw. einer Integrierten Schnittstellen Kommunikation (Server Actions). Der Fokus des Artikels liegt hier jedoch bewusst auf Performance kritische Funktionen. Wenn Du fragen zu weiteren Funktionen von NextJS hast, schreib uns gerne.

Wir haben uns in diesem Blog mit dem modernen Frontend Framework NextJS beschäftigt - wenn du in deinem Unternehmen kein React einsetzt, kannst du dennoch von vielen der vorgestellten Prinzipien, Methodiken und Funktionen profitieren. Wir bei synaigy beraten dich gerne, um die optimale Lösung passend für deine Setups zu finden.

Du hast Fragen oder Feedback?

Dann kontaktiere uns gerne direkt.

Grimm Benedict
Head of Frontendsynaigy GmbHKontakt

Vertiefe dein Wissen mit uns

Blog 29.02.24
Blog 29.02.24

Mit KI-Suche zu personalisierten Sucherlebnissen

In der heutigen digitalen Welt ist Zeit kostbar und Auswahl überwältigend. Deshalb ist eine intelligente Suchfunktion im E-Commerce entscheidend! In der aktuellen insights!-Folge hatte ich das Vergnügen, Christina Schönfeld von Algolia zu Gast zu haben. Sie erläutert uns, warum die SaaS-Such- und Entdeckungs-Plattform den Unterschied macht und welche Auswirkungen AI Driven Search in der Customer Journey hat.

Blog 02.05.24
Blog 02.05.24

KI & Personalisierung: Zukunft der Softwareentwicklung

In dieser Folge von insights! erläutert Ralf Trapp, CEO von procelo, die Bedeutung von Menschen in der Softwareentwicklung. Dabei teilt er seine Erfahrungen und Erkenntnisse aus seiner langjährigen Tätigkeit im Mittelstandsbereich und gibt wertvolle Einblicke, wie Unternehmen ihre Softwareentwicklungspraktiken optimieren können, um hochwertige und zuverlässige Produkte zu liefern.

Blog 27.06.24
Blog 27.06.24

E-Commerce, KI und Personalisierung im Schäfer Shop

In der neuesten insights!-Folge spreche ich mit Andreas Reuter, dem CEO von Schäfer Shop, über die Erfolge von E-Commerce-Strategien, die Zukunft der Arbeit mit hybriden Arbeitsmodellen sowie die Auswirkungen innovativer Technologien wie Live-Übersetzungen und Deepfake auf die globale Zusammenarbeit, um Sprachbarrieren zu überwinden und innovative Wege der Kommunikation zu schaffen. Trotz der faszinierenden Möglichkeiten betonen wir auch die damit verbundenen Herausforderungen und ethischen Bedenken.

Blog 03.07.24
Blog 03.07.24

Wie sicher sind deine Systeme?

Gerade in den letzten Jahren wächst der E-Commerce Markt immer weiter und damit einhergehend werden auch die Angriffe auf E-Commerce Systeme häufiger. Cyberbedrohungen stehen mittlerweile an der Tagesordnung. Dabei ist es entscheidend, die verschiedenen Angriffsvektoren zu verstehen und geeignete Maßnahmen zu ergreifen, um deine Plattform zu schützen. So gilt es Sicherheitslücken zu schließen und den reibungslosen Betrieb sicherzustellen.

Blog 04.07.24
Blog 04.07.24

So personalisiert KI mit Datenanalyse deinen Onlineshop

In der neuesten insights!-Folge hatten wir das Vergnügen, Ralph Hünermann, Gründer und Geschäftsführer der ODOSCOPE GmbH, im Studio zu begrüßen. Das Gespräch drehte sich um die Ansätze, die ODOSCOPE im Bereich der E-Commerce-Personalisierung, künstlicher Intelligenz und Datenanalyse verfolgt.

Blog 14.06.24
Blog 14.06.24

Vom Gästeerlebnis zur Kundenbindung: CX-Strategien im Okura

Wie schafft es ein Hotel, seine Gäste jeden Tag aufs Neue zu beeindrucken? In dieser insights!-Folge ist Niek Hammer, GM des Hotels Okura in Bangkok, zu Gast. Er teilt seine Erfahrungen, wie man im Hotelgewerbe mit Herz und Hingabe herausragenden Kundenservice bietet und eine Kultur der kontinuierlichen Verbesserung schafft. Du erfährst, wie man mit Fehlern umgeht und warum ein menschlicher Führungsstil den Unterschied macht. Dabei beleuchtet Niek, wie das Okura-Team täglich Exzellenz anstrebt, was hinter ihrem kontinuierlichen Verbesserungsprozess steckt und welche Rolle die Mitarbeiterführung dabei spielt.

Blog 23.05.24
Blog 23.05.24

E-Commerce-Strategie: Augmented Reality für bessere CX

Möbelstücke virtuell im Wohnzimmer platzieren? Outfits anprobieren, ohne das Haus zu verlassen? Mit Augmented Reality wird Onlineshopping zum Erlebnis! Durch diese Technologie wird das Shoppen immer interaktiver und spannender und hat zur Folge, dass es zu weniger Unsicherheit und mehr Spaß beim Einkaufen führt!

Blog 16.05.24
Blog 16.05.24

Zukunft:Omnichannel-Strategien für ROI und Kundenzentrierung

Omnichannel ist nicht nur ein Buzzword – es ist unumgänglich für Unternehmen, die wettbewerbsfähig bleiben wollen. Verzahnte Verkaufskanäle sind essentiell für ein reibungsloses Kundenerlebnis, das wiederum zu mehr Umsatz führt. Genau das ist das Thema der heutigen insights!-Folge. Dieses Mal kitzelt Sonja Fuhrmann, freie Journalistin, die insights aus mir heraus.

Blog 04.04.24
Blog 04.04.24

Digitaler Erfolg durch gemeinsame Unternehmenswerte

In dieser insights!-Folge beleuchten Laura Ludwig und Jan Stassen, die Gründer vom Museum für Werte, die Bedeutung von Werten und Organisationskultur in Zeiten des digitalen Wandels. Sie betonen die Notwendigkeit, nicht nur nach außen zu schauen, sondern auch nach innen zu reflektieren und die eigenen Werte in Technologie und Produktentwicklung zu integrieren.

Blog 21.03.24
Blog 21.03.24

Effizienzmaximierung durch KI, Personalisierung & Daten

In dieser insights!-Folge haben wir Philipp Krüger, Vice President Marketing & Consulting von Pimcore zu Gast. Gemeinsam diskutieren wir über die Zukunft der digitalen Technologie und nehmen dabei die Auswirkungen generativer KI, Hyper-Personalisierung und fortschrittlicher Datenmanagementlösungen auf das Marketing und E-Commerce ins Visier.

Blog 11.03.24
Blog 11.03.24

Personalisierung als Herzstück der Sales& Marketing-Strategy

In dieser insights!-Folge teilt Ali Saffari, Managing Partner von Voyage8 Group, Einblicke in effektive Führungsstrategien innerhalb des Vertriebs, Marketings und Customer Success. Ali diskutiert den Aufbau und die Anpassung von Vertriebsteams an sich wandelnde Marktdynamiken sowie die Nutzung von Daten zur Optimierung der Kundenansprache.

Blog 11.04.24
Blog 11.04.24

Überwindung der Kreativitätsblockade

In unserem Alltag tendieren wir oft dazu, auf bekannten und bewährten Wegen zu verharren. Diese Vorliebe für Vertrautes, die uns ein Gefühl von Sicherheit gibt, hindert uns jedoch daran, unsere kreative Ader voll auszuschöpfen – eine essentielle Fähigkeit, wenn es darum geht, innovative Lösungen für unsere Kunden zu entwickeln. Diese Lösungen sollen nicht nur deren Arbeitsalltag erleichtern, sondern auch beschleunigen und bereichern.

Blog 14.03.24
Blog 14.03.24

Diese Top 5 Superkräfte machen Product Owner unverzichtbar

In der sich ständig wandelnden digitalen Landschaft von heute ist der Product Owner nicht einfach nur eine Rolle – es ist eine Berufung. Du trägst die Vision deines Produkts wie ein Banner vor dir her und hast die Mission, das bestmögliche Erlebnis und Ergebnis für deine Nutzerer und Nutzerinne zu schaffen. Dabei geht es um so viel mehr als nur Planung und Verwaltung; es geht darum, eine Brücke zwischen dem, was ist, und dem, was sein könnte, zu bauen.

Blog 05.07.24
Blog 05.07.24

Die Bedeutung der Datensouveränität

Datensouveränität ist nicht nur ein Marketing-Buzzword, sondern ein Erfolgsfaktor für Unternehmen, die in der globalen Wirtschaft ganz vorne mitspielen wollen. Die jüngste Bitkom-Studie zur Cloudsouveränität unterstreicht die wachsende Bedeutung von Cloud-Lösungen für deutsche Unternehmen und zeigt auf, dass 95 % der befragten Unternehmen Cloud Computing bereits im Einsatz haben oder noch nutzen wollen​.

Blog 11.07.24
Blog 11.07.24

Mit modernen Order-Management-Systemen zu zufriedenen Kunden

In dieser Folge von insights! hatte ich das Vergnügen, Linda Kuhr, die Gründerin und Geschäftsführerin von Fulfillmenttools, zu Gast zu haben. Sie teilt ihre Erfahrungen und Einblicke in die Welt des modernen Order Managements und die Herausforderungen, die dabei gemeistert werden müssen.

Blog 12.04.23
Blog 12.04.23

OVHcloud: Schutz vertraulicher Infos für Unternehmen

Die digitale Transformation hat in den letzten Jahren zu einem rasanten Anstieg der Datenmengen geführt, die Unternehmen und Organisationen auf der ganzen Welt verarbeiten und speichern müssen. In diesem Zusammenhang wird die Datensouveränität zu einem immer wichtigeren Thema, insbesondere wenn es darum geht, vertrauliche Informationen sicher und geschützt zu halten. Hier kommt die OVHcloud ins Spiel - ein europäischer Cloud-Service-Anbieter, der sich dem Schutz der Datensouveränität verschrieben hat.

Blog 06.04.23
Blog 06.04.23

Metaverse: B2B und B2C Unternehmen maximieren ihren ROI

Das Metaverse verspricht der Gamechanger für die Zukunft der virtuellen Realität und der digitalen Interaktion zu werden und hat das Potenzial Handel, Arbeitswelt und Freizeit nachhaltig zu verändern. Metaverse-Plattformen können Unternehmen dabei helfen, innovative Geschäftschancen zu schaffen und neue Kundengruppen zu erschließen. In diesem Kontext bieten sie die nächste große Chance für Unternehmen im E-Commerce, um wettbewerbsfähig zu bleiben und dein Geschäft auszubauen. Was es mit Metaverse genau auf sich hat, wie Unternehmen von der Metaverse-Revolution profitieren können und was wir von den Vorreitern lernen können, lernst du in der neuen insights!-Folge mit Christian Gleich.

Blog 30.03.23
Blog 30.03.23

Verbesserung der Customer Experience durch digitale Empathie

Im Gespräch widmen sich Katja Moritz und ich dem Phänomen der digitalen Körpersprache in der Online-Welt. Der technologische Fortschritt hat es inzwischen so weit gebracht, dass der Kunde im wahrsten Sinne des Wortes gläsern ist. Was in der Offline-Welt die Mimik ist, ist im Netz der Mausklick an der entsprechenden Stelle. Wie Shop-Betreiber die Wünsche und Bedürfnisse ihrer Kunden entschlüsseln, darüber gibt die Kölner User Epxerience Managerin heute Auskunft.

Blog 23.03.23
Blog 23.03.23

Managed Services im E-Commerce: Der Weg zu mehr Umsatz?

Recht technisch geht es heute beim Gespräch zwischen mir und dem Teamleiter von Managed Services & Software Development, Marc Achsnich, zu. Die beiden Kenner der E-Commerce-Branche fachsimpeln vor dem Mikrofon darüber, wie sich Onlineshops auf unerwartete Stoßzeiten vorbereiten können, in welchem Umfang die Systeme überwacht werden sollten und wie ein guter Kundensupport auszusehen hat.

Blog 16.03.23
Blog 16.03.23

Wie die MACH-Architektur und API-First helfen können

Heute habe ich Sven Baumgart, Gründer und CEO von Tremaze, zu Gast. Gemeinsam mit Sven tauchen wir in die Welt der App-Entwicklung ein. Tremaze hat zwei Anwendungen, Tremaze und Tagea, entwickelt. In der neuen insights!-Folge verrät Sven, wie sie bei der App-Entwicklung mit nur vier Vollzeitentwicklern vorgehen und wie die MACH-Architektur und der API-First Ansatz helfen können, kostengünstig Apps zu aufzubauen. Außerdem geht Sven auf ihre Herausforderungen und Best Practises ein.

Jetzt Blog abonnieren und keine News mehr verpassen

✔️kostenlos ✔️jede Woche News ✔️Expertenwissen