React Snap vs Snapshot

Logo React

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

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.

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!

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. Poniżej przedstawiam różnicę między nimi:

Snapshot generuje dla ścieżki, np. /kontakt wygeneruje plik kontakt.html, dla /en/contact wygeneruje 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

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

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close