Dacă ați interacționat cu SEO de ani de zile, este posibil să fi întâlnit deja Server Side Rendering (SSR) ca unul dintre concepte. De ce să optați pentru server Side Rendering (SSR) în loc de randare pe partea client?
În acest ghid, voi introduce conceptul de randare pe partea serverului (SSR), semnificația acestuia în dezvoltarea web modernă și voi face diferența între randarea pe partea serverului și redarea pe partea clientului. Vom introduce, de asemenea, cadre și biblioteci care acceptă randarea pe server și cum o fac.
Cuprins
Ce este Server Side Rendering (SSR)?
Server Side Rendering (SSR) este o tehnică de dezvoltare web în care conținutul unei pagini web este redat pe server în loc de browserul clientului.
Pentru ca acest lucru să se întâmple, serverul generează o pagină HTML complet redată pe care o trimite browserului clientului, ceea ce înseamnă că serverul este cel care face munca grea. Browserul primește o pagină gata de afișare, ceea ce accelerează timpul inițial de încărcare.
Cum funcționează redarea pe server?
Ori de câte ori un utilizator solicită o pagină web, serverul reunește tot codul JavaScript, HTML și CSS necesar și apoi trimite o pagină complet formată către browserul utilizatorului.
Ca atare, browserul nu trebuie să formeze o pagină de la zero, așa cum se întâmplă cu randarea pe partea client. SSR duce la o pagină de încărcare inițială rapidă și este, de asemenea, bun pentru SEO.
Randarea pe server folosește cadre web precum Vue.js și Gatsby.js în culise pentru a genera dinamic o pagină HTML complet funcțională.
Aceste cadre extrag date din API-uri sau baze de date și apoi folosesc componente sau șabloane pentru a construi documente HTML funcționale. Odată ce serverul termină cu crearea paginii, o trimite apoi către browser-ul client fără nicio prelucrare ulterioară.
Credit imagine: reactpwa
Iată cum funcționează randarea pe server:
- Clientul trimite o solicitare HTTP: Un utilizator introduce o adresă în bara de adrese a browserului. Browserul stabilește o conexiune HTTP și trimite o solicitare către server.
- Preluarea datelor: serverul preia date din API-uri sau din baza de date.
- Pre-randare: serverul compilează toate componentele JavaScript necesare în HTML static și trimite acest HTML către browser-ul clientului.
- Încărcarea paginii și redarea: clientul descarcă și afișează codul HTML de pe server.
- Hidratare: clientul descarcă în sfârșit tot codul JavaScript pentru a adăuga interactivitate la pagina HTML.
Redare pe partea de server vs. Redare pe partea client
Redarea pe partea client este opusă redării pe partea serverului. Practic, browserul generează un document HTML pe care îl afișează utilizatorilor. Acestea sunt diferențele dintre aceste două abordări:
Caracteristică Redare pe partea de server (SSR) Redare pe partea client (CSR) Timp inițial de încărcareTimp inițial rapid de încărcare Poate fi lent, deoarece se bazează pe încărcarea pe partea clientului Experiența utilizatorului Experiență îmbunătățită și îmbunătățită a utilizatorului la prima vizită. experiența utilizatorului la prima interacțiune, dar crește la vizitele ulterioare. Accesibilitate Tot conținutul esențial este încărcat cu documentul HTML inițial redat pe server. Accesibilitatea poate fi o problemă mai ales acolo unde utilizatorii au dezactivat JavaScript. Performanță SEOSSR bifează toate căsuțele potrivite pentru SEO. Unele motoare de căutare îl pot găsi greu de indexat unele pagini generate dinamic pe partea clientului. Scalabilitate. Este ușor să scalați site-urile web cu trafic ridicat care folosesc randare pe partea de server. Dezvoltatorii trebuie să vină cu o abordare bine gândită pentru a scala site-urile web care practică redarea pe partea clientuluiSecuritate Este ușor să reduceți serverul. vulnerabilități laterale atunci când paginile sunt încărcate pe server. Sunt predispuse la atacuri precum cross-site scripting (XSS) și alte vulnerabilități asociate cu redarea pe partea client.
Beneficiile redării pe server pentru SEO
- Timp de încărcare inițial rapid: Cât timp durează încărcarea unei pagini este unul dintre factorii pe care vizitatorii site-ului dvs. iau în considerare. SSR permite utilizatorilor site-ului web să vadă aproape instantaneu o pagină HTML complet încărcată. Încărcarea instantanee reduce timpul de așteptare al utilizatorului înainte de a interacționa cu o pagină web.
- Performanță rapidă pe dispozitive/rețele lente: rețeaua pe care utilizatorii o folosesc pentru a vă accesa paginile web poate fi lentă sau folosesc dispozitive care rulează pe sisteme de operare nu atât de rapide. Redarea pe partea de server înseamnă că dispozitivele utilizatorului nu trebuie să ruleze atât de mult JavaScript, ceea ce le crește performanța. Astfel de rețele sau dispozitive nu mai au nevoie de multă lățime de bandă sau putere de procesare pentru a afișa paginile HTML încărcate.
- Experiență constantă a utilizatorului: SSR vă permite să creați o primă impresie bună prin Time to First Paint (TTFP). Acești utilizatori vor percepe site-ul dvs. ca fiind primul atunci când paginile HTML sunt încărcate rapid, datorită redării pe server.
- SEO îmbunătățit: motoarele de căutare precum Google, Bing și YouTube iau în considerare o mulțime de lucruri atunci când clasifică paginile web. De exemplu, vor verifica experiența utilizatorului, cât timp petrec oamenii pe paginile dvs. și viteza de încărcare. SSR îmbunătățește toate aceste domenii, ceea ce înseamnă că aplicația dvs. se va clasa probabil mai sus pe motoarele de căutare.
- Conținut dinamic ușor de gestionat: motoarele de căutare adoră conținutul dinamic. Cu SSR, dezvoltatorii pot acum gestiona cu ușurință conținutul dinamic și, de asemenea, pot personaliza/ personaliza conținutul în funcție de intrările și preferințele utilizatorilor.
- Scalabilitate și stocare în cache: în SSR, serverul face încărcarea inițială, ceea ce reduce cantitatea de procesare pe care clientul ar trebui să o gestioneze și o face mai scalabilă. SSR poate utiliza, de asemenea, memorarea în cache la nivel de server și a rețelei de livrare a conținutului (CDN) pentru a reduce încărcarea serverului și a îmbunătăți performanța.
Unele instrumente și cadre diferite implementează SSR. Unele sunt proiectate doar pentru a suporta randarea pe partea de server, în timp ce altele sunt create pentru a suporta randarea pe partea client și pe partea serverului. Acestea sunt unele dintre cele mai comune cu care este posibil să interacționați în lumea dezvoltării web:
Vue.js
Vue.js este un cadru JavaScript pentru construirea de interfețe cu utilizatorul și este construit pe JavaScript, HTML și CSS standard. Cu acest cadru, puteți construi interfețe simple și complexe folosind modelul său de programare bazat pe componente și declarativ.
Componentele Vue, în mod implicit, produc și manipulează Document Object Model (DOM) în browser ca rezultat. Cu toate acestea, acest cadru folosește și SSR pentru a reda astfel de componente în șiruri HTML pe server și pentru a le trimite direct în browser. O aplicație Vue redată de server este considerată „universală”, deoarece majoritatea codului rulează pe server și pe client.
React.js
Reacţiona este o bibliotecă JavaScript pentru construirea de interfețe cu utilizatorul. Această bibliotecă folosește un model de programare bazat pe componente în care vă puteți împărți aplicația în componente mici reutilizabile. React este, de asemenea, declarativ, făcând codul ușor de prezis și de depanat.
React este proiectat să implementeze în mod implicit randarea atât pe partea client, cât și pe partea serverului. Dacă trebuie să implementați redarea pe server într-o aplicație React, trebuie să o configurați folosind un cadru de aplicație Node.js, cum ar fi Express.js. De asemenea, trebuie să vă actualizați scripturile în fișierul package.json pentru a vă asigura că aplicația „pornește” de pe serverul Express.
Gatsby
Gatsby este un cadru bazat pe React pentru construirea de site-uri web. Acest cadru open-source este conceput pentru a ajuta dezvoltatorii să construiască aplicații web rapide. Gatsby se integrează cu diverse sisteme de gestionare a conținutului, cum ar fi Drupal și WordPress, ceea ce facilitează preluarea datelor.
Aveți nevoie de un server Node.js pentru a configura redare pe partea serverului pe Gatsby. SSR rulează pe Gatsby Cloud, unde fiecare solicitare este trimisă unui proces de lucru în funcția getServerData. Toate datele din procesul de lucru sunt trecute la componenta React care returnează un document HTML.
unghiular
unghiular este o platformă de dezvoltare construită folosind TypeScript. Această platformă are un cadru bazat pe componente pe care îl puteți utiliza pentru a construi aplicații web. Puteți folosi Angular pentru a crea aplicații mici și la nivel de întreprindere.
La fel ca React, Angular nu implementează SSR în mod implicit. Cu toate acestea, vă puteți configura aplicația Angular pentru a implementa randarea pe server combinând-o cu Express.js, un cadru backend node.js. Angular Universal vă permite să randați componentele Angular pe server și să reduceți timpul inițial de încărcare.
Cum să verificați dacă un site web folosește SSR sau CSR
Dacă sunteți dezvoltator sau marketer, este greu să determinați dacă un site web folosește redarea pe server sau pe partea clientului atunci când îl vizitați. Din fericire, puteți inspecta un site web pentru a determina abordarea de randare pe care o folosește. Putem inspecta site-ul nostru tipstrick.ro pentru a demonstra. Voi face clic dreapta pe orice pagină și apoi selectez „Vizualizare sursa paginii”.
Dacă puteți vedea etichete precum ,
- , atunci sunteți sigur că rulează pe partea serverului.
- Complexitate crescută a codului: Implementarea redării pe partea serverului poate necesita configurații suplimentare pe partea serverului. O astfel de abordare poate duce la o bază de cod crescută pe partea de server, ceea ce face dificil de întreținut.
- Încărcare crescută a serverului: chiar dacă am subliniat că SSR poate îmbunătăți timpul de încărcare, poate fi, de asemenea, un blocaj de performanță în perioadele de trafic ridicat. Serverul este responsabil pentru redarea conținutului HTML, care poate, uneori, supraîncărca serverul sau chiar duce la blocarea.
Limitări ale redării pe server
Este redarea pe partea serverului la fel cu etichetarea pe partea serverului?
Nu. Redarea pe partea serverului este o abordare de dezvoltare web în care serverul trimite o pagină HTML complet încărcată către browser. SSR este menit să mărească timpul rapid de încărcare inițială și să îmbunătățească SEO.
Etichetarea pe partea client este locul în care toate analizele și urmărirea sunt efectuate pe partea serverului. Atunci când etichetele sunt gestionate pe server, browserul clientului nu mai trebuie să se ocupe de astfel de procese, sporind securitatea și sporind performanța. Aflați despre etichetarea pe server pentru a o înțelege mai bine.
Concluzie
Redarea pe server este o alegere bună pentru fiecare dezvoltator web care dorește să-și îmbunătățească performanța aplicației prin timpi de încărcare măriți și experiență îmbunătățită a utilizatorului.
Pe de altă parte, dacă nu este bine implementat, SSR poate fi o provocare, deoarece devine dificilă menținerea codului. Cu toate acestea, beneficiile SSR depășesc cu mult provocările, motiv pentru care multe organizații o adoptă.
În continuare, puteți citi și despre motivele pentru a utiliza etichetarea pe partea de server în locul etichetării pe partea client.