ReactJS serverseitiges Rendering vs. clientseitiges Rendering

Ich habe gerade begonnen, ReactJS zu studieren und festgestellt, dass es Ihnen zwei Möglichkeiten gibt, Seiten zu rendern: serverseitig und clientseitig. Aber ich kann nicht verstehen, wie man es zusammen verwendet. Handelt es sich um zwei getrennte Möglichkeiten, die Anwendung zu erstellen, oder können sie zusammen verwendet werden?

Wenn wir es zusammen verwenden können, wie geht das – müssen wir die gleichen Elemente auf der Server- und der Clientseite duplizieren? Oder können wir einfach die statischen Teile unserer Anwendung auf dem Server und die dynamischen Teile auf der Clientseite erstellen, ohne dass eine Verbindung zur bereits vorgerenderten Serverseite besteht?

Für eine bestimmte Website / Webanwendung können Sie auch React verwenden clientseitig, serverseitig oder beide.

Clientseitig

Hier führen Sie ReactJS vollständig im Browser aus. Dies ist die einfachste Einrichtung und enthält die meisten Beispiele (einschließlich der auf http://reactjs.org). Der anfänglich vom Server gerenderte HTML-Code ist ein Platzhalter, und die gesamte Benutzeroberfläche wird im Browser gerendert, sobald alle Ihre Skripts geladen sind.

Serverseitig

Stellen Sie sich ReactJS hier als serverseitige Templating-Engine vor (wie Jade, Handlebars usw.). Das vom Server gerenderte HTML enthält die Benutzeroberfläche so, wie sie sein sollte, und Sie warten nicht auf das Laden von Skripts. Ihre Seite kann von einer Suchmaschine indexiert werden (wenn man kein Javascript ausführt).

Da die Benutzeroberfläche auf dem Server gerendert wird, würde keiner Ihrer Ereignishandler funktionieren und es gibt keine Interaktivität (Sie haben eine statische Seite).

Beide

Hier befindet sich das anfängliche Rendern auf dem Server. Daher hat das vom Browser empfangene HTML die Benutzeroberfläche, wie sie sein sollte. Sobald die Skripte geladen sind, wird das virtuelle DOM erneut gerendert, um die Ereignishandler Ihrer Komponenten einzurichten.

Hier müssen Sie sicherstellen, dass Sie genau dasselbe virtuelle DOM (Root-ReactJS-Komponente) mit demselben erneut rendern props die Sie früher auf dem Server gerendert haben. Andernfalls beschwert sich ReactJS, dass die serverseitigen und clientseitigen virtuellen DOMs nicht übereinstimmen.

Da ReactJS die virtuellen DOMs zwischen Re-Renderings unterscheidet, wird das echte DOM nicht mutiert. Nur die Event-Handler sind an die echten DOM-Elemente gebunden.

Bildquelle: Walmart Labs Engineering-Blog

Hinweis: SSR (Serverseitiges Rendern), CSR (Clientseitiges Rendern).

Der Hauptunterschied besteht darin, dass bei SSR die Antwort des Servers an den Browser des Clients den HTML-Code der Seite enthält, die gerendert werden soll. Es ist auch wichtig zu beachten, dass die Seite mit SSR zwar schneller gerendert wird. Die Seite ist nicht für Benutzerinteraktionen bereit, bis JS-Dateien heruntergeladen wurden und der Browser React ausgeführt hat.

Ein Nachteil ist, dass die SSR TTFB (Time to First Byte) etwas länger sein kann. Verständlicherweise, da der Server einige Zeit benötigt, um das HTML-Dokument zu erstellen, was wiederum die Antwortgröße des Servers erhöht.

Ich habe mich tatsächlich ziemlich gefragt, wie ich recherchiert habe, und obwohl die Antwort, nach der Sie suchen, in den Kommentaren gegeben wurde, denke ich, dass sie prominenter sein sollte, daher schreibe ich diesen Beitrag (den ich aktualisieren werde, sobald mir eine Antwort einfällt besser weg, da ich die Lösung architektonisch zumindest fragwürdig finde).

Sie müssten Ihre Komponenten mit schreiben beide Wege im Auge also grundsätzlich setzen if Schalter überall, um festzustellen, ob Sie sich auf dem Client oder dem Server befinden, und dann entweder als DB-Abfrage (oder was auch immer auf dem Server geeignet ist) oder als REST-Aufruf (auf dem Client). Dann müssten Sie Endpunkte schreiben, die Ihre Daten generieren und sie dem Client zur Verfügung stellen, und los geht’s.

Auch hier freue ich mich, etwas über eine sauberere Lösung zu erfahren.

Handelt es sich um zwei getrennte Möglichkeiten, die Anwendung zu erstellen, oder können sie zusammen verwendet werden?

Sie können zusammen verwendet werden.

Wenn wir es zusammen verwenden können, wie geht das – müssen wir die gleichen Elemente auf der Server- und der Clientseite duplizieren? Oder können wir einfach die statischen Teile unserer Anwendung auf dem Server und die dynamischen Teile auf der Clientseite erstellen, ohne dass eine Verbindung zur bereits vorgerenderten Serverseite besteht?

Es ist besser, das gleiche Layout zu rendern, um Reflow- und Repaint-Vorgänge zu vermeiden, weniger Flimmern / Blinken, Ihre Seite wird glatter. Es ist jedoch keine Einschränkung. Sie könnten den SSR-HTML-Code sehr gut zwischenspeichern (etwas Elektrode reduziert die Antwortzeit) / sende eine statische HTML, die von der CSR überschrieben wird (clientseitiges Rendern).

Wenn Sie gerade erst mit SSR beginnen, würde ich empfehlen, einfach zu beginnen, da SSR sehr schnell sehr komplex werden kann. HTML auf dem Server zu erstellen bedeutet, den Zugriff auf Objekte wie window, document (Sie haben diese auf dem Client) zu verlieren, die Fähigkeit zu verlieren, asynchrone Operationen (out of the box) zu integrieren, und im Allgemeinen viele Codebearbeitungen, um Ihren Code SSR-kompatibel zu machen ( da Sie webpack verwenden müssen, um Ihre bundle.js zu packen). Dinge wie CSS-Importe, require vs import fangen plötzlich an, Sie zu beißen (dies ist in der Standard-React-App ohne Webpack nicht der Fall).

Das allgemeine Muster von SSR sieht so aus. Ein Express-Server, der Anfragen bedient:

const app = Express();
const port = 8092;

// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
    const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
    console.log('fullUrl: ', fullUrl);
    console.log('req.url: ', req.url);

    // Create a new Redux store instance
    const store = createStore(reducerFn);

    const urlToRender = req.url;
    // Render the component to a string
    const html = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={{}}>
                {routes}
            </StaticRouter>
        </Provider>
    );
    const helmet = Helmet.renderStatic();

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(helmet, html, preloadedState));
}

Mein Vorschlag für Leute, die mit SSR anfangen, wäre, statisches HTML bereitzustellen. Sie können das statische HTML abrufen, indem Sie die CSR SPA-App ausführen:

document.getElementById('root').innerHTML

Vergessen Sie nicht, die einzigen Gründe für die Verwendung von SSR sollten sein:

1. SEO
2. Schnellere Ladevorgänge (ich würde dies rabattieren)

Hacken: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc