Pierwotnie, gdy aplikacje jednostronicowe nie były rzeczą, każda strona była innym kodem HTML zwracanym z odpowiedzi na wywołanie HTTP. Albo statyczny plik treści, albo przetwarzając odpowiedź za pomocą języków po stronie serwera (takich jak PHP, Python lub Java) i odpowiadając w bardziej dynamiczny sposób.

SPA pozwoliły nam dostarczyć responsywne witryny, które działają znacznie szybciej niż standardowy model żądanie-odpowiedź, usuwając „czas podróży żądania”.

Typowa odpowiedź serwera podczas uzyskiwania dostępu do witryny React wyglądałaby mniej więcej tak:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>My React app</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/app.js"></script>
  </body>
</html>

Dlaczego to jest problemem?

• Powolne połączenie internetowe może nie ładować app.jssię wystarczająco szybko, aby zapewnić dobre wrażenia użytkownika
• Powolne urządzenia, takie jak starsze smartfony, mogą nie mieć najszybszych czasów ładowania kodu javascript
• Wyszukiwarki i sieci społecznościowe mogą nie rozpoznać i znaleźć treści Twojej witryny, ponieważ jest ona ładowana po stronie klienta

1. Statyczne strony kluczowe

Jeśli masz witrynę, na której Twoi użytkownicy mogą się logować i nie mają dostępu do treści niepodpisanych, możesz zdecydować się na utworzenie publicznych witryn (takich jak indeks, „o nas”, „skontaktuj się z nami” itp.) jako statyczne strony HTML , i nie zlecaj ich renderowania przez JS.

Ponieważ Twoje treści są ograniczone wymaganiami dotyczącymi logowania, nie będą indeksowane przez wyszukiwarki ani udostępniane w mediach społecznościowych.

2. Wygeneruj części swojej aplikacji jako strony HTML podczas uruchamiania procesu budowania

Biblioteki, takie jak React-Snapshot, mogą być używane do generowania kopii HTML stron aplikacji i zapisywania ich w określonym folderze. Folder można następnie wdrożyć wraz z innymi zasobami. W ten sposób kod HTML będzie serwowany wraz z odpowiedzią, dzięki czemu Twoja witryna będzie dostępna dla użytkowników z wyłączoną obsługą JavaScript, wyszukiwarek, sieci społecznościowych itp.

W większości przypadków konfiguracja migawki reakcji jest tak prosta, jak zainstalowanie zależności w projekcie i utworzenie nowego skryptu:

"build": "webpack && react-snapshot --build-dir static"

3. Utwórz aplikację renderowaną po stronie serwera w JS

Jednym z atrakcyjnych aspektów nowej generacji aplikacji internetowych javascript jest to, że mogą one być uruchamiane zarówno na kliencie (przeglądarce), jak i na serwerze — pozwala nam to generować kod HTML dla stron, które są bardziej dynamiczne — których zawartość nie jest znana podczas budowania czas. Jest to często określane jako zastosowanie „izomorficzne” lub „uniwersalne”.

Dwa najpopularniejsze rozwiązania zapewniające SSR dla Reacta to:

• next.js —https://github.com/zeit/next.js/
• Gatsby —https://github.com/gatsbyjs/gatsby

Będziesz musiał mieć możliwość uruchomienia backendu węzła dla swojego serwera . Nie możesz wdrożyć tego rozwiązania na statycznym hoście, takim jak strony github.

Pierwszym krokiem, jaki zrobimy, jest stworzenie aplikacji, tak jak w przypadku każdej innej aplikacji React.

Najpierw musimy dodać trzy pakiety:

yarn add express babel-node pug --save-dev

• babel-node to wrapper dla węzła, który umożliwia mu transpilację kodu w locie
• mops to silnik szablonów, którego możemy używać z ekspresem.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="root">!{app}</div>
    <script src="bundle.js"></script>
  </body>
</html>

Nasz serwer będzie wyglądał tak

import React from 'react';
import { renderToString } from 'react-dom/server';
import express from 'express';
import path from 'path';
import App from './src/App';
const app = express();
app.set('view engine', 'pug');
app.use('/', express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
  const html = renderToString(
    <App />
  );
  res.render(path.join(__dirname, 'src/index.pug'), {
    app: html
  });
});
app.listen(3000, () => console.log('listening on port 3000'));

import { renderToString } from 'react-dom/server';

const app = express();
app.set('view engine', 'pug');
app.use('/', express.static(path.join(__dirname, 'dist')));

Następnie nakazujemy express, aby wyszukał plik w distfolderze i jeśli żądanie (np. /bundle.js) pasuje do pliku znajdującego się w tym folderze, odpowiedz nim.

app.get('*', (req, res) => {});

const html = renderToString(
  <App />
);

res.render(path.join(__dirname, 'src/index.pug'), {
  app: html
});

app.listen(3000, () => console.log('listening on port 3000'));

Pozostało tylko dodać odpowiedni skrypt do package.json:

"scripts": {
  "server": "babel-node server.js"
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="root">div data-reactroot="">
      Contents of App.js
     </div>
    <script src="bundle.js"></script>
  </body>
</html>

Chociaż SSR wygląda głównie prosto, musisz uważać na niektóre tematy, które początkowo mogą nie być jasne:

• Cykle życia komponentów React nie są wywoływane na serwerze ( componentDidMount)oznacza to, że pobrane dane, które renderujesz w czasie wykonywania, nie będą SSR; to generalnie dobra rzecz, ponieważ powinieneś dostarczać dane jako props, jeśli ich potrzebujesz. Pamiętaj, że musisz opóźnić renderowanie (wywołanie res.render) do momentu pobrania danych, co może spowodować pewne opóźnienie dla odwiedzających
• żaden stan wygenerowany po stronie serwera nie zostanie przekazany do stanu aplikacji klienckiej; oznacza to, że jeśli Twój backend pobierze jakieś dane i użyje ich do renderowania HTML, nie zostaną one umieszczone w tym this.state, który widzi przeglądarka
• jeśli używasz routera reakcji, musisz upewnić się, że właściwy adres URL jest przekazywany do aplikacji podczas renderowania na serwerze.