W tym wpisie przedstawię moje doświadczenia z wtyczkami do Reacta o nazwach Snap oraz SnapShot.

Cel użycia wtyczek

Moim celem było dodanie dla strony na domenie wyremski.pl (jest ona postawiona na Reakcie) statycznych plików .html z kodem podstron, aby wyszukiwarki internetowe mogły je łatwiej przeanalizować i aby przyśpieszyć ładowanie podstron u użytkowników.

Do realizacji tego celu jest wiele wtyczek, ja skupiłem się na dwóch: Snap oraz Snapshot, z których tylko jedna spełniła moje oczekiwania.

Ich instalacja jest stosunkowo prosta. Oczywiście nie należy w jednym projekcie instalować obydwóch wtyczek naraz.

Instalacja React Snap

Dla React Snap należy wywołać polecenie w konsoli:

yarn add --dev react-snap

W pliku package.json dodać:

"scripts": {   "postbuild": "react-snap" }

I następnie zmienić w pliku src/index.js

import { hydrate, render } from "react-dom";
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(, rootElement);
 } else {
 render(, rootElement);
}

I to wszystko!

Instalacja React Snapshot

A teraz instalacja React Snapshot

npm i -D react-snapshot

Następnie w pliku package.json zmieniamy w „scripts”

"build": "react-scripts build && react-snapshot"

Oraz w pliku src/index.js zmieniamy:

import { render } from 'react-snapshot';
render(
 <App/> ,
 document.getElementById('root')
);

I to wszystko!

Po wywołaniu polecenia yarn build obydwie wtyczki wygenerują nam statyczne pliki .html dla podstron.

Różnice między wtyczkami

Snapshot generuje dla ścieżki, np. /kontakt plik kontakt.html, dla /en/contact plik /en/contact.html
Przez to w htaccess należy dodać przekierowania, aby przeglądarka otworzyła plik z rozszerzeniem .html
Natomiast Snap tworzy katalogi i w nich umieszcza pliki .index.html czyli np. dla ścieżki /kontakt wygeneruje /kontakt/index.html a dla /en/contact wygeneruje /en/contact/index.html
Dzięki czemu nie musimy nić dodawać w .htaccess

Część linków do podstron w moim serwisie jest ładowane z pliku JSON przez AJAX-a – mowa tutaj o spisie skryptów: wyremski.pl/skrypty
Niestety obydwie wtyczki ich nie widzą i należy dodać w ustawieniach listę ścieżek do nich.

Na podstronach skryptów zawartość danej strony jest ładowana przez AJAX-a i Snap bez problemu wygenerował pliki .html z ich zawartością, niestety Snapshot wygenerował te pliki bez treści pobranej przez AJAX-a przez co były praktycznie bezużyteczne.

Snap automatycznie wygenerował plik 404.html, w Snapshot musimy dodać do listy linków /404

Podsumowanie

W związku z powyższymi stwierdziłem że Snap jest po prostu lepszy od Snapshot i pozostał on w moim projekcie. A jakie wy macie doświadczenia? Podzielcie się w komentarzach!

Kod mojego portfolio znajduje się na githubie: https://github.com/kamilwyremski/wyremski.pl-2019