SEO i reagowanie ∴ Izomorfizm i indeksowanie

1. Co to jest React? O co chodzi? Dlaczego to dobrze?
2. Więc ... WTF z JavaScriptem?
3. „Próbujemy zrozumieć JavaScript przez JavaScript”
4. „Trudno to zrobić w skali obecnej sieci, ale zdecydowaliśmy, że warto. "
5. Co to jest React?
6. Mocne strony Reactu
7. Isomor ... co?
8. ReactJS ≠ AngularJS
9. Jak to robisz?
10. Korzyści z ReactJS dla SEO
11. Wady React?
12. Kto korzysta z React?
13. I to nie koniec ...
14. Źródła i inspiracje
15. Elementy ignorowane

To oficjalny React jest na ustach wszystkich, ale nawet kosztem dobrej pracy nad dokumentacją trudno zrozumieć wpływ tej technologii na SEO. Małe oświetlenie do opanowania tematu?

Co to jest React? O co chodzi? Dlaczego to dobrze?

Z nastaniem SPA Prawie „w czasie rzeczywistym” aplikacje internetowe, takie jak Gmail, Airbnb, Soundcloud lub Netflix, frameworki JS i biblioteki, nigdy nie były tak popularne.

Z jednej strony, użytkownicy są coraz bardziej dojrzali i wymagają takich aplikacji, które są niezwykle satysfakcjonujące pod względem doświadczenia. Z drugiej strony większość programistów szuka lepszej wydajności (płynność interfejsu, skalowalność i redukcja kosztów) i cieszy się pisaniem pięknego kodu (zabawa w kod, czytelność, moc i łatwość konserwacji).

Trudno przegapić takie technologie, jak AngularJS (framework Google), Backbone.js, Ember.js lub KnockoutJS.

Ogromne wykorzystanie JavaScript zmienia grę z punktu widzenia SEO.

Więc ... WTF z JavaScriptem?

Główny problem tych ram polega na tym, że treść jest wstrzykiwana po stronie klienta, po załadowaniu strony po stronie serwera (w przeciwieństwie na przykład do PHP): jeśli spojrzymy na kod źródłowy, to nicość!

W tych okolicznościach Googlebot nie mógł zaindeksować i zaindeksować tych treści wstrzykniętych a posteriori: katastrofalne z punktu widzenia SEO! (Podobno ...)

Niedawno Google ogłosił, że Googlebot spróbuje teraz zinterpretować zaindeksowane strony, uruchamiając JavaScript ... „Spróbuje ...”

„Próbujemy zrozumieć JavaScript przez JavaScript”

W poście z 23 maja 2014 r. Google stwierdza, że GoogleBot może interpretować JavaScript a zatem indeksowanie treści wcześniej niewidocznych (ponieważ wygenerowana po stronie klienta, a nie po stronie serwera, następuje eh ..). Jakkolwiek możesz sobie wyobrazić, w skali sieci jest to praca tytana ...

„Trudno to zrobić w skali obecnej sieci, ale zdecydowaliśmy, że warto. "

Po stronie deweloperów rozwinęło się wiele inicjatyw umożliwiających indeksowanie i indeksowanie tak wygenerowanych treści, ale mimo to są one kosztowne lub przynajmniej wiążące w cyklu życia projektu.

W tym miejscu wchodzi React, czyli rozwiązanie! Czy nadal podążasz?

Co to jest React?

zareagować jest biblioteką ( zestawem metod i funkcji ) do rozwijania interfejsów o charakterystyce do ciągłej zmiany : możemy wymyślić moduł komentarza w czasie rzeczywistym lub Facebook Ticker (który podsumowuje aktywność twoich przyjaciół) , tam również w quasi „czasie rzeczywistym”).

Siłą React jest zawsze znalezienie najlepszego sposobu na szybką aktualizację i wyświetlenie [ tych zmian ] , bez konieczności ponownego ładowania strony przez użytkownika .

Rozwój oraz publikacja tej biblioteki wynikają ze współpracy około stu programistów pracuje dla różnych firm, w tym z inicjatywy Facebook i Instagram: raczej poważnie!

Mocne strony Reactu

„React jest tak szybki, ponieważ nigdy nie rozmawia bezpośrednio z DOMem. "

1. Inteligencja : kod produktu jest „czysty” ( prosty do przeczytania, zrozumienia i utrzymania), a jego odczyt pozwala natychmiast zobaczyć, co aplikacja będzie obsługiwać i jak będzie wyglądać.
2. Wydajność : Jest to jedna z kluczowych cech React, koncepcji Wirtualny DOM , React skupi się na przetwarzaniu i wyświetlaniu tylko zmian w widoku (odkładając resztę widoku, która się nie zmienia).
3. Społeczność : ReactJS szybko uwiodło społeczność programistów JS. Nie wspominając już o React Native, który ze swojej strony może publikować natywne aplikacje iPhone (i Android wkrótce), pisząc JavaScript. Oszczędza to zatem znaczny czas rozwoju.
4. [HOT SEO] Izomorfizm i renderowanie po stronie serwera : za pomocą serwera węzeł , kod będzie mógł być generowany po stronie klienta ORAZ po stronie serwera (trochę jak PHP tak ... ale bez przeładowania!) w przeciwieństwie do innych bibliotek i tradycyjnych frameworków JS ( backbone.js , angularjs , ember.js itp.), który wykonuje kod natywnie tylko po stronie klienta (w przeglądarce). Ta mocna strona jest tym, co nas najbardziej interesuje z punktu widzenia SEO, ponieważ rozwiązuje problem indeksowania treści (możliwość indeksowania i indeksowania) wypełnianych tylko po stronie klienta.

