Client-Side Rendering

Cum funcționează CSR

În Client-Side Rendering, browserul primește documentul HTML și fișierele JavaScript necesare aplicației. JavaScript rulează apoi în browser și modifică DOM-ul pentru a genera conținutul paginii. Unele site-uri folosesc un model de tip „app shell”, în care HTML-ul inițial nu include conținutul propriu-zis.

Google procesează aplicațiile JavaScript în trei faze principale: crawling, rendering și indexing. Mai întâi, Googlebot solicită adresa URL și analizează răspunsul HTML. Pagina poate fi apoi trimisă către coada de randare. Când resursele permit, Chromium execută JavaScript, iar Google folosește HTML-ul randat pentru identificarea linkurilor și indexarea paginii.

Acest proces înseamnă că trebuie verificate atât răspunsul HTML inițial, cât și rezultatul obținut după executarea JavaScript. Google poate vedea conținutul generat astfel, dar documentația sa menționează limitări. Unele pagini pot avea conținut care nu apare în HTML-ul randat. Alte motoare de căutare pot alege să ignore JavaScript.

CSR și navigarea în aplicații

În aplicațiile cu o singură pagină, navigarea este adesea gestionată în browser. Linkurile importante trebuie implementate ca elemente HTML a cu atributul href. Pentru schimbarea adreselor URL între vizualizări, Google recomandă History API, nu fragmente precum #/produse.

CSR poate complica și tratarea paginilor inexistente. Dacă serverul returnează un răspuns normal pentru o adresă fără conținut valid, poate apărea o eroare soft 404. Google recomandă redirecționarea către o adresă pentru care serverul răspunde cu statusul 404 sau adăugarea directivei noindex pe pagina de eroare. Server-side rendering, static rendering și hydration sunt alternative recomandate în locul dynamic rendering.

CSR contează în SEO deoarece conținutul, linkurile și elementele descriptive pot lipsi din răspunsul HTML inițial. Google poate executa JavaScript și poate folosi HTML-ul randat pentru indexare, dar crawlingul și randarea sunt etape distincte. O pagină poate aștepta în coada de randare, iar problemele JavaScript pot împiedica apariția conținutului în rezultatul randat.

Titlul, descrierea meta și adresa canonică trebuie verificate cu atenție. Google permite setarea lor prin JavaScript, dar recomandă definirea adresei canonice în HTML. Dacă aceasta este modificată prin JavaScript, valoarea nu trebuie să intre în conflict cu adresa canonică din HTML-ul inițial. Fișierele JavaScript necesare nu trebuie blocate dacă pagina depinde de ele pentru redare.

Nu toate programele automate pot executa JavaScript, iar alte motoare de căutare pot alege să îl ignore. De aceea, conținutul important, linkurile standard și elementele descriptive trebuie implementate astfel încât să poată fi accesate și procesate în mod fiabil.

Un magazin online românesc afișează pagina /produse/cafea-boabe printr-o aplicație CSR. Răspunsul HTML inițial conține doar containerul aplicației:

<div id="app"></div>
<script src="/aplicatie.js"></script>

După executarea JavaScript, DOM-ul include titlul produsului, descrierea și linkurile către categorii. Verificarea SEO trebuie să confirme că aceste elemente apar și în HTML-ul randat, nu doar pe ecranul utilizatorului.

Pentru navigare, este potrivit un link standard:

<a href="/produse/cafea-boabe">Cafea boabe</a>

O variantă bazată pe href="#/produse/cafea-boabe" nu este recomandată pentru descoperirea sigură a adresei de către Googlebot. Dacă produsul nu există, aplicația trebuie să conducă spre o adresă care returnează statusul 404 sau să adauge noindex paginii de eroare.

1. Deschide pagina cu JavaScript dezactivat și verifică ce titlu, text și linkuri sunt disponibile.
2. Folosește Chrome DevTools pentru a compara răspunsul HTML din fila Network cu DOM-ul rezultat după executarea JavaScript.
3. Verifică dacă resursele necesare pot fi accesate și dacă informația importantă apare în DOM-ul randat.
4. Confirmă că linkurile interne sunt elemente a cu atribute href către adrese reale, nu doar acțiuni JavaScript sau fragmente.
5. Verifică răspunsurile HTTP pentru pagini valide, pagini mutate și pagini inexistente.
6. Compară elementele title, meta description, meta robots și rel="canonical" din HTML-ul inițial cu cele din DOM-ul randat.
7. Analizează erorile JavaScript din consola browserului și solicitările eșuate din fila Network.

1. Include conținutul SEO important în HTML-ul inițial atunci când arhitectura site-ului permite acest lucru.
2. Folosește server-side rendering, static rendering sau hydration pentru paginile unde dependența totală de JavaScript produce probleme.
3. Păstrează fișierele JavaScript necesare accesibile crawlerelor.
4. Construiește navigarea cu linkuri HTML care au atribute href și folosește History API pentru rutarea în aplicații cu o singură pagină.
5. Definește adresa canonică direct în HTML și evită modificarea ei către o valoare diferită prin JavaScript.
6. Returnează coduri HTTP relevante și tratează explicit paginile inexistente pentru a evita erorile soft 404.
7. Nu adopta dynamic rendering ca soluție pe termen lung. Dacă este folosit ca soluție provizorie, conținutul oferit utilizatorilor și crawlerelor trebuie să fie similar.