Strategia tworzenia galerii zdjęć React przyjaznej dla SEO - javascript, php, node.js, seo, reaktjs

Napisałem galerię zdjęć lub pokaz slajdów React. Muszę włączyć indeksowanie tekstu alternatywnego przez wyszukiwarki, ale ponieważ mój serwer jest w PHP, React.renderToString ma ograniczone zastosowanie.

Serwer jest w PHP + MySQL. PHP używa Smarty, porządnego silnika szablonów PHP, do renderowania HTML. Reszta frameworka PHP jest moja. Szablon Smarty ma jedną niezgrabną linię:

<script>
var GalleryData = {$gallery};
</script>

który jest renderowany przez funkcję kontrolera PHP w następujący sposób:

    return array(
"gallery"     => json_encode($gallery),
);

($gallery będący tabelą wynikową zapytania MySQL).

I moje .js:

React.render(<Gallery gallery={GalleryData} />, $(".gallery").get(0));

Nie jest to najbardziej elegancka konfiguracja, ale biorąc pod uwagę, że mój serwer jest w PHP, nie wydaje się, aby był to lepszy sposób (?)

Zrobiłem super szybki hack, aby to naprawić na początkushot - skopiowałem renderowany HTML z Firebug i ręcznie wstawiłem go do nowej tabeli w DB. Następnie renderuję tę kroplę kodu z PHP i możemy przejść do przeglądarki.

Była jedna komplikacja, ponieważ dlategoKomponenty React są wstawiane do DOM tylko wtedy, gdy są najpierw renderowane (jak rozumiem), a ponieważ galeria pokazuje tylko jeden slajd obrazu na raz, musiałem ręcznie kliknąć wszystkie slajdy raz przed zapisaniem kodu HTML.

Teraz jednak tekst alternatywny jest edytowalny przez CMS, więc muszę zautomatyzować ten proces lub znaleźć lepsze rozwiązanie.

Przepisanie serwera w Node.js nie wchodzi w rachubę.

Po pierwsze sądzę, że muszę zainstalować Node i napisać skrypt, który tworzy ten sam komponent React. Ponieważ dane wejściowe (w tym tekst alternatywny) muszą pochodzić z MySQL, mam kilka możliwości:

1. połącz się z bazą danych MySQL DB z Note i zreplikuj zapytanie
2. utwórz adres URL odpowiedzi po stronie PHP, który zwraca tylko JSON (umieszczając zapytanie SQL we wspólnej funkcji)
3. pobierz całą stronę w węźle, ale wyodrębnienie GalleryData będzie bałaganem

Muszę następnie upewnić się, że wszystkie komponenty są renderowane w DOM, więc mogę wykonać skrypt, ręcznie wywołując metodę nextSlide () tyle razy, ile jest slajdów (mniej jednego).

Na koniec ponownie zapiszę renderowany DOM w DB (więc skrypt Node będzie wymagał połączenia MySQL - może pierwsza opcja jest najlepsza).

Cały proces wydaje się bardzo skomplikowany w przypadku tak podstawowego wymagania. Czy coś brakuje?

Jestem zupełnie nowy w Node i cała ideatworzenie DOM poza przeglądarką jest dla mnie w zasadzie nowe. Nie mam nic przeciwko wprowadzeniu Node do mojej architektury, ale będzie to tylko wspierać obsługę Reacta w interfejsie.

Należy pamiętać, że witryna ma około 15 000 odsłon stron miesięcznie, więc ogromna skalowalność nie jest brana pod uwagę - nie używam buforowania stron, ponieważ po prostu nie jest to konieczne dla tego natężenia ruchu.

Prawdopodobnie mam kilka składników React, któremuszą być renderowane statycznie w ten sposób, ale utrzymanie niewielkiego narzutu technicznego (np. utrzymanie zestawu równoległych zapytań SQL w Węźle) nie będzie dużym problemem.

Czy ktoś może mnie tu prowadzić?

Odpowiedzi:

3 dla odpowiedzi № 1

Myślę, że powinieneś spróbować renderować komponenty React po stronie serwera za pomocą PHP. Tutaj jest PHP lib aby to zrobić.

Ale tak, w zasadzie będziesz musiał używać V8js ztwój kod PHP. Jest to jednak rodzaj eksperymentalny i może być konieczne użycie innych. (I w tym „odwrotnym kierunku” może być używany Node / Express do renderowania twojego komponentu. Oto kilka pomysłów, jak to zrobić.)

---