Isomor ... co?

Pamiętaj tylko, że kod między klientem (twoją przeglądarką) a serwerem jest taki sam! I mówi inaczej: „Backend i frontend mają ten sam kod. (Pokazane po prawej stronie diagramu)

Poza tym React nie jest jedyną biblioteką „osadzającą” tę technologię . Do tej pory jest już dobrych dwudziestu takich jak Brisket, Cassis, Catberry , Chaplin , derby , ezel , Este, Flatiron, Fluxible , Niewidzialny, jsblocks , Loopback, Lazojs, loopback , Mojito, Sara.js, San Stack i Taunus ,

Jeśli chodzi o terminologię gdzie indziej, niektórzy wolą rozmawiać Uniwersalny JavaScript raczej niż izomorfizm. Trzeba przyznać, że to wyrażenie jest łatwiejsze do zrozumienia.

„... to są czysto anegdotyczne dowody, ale kiedy użyjemy słowa uniwersalny zamiast izomorficznego, wszyscy to rozumieją. "

ReactJS ≠ AngularJS

„Wielu ludzi używa V w MVC. "

Nie ma potrzeby ich porównywać. React w przeciwieństwie do AngularJS nie jest ramą.

Jeśli różnica między strukturą a biblioteką masz obsesję, nie wahaj się rzucić okiem na te dyskusje. Dla innych pamiętaj, że React nie narzuca konkretnej architektury Twojej aplikacji i może zostać wszczepiony do dowolnego projektu przy użyciu innych technologii internetowych (w tym AngularJS), całkowicie niezależnie.

„ React to tylko WIDOK ... ”

Jak to robisz?

Płacimy lub majstrujemy!

Jeśli nie mamy środków, oferujemy roboty indeksujące alternatywną wersję HTML (migawkę) swoich stron dzięki Phantom.js (możesz zajrzeć do ten samouczek aby uzyskać pomysł, datuje się trochę, ale duch jest). Tak, od maskowanie ! Mówią „brudni” puriści, trudni do utrzymania, ale to działa, całkiem dobrze.

Jeśli nie, a jeśli masz niewielki budżet (lub model biznesowy, który się trzyma), to jest dość potężny i łatwy do skonfigurowania: nazywa się Wstępne renderowanie lub BromBone wymienić tylko ich. Jeśli temat « Jak tworzyć przyjazne dla SEO aplikacje JavaScript »Interesuje cię, ten artykuł jest miły.

Korzyści z ReactJS dla SEO

1. Zdolność robotów indeksujących do indeksowania i indeksowania treści natywnie: mamy wszystkie zalety JS, bez wad!
2. Korzystne czasy ładowania przyczyniają się do dobrego doświadczenia użytkownika. Happy users = Happy Google.

I to wszystko! Tak, pod względem SEO. Wszystko będzie zależeć od tego, co zrobisz przy kolejnych wdrożeniach back-office. Aby uzupełnić analizę na ten temat, proponuję zapoznać się z tym artykułem Zack Argyle, developer @Pinterest „Przestań używać Reakcji na WSZYSTKO”

„Jeśli masz silną dynamiczną aplikację, która musi być często aktualizowana, a chcesz uniknąć dużej wagi różnic, patrzysz na przeciwnika typu trawiastego, a wirtualny DOM ReactJS będzie super skuteczny. Jeśli jednak nie będziesz miał takich potrzeb, WYBIERZ COŚ INNEGO! "

Wady React?

Mówiąc prościej, nie ma jednego. Jeśli trochę kopiemy, możemy to zauważyć:

• Dokumentacja jest w toku, ale było jeszcze trochę czasu, aby nie było łatwo uzyskać dostęp tylko do Facebooka.
• Facebook zastrzega sobie prawo do wycofania licencji , prawa do korzystania z React. Temat ten jest przedmiotem dyskusji, choć naiwnie można się zastanawiać, jaki interes Facebook mógłby przyjąć w tego typu zachowaniach.

Kto korzysta z React?

Coraz więcej firm! Aby porozmawiać o najbardziej znanych, możemy oczywiście cytować Facebooka, Instagram, ale także Yahoo, Adobe, Airbnb, AdRoll, Asana, BBC, Century 21, Club Med, Dropbox, Feedly, Github, Khan Academy, KissMetrics, Netflix, Reddit, Salesforce, Twitter, WhatsApp i pełen innych ,

I to nie koniec ...

Czy podoba Ci się ten artykuł? Dziękujemy za udostępnienie lub przekazanie nam swoich doświadczeń (dobrych lub złych) w ramach JS i bibliotekach, pozostawiając komentarz.

A jeśli nadal masz trochę energii, mogę tylko doradzić ci przeczytanie naszego poprzedniego artykułu Demandware: plusy i minusy dla SEO ,

PS: Dzięki Georges , Jérémy , Blandine , François i Audrey do korekty!

Źródła i inspiracje

1. React vs. AngularJS - How the two Compare [EN]
2. ReactJS na Facebooku - zasoby, aby zacząć [FR]
3. Niesamowita Reakcja, zbiór wspaniałych narzędzi React, zasobów, filmów i błyszczących rzeczy [PL]

Elementy ignorowane

1. React Native, framework do budowania natywnych aplikacji za pomocą React [EN]
2. JSX, rozszerzenie składni JavaScript, które wygląda podobnie do XML [EN]
3. Komponenty wielokrotnego użytku [EN]
4. Reaguj na dodatki, przydatne narzędzia do budowania aplikacji React [PL]
5. Flux, architektura aplikacji do budowania aplikacji internetowych po stronie klienta [EN]