Începem cu câteva definiții care să ne ajute să înțelegem relația dintre codurile JavaScript, serverele, browserele și motoarele de căutare care le accesează.
- ECMAScript (ES) este un limbaj, un script creat pentru a standardiza folosirea codului JavaScript. Există update-uri ale ECMAScript, precum ES5 and ES6.
- Transpiling (source-to-source compiler or a transcompiler): transpiler-ul este un instrument care transformă un cod sursă în diferite limbaje de programare (poate fi asemănat cu modul de funcționare Google Translate). Putem astfel să transformăm un cod sursă în diferite programe, de exemplu JavaScript în C++ sau Python în Ruby.
Pentru randarea codurilor JavaScript, este recomandat să transformăm ES6 în ES5, pentru că Google folosește o versiune a browser-ului Chrome care nu suportă codul ES6.
- Single-page Application (SPA)
Prin single-page application (SPA) înțelegem un website sau o aplicație web care rescrie dinamic conținutul, în funcție de utilizatorii care accesează acest conținut (variabile precum geolocalizare, preferințe etc.) și astfel nu mai trimite interogări multiple către server, pentru conținut HTML sau JavaScript diferit. Framework-urile JavaScript pot fi folosite pentru schimbarea dinamică a elementelor SPA (Single-page Application). - Angular, Polymer, React & Vue – există diferite tipuri de framework-uri JavaScript:
– Angular și Polymer dezvoltate de Google;
– React dezvoltat de Facebook;
– Vue dezvoltat de Evan You, care a lucrat și în echipa Google Angular.
Fiecare framework JavaScript are propriile sale avantaje și dezavantaje, iar programatorii le aleg în funcție de compatibilitatea cu proiectul la care lucrează.
JavaScript – tipuri de randare a codului (accesarea / citirea și afișarea sau indexarea codului JavaScript)
Randarea eficientă a conținutului JavaScript în paginile web depinde de 2 factori foarte importanți:
– viteza de încărcare a site-ului;
– crawl-area și indexarea de către motoarele de căutare.
Pre-randarea (pre-rendering) înseamnă randarea paginii web înainte de interogarea conținutului de către utilizatori sau de către motoarele de căutare; astfel, conținutul va fi încărcat și accesibil mai rapid la interogarea efectivă făcută de utilizatori sau roboți.
- 1. Pre-randarea conținutului JavaScript făcută de server (Server-side Rendering)
Server-ul ce găzduiește site-ul poate să execute o pre-randare a codului JavaScript, astfel că la accesarea paginilor web de către utilizatori sau roboți, conținutul este pregătit pentru încărcare și afișare. Randarea conținutului de către server optimizează viteza de încarcare a site-ului și contribuie la indexarea completă a conținutului de către motoarele de căutare.
- 2. Pre-randarea conținutului JavaScript cu browser-ul utilizatorului (Client-side Rendering)
Din perspectiva utilizatorilor (Client-side Rendering), codul JavaScript din paginile web este procesat de browser-ul sau de motorul de căutare din care se accesează pagina web.
În aceste condiții, server-ul gestionează interogarea inițială, iar accesarea / afișarea paginii web în întregime este o misiune ce cade în sarcina calculatorului sau a telefonului de pe care utilizatorul navighează pe internet ori a motorului de căutare utilizat.
Există o diferență de randare / accesare a paginilor web și a codurilor JavaScript între calculatorul sau telefonul utilizatorului pe de o parte și roboții Google, pe de altă parte.
Crawl-erii Google lasă într-o listă de așteptare conținutul ce trebuie randat, pentru a-l afișa atunci când se încarcă sufficient cod. De aceea, putem să vedem întârzieri de până la o săptămână, între accesarea paginii web de către roboți și indexarea acesteia în baza de date Google.
- 3. Randarea dinamică a conținutului JavaScript (Dynamic Rendering)
Randarea dinamică implică diferite metode de randare, în funcție de browser-ul utilizatorului sau motorul de căutare care execută interogarea paginii web.
Dacă, în mod obișnuit, site-ul nostru randează conținutul din perspectiva utilizatorilor (Client-side Rendering), atunci când este accesat de motoarele de căutare, paginile din site vor fi servite la interogare prin pre-randare (pre-rendering), folosind un instrument precum Puppeteer sau Rendertron, astfel încât conținutul să poată fi văzut și indexat imediat.
- 4. Randarea hibridă a conținutului JavaScript (Hybrid Rendering)
Randarea hibridă implică utilizarea celor 2 metode – Server-side Rendering și Client-side Rendering. Conținutul principal (core content) este pre-randat de server și trimis / afișat la utilizatorul sau motorul de căutare care face interogarea. După încărcarea paginii (cu acest conținut principal), se face încărcarea conținutului prin Client-side Rendering.
———————————————————————————
Citește și Despre JavaScript și implicațiile SEO – ce reprezintă codul pentru funcționarea corectă a unui website sau a unei aplicații web, în ce măsură acesta afectează sau nu aspectele SEO și cum îl gestionăm.
———————————————————————————
Info + foto
Understanding JavaScript Fundamentals: Your Cheat Sheet (Rachel Costello / January 18, 2019)
