Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

ReactJS lernen

Anwendungen serverseitig rendern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch Reacts virtuelles DOM ist das serverseitige Rendern von Anwendungen kein Problem. Lernen Sie in diesem Video die zugrundeliegenden Prinzipien kennen.
02:34

Transkript

Das virtuelle DOM, das ohnehin zur Erhöhung der Performance beim Updaten beziehungsweise Rendern benötigt wird, ist nicht ausschließlich für diesen Zweck einsetzbar. So kann das virtuelle DOM auch auf der Server-Seite eingesetzt werden, was das Rendern auf dem Server ermöglicht. Wenn Sie sich nun fragen, warum man das tun sollte, nachdem man eine performante und dynamische Anwendung im Browser möchte, so ist beispielsweise die Performance beim initialen Rendern zu nennen. Wenn nämlich das gesamte HTML-Markup per JavaScript erst am Client zusammengestellt wird, ist das meist weniger performant, als das initiale Rendern durchzuführen und beim Erhalt der HTML-Seite bereits eine fertige Seite zu erhalten. Zudem könnte es bei Client-seitigem Rendern je nach Komplexität der React-Anwendung sein, dass für kurze Zeit die leere HTML-Seite angezeigt wird, bis das HTML-Markup aus dem JavaScript erzeugt wurde. Des Weiteren kann eine Seite, die bereits auf dem Server gerendert worden war, gecached werden und beispielsweise per CDN ausgeliefert werden. Ein weiterer Pluspunkt des Server-seitigen Renderns liegt in der Suchmaschinenoptimierung, kurz SEO. Suchmaschinen können Seiten, die erst per JavaScript im Client gerendert werden, nicht richtig parsen, was bei Server-seitig gerendertem HTML kein Problem darstellt. Für das Server-seitige Rendern ist ReactDOMServer zuständig. Mit der Methode renderToString() können Sie ein React-Element initial rendern und den resultierenden String an die korrekte Stelle im HTML einsetzen. Bitte beachten Sie dabei, dass beim Client zwar das initiale HTML ankommen wird, etwaige Event-Handler jedoch nicht vorhanden sein werden. Dazu muss auch weiterhin auf der Client-Seite die React-App geladen werden. Diese wird jedoch beim initialen Rendern auf Client-Seite erkennen, dass die DOM-Elemente bereits im Server vorhanden sind, und die Elemente entsprechend nicht neu rendern, was sich positiv auf die Performance auswirkt. Statische Inhalte können Sie mit der Methode renderToStaticMarkup auf dem Server rendern und in Ihre HTML-Datei einfügen. Das auf diese Weise generierte HTML können Sie beispielsweise zusätzlich mit einer Template-Engine befüllen. In diesem Video haben Sie gelernt, dass das virtuelle DOM in React auch für Render-Prozesse auf Server-Seite verwendet werden kann. Sie wissen nun, dass Sie Server-Side Rendering nutzen können, um die Performance beim initialen Laden der Seite zu ehöhen, Suchmaschinenoptimierung für Ihre Seite zu ermöglichen, oder aber Caching der Seite beziehungsweise Auslieferung per CDN zu ermöglichen.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!