Die Performanz Ihres Online-Produktes wird mit einer eigenen Kategorie definiert – technisches SEO. Wenn Sie sich um die bestmöglichen Ergebnisse Ihrer Online-Präsenz kümmern, einschließlich der Google-Rankings und wenn Sie ebenfalls React verwenden, dann wird Ihnen dieser Artikel helfen, die Unterschiede zwischen einfachem React und Next.js, einer auf React basierenden Server-Side Rendering-Lösung, zu verstehen.
In den letzten zehn Jahren hat der technologische Fortschritt gezeigt, wie leistungsfähig Webentwicklungs-Frameworks für Einzelpersonen und Unternehmen sein können, unabhängig von ihren Ambitionen und Zielen. Wenn wir uns den Fortschritt und die schiere Leistungsfähigkeit des Frontends ansehen, verlässt sich heute jeder auf mindestens eine allgemein verwendete und akzeptierte Programmbibliothek oder ein Framework und als "Leader" dieser speziellen Kategorie bietet React.js eine erstaunliche Anzahl von Lösungen die dabei helfen ein kleines Lieblingsprojekt in ein Online-Unternehmen zu verwandeln.
Daraus ergibt sich, dass für Entwicklerteams (oder zumindest für eine Einzelperson wie Sie, die diesen Text liest), die den SEO Aspekt (Suchmaschinenoptimierung) mit dem eigentlichen Produkt verbinden möchten, mit Hinblick auf den Code, keine externen Online-Tools (außer den NPM-Paketen, die Sie auf Ihrer React-Anwendung installieren würden) erforderlich sind, um einen Einfluss auf die Google-Rankings zu haben. Dies wollen wir durch einen groben Vergleich hervorheben - denn einfaches React wird auf der Client-Seite gerendert, während Next.js Ihnen helfen kann, bessere Ergebnisse zu erzielen (TL; DR die endgültige Ausgabe wird auf dem Server kompiliert und gerendert und ist für Suchmaschinen-Indexer mühelos verfügbar). Wir bei SABO verwenden beide Ansätze, je nach den Anforderungen des Kunden (einige Projekte erfordern ganz konkret eine React-App mit serverseitigen Rendering-Funktionen. Für andere Kundenprojekte reicht es aus, dass die App auf der Client-Seite gerendert wird). Daher hoffen wir, dass Sie ganz unvoreingenommen Spaß an der Lektüre haben.
Als die Kernbibliothek entwickelt wurde, hatte das React Team nicht die Absicht, sich auf irgendwelche SEO-Funktionen zu konzentrieren. Im Vordergrund stand eine performante und zuverlässige Frontend-Bibliothek, die sich ideal für Single-Page-Applikationen (SPA) eignet. Und dieses Versprechen wurde eingehalten, was durch den enormen Anstieg der Popularität nur noch verstärkt wurde. Es verging nicht viel Zeit, bis eine Fülle von NPM-Paketen (Node PackageManager) veröffentlicht wurde, um den Versuch zu unterstützen, React zu einer brauchbaren Wahl für SEO-orientierte Unternehmen zu machen – React Helmet (dessen erste Version bereits im Juni 2015 veröffentlicht wurde) und React Router (1.0, veröffentlich im November desselben Jahres) sind zwei der populärsten, und wir sind sicher, dass Sie mit beiden vertraut sind. Ein NPM-Paket bot die Möglichkeit, beliebige Meta-Tags (wichtig für SEO und soziale Netzwerke) in Ihre React-Anwendung zu injizieren, und das andere die Möglichkeit, ein Routing vorzutäuschen, so dass Ihre React-Anwendung sich nicht als echte Single-Page-Anwendung entpuppte (mit lediglich der index.html des Stammverzeichnisses).
Ein weiterer sehr wichtiger Leistungsaspekt den Sie untersuchen sollten, ist „Lazy Loading“ von Bildern. Sie haben dies wahrscheinlich schon bei einigen Websites bemerkt - wenn eine Website geladen wird, sehen Sie nichts vom Inhalt, bis alles geladen ist, einschließlich eines riesigen, 3 Megabyte großen Titelbildes oder einesVideos. HTML unterstützt nun von Haus aus die Eigenschaft "LazyLoading", aber da dies erst vor kurzem eingeführt wurde, haben sich Bildoptimierer und programmatische Lader erheblich weiterentwickelt. Sie sind auch in React durch externe Pakete verfügbar, die auf die Bewegung des Scrollers im Browserfenster reagieren. Das ist ein kleiner Nachteil, da es nicht nativ zur Verfügung gestellt wird.
Um das Thema besser zu verstehen, sollten wir uns anschauen, was technisches SEO ist und wie Sie Ihr Projekt anhand einiger der vordefinierten Schlüsselmetriken testen können. Technische SEO ist ein Konzept zum Aufbau und zur Bereitstellung einer schnellen und stabilen Erfahrung im Web nicht nur für die Crawler der Suchmaschinen, sondern auch für die Endnutzer, und das schließt nicht denInhalt ein, für den Sie zusätzliche Anstrengungen unternehmen müssen. Er ist genauso wichtig wie die klassische Suchmaschinenoptimierung, hat aber ganz andere Ziele.
Die grundlegendsten Punkte, die Sie abdecken müssen, wenn Sie eine solide Webanwendung in Bezug auf ihre technische Optimierung wünschen, sind die folgenden:
- Geschwindigkeit der Website
- Ein mobilfreundliches Erlebnis und Layout
- Optimale Indizierung
- Leichte Crawlbarkeit
Wenn Sie sich nicht sicher sind, wie Sie an Daten kommen, mit denen Sie diese Bereiche oder die technische SEO im Allgemeinen verbessern können, sollten Sie sich Lighthouse ansehen, ein kostenloses Browser-Plugin vonGoogle, das jede beliebige Website anhand einer Reihe genau festgelegter Kriterien testet, auf die wir hier nicht näher eingehen werden.
Die Schlussfolgerung ist ganz einfach: Wie auch immer man es betrachtet, einfaches React ist für Seiten mit sich häufig ändernden Daten einfach nicht geeignet oder gar gedacht. Daher wurde das Vorrendering der Daten der endgültigen Webanwendung für einige zu einer Notwendigkeit, und so entstand das serverseitige Rendering.
Next.js erfreut sich zunehmender Beliebtheit, wenn es darum geht, ein serverseitiges Rendering-Framework bereitzustellen und dabei React treu zu bleiben - Next.js ist das heißeste Ding überhaupt! Dieses fantastische Framework bietet Funktionen zum Erstellen und Ausliefern einer unglaublich flexiblen und dennoch statisch gerendert en Webanwendung - und das sofort! Eingebautes Routing, eingebaute Unterstützung für das Einfügen von Meta-Tags, externen CSS-Dateien und Skripten im Header Bereich, genau wie React Helmet, aber "nativ", Lazy Loading Images und viele andere Funktionen sind alle enthalten, sobald Sie ein Next.js-Projekt erstellen. Hulu, AT&T, Nike und IGN sind nur einige der Unternehmen, die sich darauf verlassen, und wann immer unsere Entwickler bei SABO die Gelegenheit bekommen, an einem Next.js-Projekt zu arbeiten, nehmen wir diese sehr gerne an!
Das Konzept des serverseitigen Renderings gibt es schon sehr lange, und die Funktionsweise von Next.js ist ganz einfach: Für jede Seite (Route), die Sie in Ihrem Projekt erstellen, legt der Compiler einen Ordner an, und der gesamte kompilierte Code, der für diese Seite relevant ist, befindet sich nur in diesem Ordner. Das ist genau die Art und Weise, wie Suchmaschinen-Crawler arbeiten, und wenn das endgültige Output ordentlich organisiert ist (was es ist), haben die Rankings jeder Seite eine viel höhere Chance, ein hohes Ranking in jeder Suchmaschine zu erreichen.
Wenn Sie ein Next.js Projekt erstellen, können Sie nicht nur die Metadaten für Ihr gesamtes Projekt festlegen (was übrigens auch mit React möglich ist), sondern auch für jede einzelne Seite, so dass Ihre Inhaltsstrategie (Erwartung) perfekt mit der Codebasis (Ergebnis) übereinstimmt. Wenn Sie dies in ein Projekt integrieren, das den Code auf dem Server kompiliert und aufteilt, wo Suchmaschinen-Crawler den Inhalt des Projekts untersuchen, um jede Seite angemessen zu ranken, erhalten Sie in Bezug auf SEO das bestmögliche Ergebnis und von diesem Zeitpunkt an sollte Ihr Fokus nur noch auf der Feinabstimmung der Leistungsindikatoren liegen (indem Sie beispielsweise mehr Lazy Loading einführen).
React mit Next.js ist genau das Richtige für Sie, wenn Sie oder Ihr Unternehmen sich um technische SEO kümmern oder eine seriöse Online-Präsenz anstreben. Obwohl das serverseitige Rendering der größte Vorteil von Next.js speziell für SEO ist, sollten Sie nie eine einfache React-Anwendung verwerfen, einfach weil Sie manchmal kein Produkt erstellen und ausliefern müssen, bei dem technisches SEO ganz oben auf der Prioritätenliste steht.
