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 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 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 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 09.02.24
Blog 09.02.24

Ein Public Cloud Cheat Sheet der führenden Cloud Provider

Der Blogbeitrag bietet dir einen umfassenden Überblick über die aktuelle Landschaft der Public Cloud, insbesondere im Kontext von OVHcloud als führendem europäischen Cloud-Computing-Unternehmen. Das "Public Cloud Cheat Sheet" ist ein nützlicher Wegweiser durch die komplexe Welt der Public Cloud, unterteilt in acht Disziplinen. Diese Disziplinen reichen von Speicherdiensten über Datenbanken, Rechnersysteme, Orchestrierung, Netzwerk, Data & Analytics, KI bis hin zum Management.

Blog 26.01.24
Blog 26.01.24

Die bevorstehende Let's Encrypt Aktualisierung

Die Welt des Internets ist ständig im Wandel, und als Online-Shopbetreiber ist es unerlässlich, mit den neuesten Entwicklungen in der Webtechnologie Schritt zu halten. In diesem Kontext rückt die bevorstehende Verlängerung der Let's Encrypt-Zertifikate, die am 30. September 2024 ansteht, in den Fokus. Die letzten Jahre waren geprägt von Anpassungen und Sicherheitsmaßnahmen, und es ist an der Zeit, einen Blick auf die bevorstehende Umstellung zu werfen.

Blog 25.01.24
Blog 25.01.24

D2C: Kundenorientierung und Personalisierung im E-Commerce

In dieser insights!-Folge teilt Saskia Roch, Managing Director vom ECC NEXT, Einblicke mit dir, wie digitale Services, D2C-Strategien und eine starke Kundenorientierung die Spielregeln im E-Commerce verändern. Der Haupttrend? Künstliche Intelligenz! Saskia Roch betrachtet KI als eine goldene Gelegenheit für den Mittelstand, um den Fachkräftemangel zu bewältigen und rasch Fortschritte zu erzielen.

Blog 18.01.24
Blog 18.01.24

Mit Digital Nudging die Conversion Rate im Commerce steigen

Heute zu Gast: Denise Rettig. Denise zeigt auf, dass ein maßgeschneidertes Online-Erlebnis kein Luxus, sondern ein Muss ist. Wir erkunden, wie mit Tools wie Brytes selbst subtilste Verhaltensweisen auf der Webseite sichtbar werden - entscheidend für die Personalisierung des Einkaufserlebnisses und die Steigerung der Conversion. Wenn du wissen willst, was es damit auf sich hat und wie du deine Verkaufszahlen durch digitales Nudging um rund 12 % erhöhen kannst, dann schaue dir hier die Folge in voller Länge an.

Blog 11.12.23
Blog 11.12.23

Digitalisierung beginnt mit veränderter Denkweise

In dieser insights!-Folge gibt Karl-Heinz Land Einblicke in Themen wie die Vorstellung seines Buches “Erde 5.0”, die Angst der Menschen vor Neuem, die Unterschiede zwischen den Deutschen und den Amerikanern in Bezug auf Technologie sowie die positiven Veränderungen durch KI.

Blog 07.12.23
Blog 07.12.23

Shopwares Vision für die digitale Zukunft des E-Commerce

Im Gespräch mit mir erzählt dir Sebastian Hamann, CEO von Shopware, wie KI und innovative Technologien den E-Commerce transformieren können und wie Shopware den Markt für mittelständische Unternehmen mit Lösungen, die wirklich etwas bewegen, aufmischt. Sebastian verrät dir zudem, warum kundenzentrierter Markenaufbau und mutige Entscheidungen das A und O für zukünftigen, digitalen Erfolg sind.

Blog 30.11.23
Blog 30.11.23

HighTouch und HighTech: CoreMedia für optimierte CX

In der neuen insights!-Folge diskutiere ich mit Sören Stamer, CEO von CoreMedia, über Themen, wie Customer Experience, Content-Produktion, persönliche Assistenten sowie die Herausforderungen der Interaktion mit KI. Du erfährst mehr über die wichtige Rolle von "High Touch" und "High Tech" in der Customer Experience und warum der menschliche Touch auch in Zeiten fortschreitender KI-Entwicklungen unersetzlich bleibt.

Blog 17.11.23
Blog 17.11.23

Wie Kölner Stadtanzeiger Medien 80% CTR Boost mit KI erzielt

Heute zu Gast: Robert Zilz, Head of Data vom Kölner Stadtanzeiger Medien. In dieser insights!-Folge gewährt Robert Einblicke wie ein traditionelles Verlagshaus erfolgreich den Wandel zur datengetriebenen Zukunft vollzieht und dabei den Mehrwert von KI im Journalismus realisiert. Dies ist nicht nur ein inspirierendes Beispiel für die Branche, sondern auch ein Zeichen dafür, wie Innovation und Anpassungsfähigkeit den Journalismus vorantreiben können.

Blog 02.11.23
Blog 02.11.23

Intergastro: E-Commerce und Kundenzentrierung für B2B-Erfolg

Stefan Plate, Gründer von "INTERGASTRO", einem führenden Anbieter von Gastronomiebedarf, diskutiert mit Joubin Rahimi über die Entstehung und Entwicklung seines Unternehmens seit dem Jahr 2000. INTERGASTRO hat sich erfolgreich etabliert und beliefert Kunden in ganz Deutschland mit Non-Food-Artikeln für die Gastronomie. Stefan Plate hebt hervor, wie sein Unternehmen auch in unsicheren Zeiten, wie während der Corona-Krise, anpassungsfähig blieb und weiterhin Erfolg verzeichnen konnte.

Blog 10.11.23
Blog 10.11.23

Internen Traffic mit IPv6 Adressen ausschließen

Die Digitalisierung schreitet unaufhörlich voran und mit ihr die Weiterentwicklung von Netzwerktechnologien. IPv6-Adressen gewinnen immer mehr an Bedeutung, da der Adressraum von IPv4 langsam erschöpft ist. Doch wie passt dies in die Welt von Google Analytics 4, das primär für IPv4 konzipiert wurde? Die Verwendung von IPv6 in GA4 birgt sowohl Chancen als auch Herausforderungen. In diesem Blogbeitrag beleuchten wir, wie man IPv6-Adressen in GA4 nutzt, um internen Traffic zu filtern und gehen auf die Hürden ein, die sich durch die Fokussierung von GA4 auf IPv4 ergeben.

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.

Jetzt Blog abonnieren und keine News mehr verpassen

✔️kostenlos ✔️jede Woche News ✔️Expertenwissen