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

Die Innovationskraft hinter modernem E-Commerce

In dieser "Insights"-Folge spreche ich mit André Menegazzi von commercetools über die bedeutenden Merkmale von commercetools. Er hebt die Notwendigkeit von Flexibilität und einen innovativen Ansatz bei bestimmten Use Cases hervor, der es Kunden ermöglicht, zukunftssichere und maßgeschneiderte E-Commerce-Lösungen zu entwickeln.

Blog 19.10.23
Blog 19.10.23

Digital Operation Platform für deine E-Commerce-Optimierung

Actindo, die API- und cloudbasierte Digital Operations Platform (DOP), ist die einzige vollständig ineinandergreifende Lösung, um wertvolle Kundenbeziehungen aufzubauen und gleichzeitig wichtige Geschäftsprozesse zu digitalisieren. In der neuen Insights!-Folge spreche ich mit Sven März, dem Vice President of Sales von Actindo, über ihre Lösung.

Blog 25.07.24
Blog 25.07.24

ROI-Optimierung im Commerce: KI, B2H & Omnichannel-Strategy

In der neuesten Folge von insights! begrüße ich Frank Miller, den CEO der Inbound-Marketingagentur straight. Was folgt, ist ein tiefgehendes Gespräch über Digitalisierung, Marketingstrategien und die Rolle von Künstlicher Intelligenz im modernen Geschäftsleben.

Blog 26.02.24
Blog 26.02.24

Kann der Hosting-Anbieter OVHcloud überzeugen?

Wenn du dich in der Welt des Cloud-Hostings bewegst, ist die Auswahl des richtigen Servers entscheidend für die Leistung, Zuverlässigkeit und Skalierbarkeit deiner Anwendungen. OVHcloud hat kürzlich eine neue Generation von Servern vorgestellt, doch wie gut sind diese wirklich? Um einen möglichst objektiven Vergleich anzustellen, haben wir uns für Geekbench entschieden. Aber was genau ist Geekbench und warum haben wir es für diesen Test gewählt?

Blog 15.02.24
Blog 15.02.24

Erfolg im E-Commerce: UNGER setzt auf digitale Innovation

Im digitalen Zeitalter hat UNGER Fashion eine Vorreiterrolle im Luxusmodemarkt eingenommen. Durch die Integration von KI und einem unübertroffenen Kundenservice hebt sich das Unternehmen deutlich von Marktbegleitern ab. Fabian Haustein, CDO von UNGER Fashion, teilt exklusive Einblicke, wie Personalisierung und Technologie genutzt werden, um einzigartige Einkaufserlebnisse zu schaffen.

Blog 01.08.24
Blog 01.08.24

MarTech Boom, KI, Echtzeit-Datenvernetzung – Buzzword Bingo?

In dieser insights!-Folge bringt dir Till Paschke von HCLSoftware die cloud-native Software-Stacks und den innovativen Ansatz „Integrated Composable Commerce“ nahe. Getrieben von HCLs beeindruckenden Kunden Ferrari, HP oder auch DHL spiegeln ihre digitalen Lösungen die Innovationskraft wider. Der aktuelle Martech-Boom sowie der clevere Einsatz von KI zur Echtzeit-Datenvernetzung sind Fokusthemen der Folge.

Blog 30.07.24
Blog 30.07.24

OVHcloud: Das Schutzschild gegen DDoS-Angriffe

Die Sicherheit von Online-Diensten unerlässlich. Cyber-Angriffe, wie z.B. Distributed Denial of Service (DDoS)-Angriffe, können Unternehmen schwere finanzielle Verluste zufügen und ihren Ruf dauerhaft schädigen. Genau da kommt OVHcloud ins Spiel.

Blog 12.10.23
Blog 12.10.23

Mit exzellentem Kundenservice die Kundenloyalität steigern

In diesem Beitrag befassen wir uns mit der letzten These aus unserer D2C-Studie in Kooperation mit dem ECC Köln. Insgesamt wurden sieben Thesen analysiert und untersucht. Wir untersuchen die These „Mit einer guten Beratung und weiterführenden Services können Hersteller die Kaufhäufigkeit ihrer Kunden erhöhen“.

Blog 11.10.23
Blog 11.10.23

Die Bedrohung im Internet und wie du dich schützen kannst

Im folgenden Blogbeitrag bekommst du eine Übersicht über den Bereich Cyber-Sicherheit. Darüber hinaus informieren wir dich über verschiedene Arten von Bedrohungen und zeigen auf, wie wir dich dabei unterstützen können.

Blog 05.10.23
Blog 05.10.23

So meisterst du die Herausforderungen der Kundenerwartungen

Heute befassen wir uns mit der 6.These unserer D2C-Studie, die wir in Kooperation mit dem ECC Köln veröffentlicht haben. Die Studie fokussierte sich auf den Heim & Garten Sektor und untersuchte insgesamt sieben Thesen in Bezug auf Direktvertrieb. In diesem Beitrag schauen wir uns die These „Konsumenten haben hohe Erwartungen an ihren Onlinekauf bei Herstellern“ genauer an und überprüfen sie auf Gültigkeit.

Blog 04.10.23
Blog 04.10.23

Digitale Sichtbarkeit: Ein MUSS für den Erfolg

Gemeinsam mit dem ECC Köln haben wir eine Studie zu D2C-Strategien im Bereich Heim & Garten durchgeführt. Diese Studie untersuchte sieben Thesen eingehend und lieferte umfassende Einblicke in den D2C-Sektor. In diesem Beitrag konzentrieren wir uns auf die fünfte These: „Die digitale Sichtbarkeit ist entscheidend für den Erfolg des Direktvertriebs, doch auch hier müssen wir nacharbeiten." Hier präsentieren wir konkrete Zahlen und interessante Erkenntnisse aus der Studie.

Blog 04.10.23
Blog 04.10.23

Warum sollte eine Multi Cloud mit der OVHcloud ergänzt werde

Dieser Blogbeitrag beschreibt das Konzept der Multi Cloud im Cloud Computing, bei dem Dienste und Ressourcen von verschiedenen Cloud-Anbietern kombiniert werden. Wir erläutern dir die Vorteile einer Multi-Cloud-Strategie und stellen verschiedene Cloud-Anbieter wie Amazon Web Services, Microsoft Azure, Google Cloud Platform und OVHcloud vor. Im Anschluss zeigen wir dir ein mögliches Szenario für die Integration von OVH-Leistungen in eine bestehende Multi-Cloud-Umgebung, um deine Datensouveränität zu gewährleisten.

Jetzt Blog abonnieren und keine News mehr verpassen

✔️kostenlos ✔️jede Woche News ✔️Expertenwissen