webentwicklung-frage-antwort-db.com.de

ReactJS serverseitige Wiedergabe vs. clientseitige Wiedergabe

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

Wenn wir es zusammen verwenden können, wie sollen wir es tun? Müssen wir die gleichen Elemente auf der Serverseite und auf 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 zu der Serverseite besteht, die bereits vorab gerendert wurde?

87
Simcha

Für eine bestimmte Website/Web-Anwendung können Sie entweder clientseitige, serverseitige oder both als Antwort verwenden.

Client-Seite

Hier laufen Sie komplett mit ReactJS im Browser. Dies ist das einfachste Setup und enthält die meisten Beispiele (einschließlich der auf http://reactjs.org ). Der anfängliche vom Server gerenderte HTML-Code ist ein Platzhalter, und die gesamte Benutzeroberfläche wird im Browser angezeigt, sobald alle Skripts geladen sind.

Server-Seite

Stellen Sie sich ReactJS als eine serverseitige Template-Engine vor (wie Jade, Lenker usw.). Der vom Server gerenderte HTML-Code enthält die Benutzeroberfläche, wie sie sein sollte, und Sie warten nicht, bis Skripts geladen werden. Ihre Seite kann von einer Suchmaschine indiziert werden (wenn keine Javascript ausgeführt wird).

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

Beide

Hier befindet sich das erste Rendering auf dem Server. Daher hat der vom Browser empfangene HTML-Code die Benutzeroberfläche, wie sie sein sollte. Nach dem Laden der Skripts wird das virtuelle DOM erneut gerendert, um die Ereignisbehandlungsroutinen Ihrer Komponenten einzurichten.

Hier müssen Sie sicherstellen, dass Sie dasselbe virtuelle DOM (Root-ReactJS-Komponente) mit derselben props erneut rendern, die Sie auf dem Server verwendet haben. Andernfalls beklagt ReactJS, dass die virtuellen DOMs auf der Serverseite und auf der Clientseite nicht übereinstimmen.

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

88

Bildquelle: Walmart Labs Engineering Blog

 SSR

 CSR

NB: SSR (serverseitige Wiedergabe), CSR (clientseitige Wiedergabe).

Der Hauptunterschied besteht darin, dass bei SSR die Server auf den Clientbrowser antworten und den HTML-Code der zu rendernden Seite enthalten .. .. Es ist auch wichtig zu beachten, dass bei SSR die Seite zwar schneller dargestellt wird. Die Seite ist erst dann für Benutzerinteraktionen bereit, wenn JS-Dateien heruntergeladen wurden und der Browser React ausgeführt hat.

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

26
JSON C11

Ich habe mich tatsächlich gefragt, ob es sich bei der Recherche um einiges handelt, und die Antwort, die Sie suchen, wurde zwar in den Kommentaren angegeben, aber ich denke, es sollte auffallender sein. Deswegen schreibe ich diesen Beitrag (den ich aktualisieren werde, sobald ich einen Kommentar habe besser, da ich die Lösung zumindest architektonisch fragwürdig finde).

Sie müssten Ihre Komponenten mit in beide Richtungen schreiben. Damit würden Sie if-Schalter grundsätzlich überall einsetzen, 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 Kunden zur Verfügung stellen.

Wieder glücklich über eine sauberere Lösung.

3
SGD

Gibt es zwei 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 soll das gemacht werden? Müssen wir die .__ duplizieren? gleiche Elemente auf der Serverseite und auf der Clientseite? Oder können wir nur Erstellen Sie die statischen Teile unserer Anwendung auf dem Server und die dynamische Teile auf der Clientseite, ohne Verbindung zum Server Seite, die bereits vorgerendert wurde?

Es ist besser, dass das gleiche Layout gerendert wird, um Umfließen und Neuformulieren zu vermeiden, weniger Flimmern/Blinzeln und Ihre Seite wird glatter. Dies ist jedoch keine Einschränkung. Sie können die SSR-HTML-Datei sehr gut zwischenspeichern (etwas Electrode , um die Antwortzeit zu verkürzen)/eine statische HTML-Datei senden, die von der CSR (clientseitiges Rendern) überschrieben wird.

Wenn Sie gerade erst mit SSR beginnen, würde ich empfehlen, einfach zu starten. SSR kann sehr schnell sehr komplex werden. HTML auf dem Server zu erstellen bedeutet, den Zugriff auf Objekte wie window, document (Sie haben diese auf dem Client), den Verlust von asynchronen Vorgängen ("out of the box") und generell viele Code-Bearbeitungen zu verlieren, um Ihren Code SSR-kompatibel zu machen ( da Sie Webpack verwenden müssen, um Ihre bundle.js zu packen). Dinge wie CSS-Importe erfordern, dass der Import plötzlich anfängt, Sie zu beißen (dies ist bei 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 an Leute, die mit SSR beginnen, würden statische HTML-Dateien ausgeben. Sie können die statische HTML-Datei 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 Ladungen (ich würde das abrechnen)

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

0
Kira