JavaScript: Next.js 10 zielt auf das dynamische Laden von Bildern bei Bedarf

Das Framework für serverseitig gerenderte React-Anwendungen kommt mit weniger JavaScript aus und lädt Bilder auf Webseiten dynamisch auf Anfrage.

In Pocket speichern vorlesen Druckansicht 5 Kommentare lesen
Lesezeit: 4 Min.
Von
  • Silke Hahn
Inhaltsverzeichnis

Die Entwickler von Next.js haben Version 10 des Frameworks zum Erstellen serverseitiger Anwendungen mit React veröffentlicht. Eine wichtige Neuerung ist die "lazy" Ladefunktion von Bildern im Web, bei der HTML-Elemente im Markup mit dem Tag <img> automatisch durch next/image ersetzt werden.

Beim Verwenden der next/image-Komponente lädt der Browser die Bilder im "lazy"-Modus: Das bedeutet, er rendert sie bedarfsorientiert nur, sobald Nutzer in die Nähe der Stelle navigieren, die den Bildaufbau erfordert. Normalerweise werden sonst alle Bilder beim Aufbau einer Internetseite automatisch geladen, was bei dem meist hohen Anteil von Bildern an der Datenmenge viel unnötigen Traffic verursacht und Ressourcen belegt. Die "lazy"-Funktion beim Laden spart laut Blogeintrag von Next.js automatisch rund ein Drittel der zu ladenden Datenmenge von Bildern ein und soll dadurch den Ladevorgang von Webseiten beschleunigen.

Der größte Unterschied zur bisherigen Praxis dürfte das Laden nach Bedarf sein, bei dem der Bildaufbau samt -optimierung – anders als bei statischen Generatoren – erst beim Nutzeraufruf greift. Das dynamische Konzept benötigt laut Anbieter daher stets die gleiche Zeit zum Aufbau einer Webseite, unabhängig davon, ob diese zehn Bilder oder zehn Millionen Bilder umfasst. Mit dem neuen Release des Frameworks können Entwickler Bilder markieren, die Next.js eingangs beim Viewport automatisch berücksichtigen und im Voraus laden soll. Durch das gezielte Konfigurieren lässt sich laut Blogeintrag die Datenlast der Bilder beim Laden um die Hälfte reduzieren. Die Next.js-Image-Komponente greift laut Beschreibung automatisch auf die im Markup angegebene Breite und Höhe der Bilder zu und berechnet deren Verhältnis, was bei einigen Layouts die Performance erhöhen soll.

Das Feature soll auch für das Darstellen von Webseiten-Bildern auf mobilen Endgeräten Verbesserungen bringen, da die neue Komponente next/image durch eine eingebaute Bildoptimierung Bilder automatisch in kleineren Größen erzeugen kann und sie zum Beispiel von JPEG in andere Formate wie WebP konvertiert, die von Haus aus um ein Drittel kompakter sind. Die Einschränkung dabei ist, dass der verwendete Browser das unterstützen muss. Bei entsprechender Unterstützung seitens Browser soll Next.js auch in der Lage sein, zukünftige Bildformate beim automatischen Konvertieren zu berücksichtigen.

Eine Reihe anderer, wichtiger Änderungen sind im Major-Release enthalten. So unterstützt Next.js 10 Version 17 von React und aktiviert dafür automatisch einen neuen JSX-Transformationsmodus. Um das neue Release der JavaScript-Bibliothek zu unterstützen, genügt die Aktualisierung des verwendeten Next.js-Framerworks mit dem Befehl npm install next@latest react@latest react-dom@latest. Next.js 10 erweitert die Analyse-Tools um kontinuierlich erfasste Metrik von den benutzten Endgeräten, erkennt die Sprache besuchter Webseiten automatisch und ergänzt die Sprachattribute zum HTML-Tag. Ein weiterer Schwerpunkt liegt auf der Internationalisierung des Routings, wobei auch die automatische Übersetzung von Inhalten in die Muttersprache der Nutzer eine Rolle spielt. Entwickler können Gebietsschemata in der Next.js-Konfiguration bearbeiten, hier zum Beispiel für Englisch und Niederländisch:

// next.config.js
module.exports = {
i18n: {
locales: ['en', 'nl'],
defaultLocale: 'en'
}
}

Im Anschluss an diese Konfiguration lassen sich Subpfad- und Domain-Routing entsprechend einstellen.

In vergangenen Releases lag der Schwerpunkt auf anderen Themen wie dem Serverless Computing. Weiterführende Hinweise zu den Neuerungen des aktuellen Release lassen sich dem Blogeintrag von Next.js entnehmen.

(sih)