Redare pe partea serverului cu React

Un pic despre React

React este o bibliotecă JavaScript frontend open source, care este creată și întreținută de comunitatea de dezvoltatori Facebook. Este folosit pentru a construi interfețe cu utilizatorul sau componente UI.

Cu toate acestea, această definiție ar putea să nu fie complet de înțeles pentru începători. Avem postarea perfectă pe blog, care vă prezintă o scurtă explicație despre React, până la o descriere tehnică foarte detaliată a acestuia, pe care o puteți găsi aici.

Călătoria unei pagini web | De la server la browser

Pentru a înțelege ce este redarea pe server, mai întâi este important să obțineți o imagine de ansamblu asupra modului în care apare o pagină web pe ecran, care este elucidată de diagrama de mai jos:

1. Ori de câte ori introduceți adresa URL a unui site web sau faceți clic pe un link către site-ul web, browserul dvs. trimite o solicitare pentru unele fișiere către serverul corespunzător, identificate prin URL.
2. Serverul trimite unele fișiere, cum ar fi fișierele HTML și JavaScript, printre altele, către browser.
3. Browserul dvs. descarcă și „redează” sau procesează aceste fișiere și puteți vedea și interacționa cu pagina web pe care ați solicitat-o.

Aceasta este o simplificare foarte mare a călătoriei unei pagini web, dar este o prefață suficient de bună pentru a explica diferiții pași secundari și diferitele moduri (inclusiv Redarea pe server) de a realiza această sarcină.

Călătoria unei pagini web de redare „normală” din partea clientului

Aprofundând în procesul menționat în secțiunea anterioară, avem o tehnică cunoscută sub numele de Client Side Rendering sau CSR, care este folosită de mult timp, pentru a afișa un site web pe ecranele utilizatorului. Acest lucru este explicat în următoarea diagramă:

1. La introducerea adresei URL a unui site web sau făcând clic pe un link către site-ul web, browserul dvs. trimite o solicitare pentru unele fișiere către serverul corespunzător, identificate prin URL.
2. Serverul trimite fișierul HTML care conține referințe la alte elemente, cum ar fi fișiere imagine, fișiere CSS și fișiere JavaScript.
3. Browserul trimite din nou o solicitare către server și descarcă toate fișierele, inclusiv fișierele CSS și JavaScript la care se face referire în fișierul HTML.
   1. Acesta poate fi un factor care contribuie la creșterea timpului de încărcare a unui site web dacă utilizatorii au o conexiune slabă și fișierul JavaScript este mare.
4. Odată ce aceste fișiere sunt descărcate de browser, browserul execută apoi cadrul sau biblioteca (de exemplu React) și analizează fișierele JavaScript, care sunt responsabile pentru a face pagina web interactivă.
   1. Din perspectiva optimizării vitezei, acest punct depinde de mașina client și dacă clientul este un hardware cu putere redusă, acest lucru poate dura mult timp.
   2. Utilizatorul încă vede ecranul de încărcare atunci când acești pași sunt în curs
5. Pagina web este în sfârșit încărcată complet și utilizatorul poate vedea și interacționa cu pagina web.

După cum este clar cu pașii menționați mai sus, din perspectiva unui utilizator, acesta poate vedea și interacționa cu site-ul doar la pasul final, după ce toate fișierele necesare au fost descărcate și redate de către computerul client.

Acest lucru poate dura mult timp, deoarece depinde de performanța mașinii client în executarea cadrului și analizarea fișierelor JavaScript.

Călătoria paginii web de redare pe partea serverului

Explicând-o într-o singură linie, Server Side Rendering sau SSR este procesul de preluare a unui site web cadru JavaScript partea client și redare a acestuia în HTML static și CSS pe server în loc de client, așa cum a fost cazul în CSR.

Mai jos este menționată o reprezentare picturală a călătoriei pe care o face o pagină web cu Server Side Rendering, cu React:

1. La introducerea adresei URL a unui site web sau făcând clic pe un link către site-ul web, browserul dvs. trimite o solicitare pentru unele fișiere către serverul corespunzător, identificate prin URL.
2. Serverul, în loc să trimită doar fișiere HTML vanilla, ca în CSR, redă aplicația în șir folosind funcția renderToString importată din react-dom/server
   1. Acesta este apoi injectat în fișierul index.html și este trimis în browser.
   2. Aici se află cheia SSR, din punct de vedere funcțional, deoarece aici este redat pagina de server și nu mașina client.
3. Browserul redă acest fișier HTML, rezultând că vizualizarea este populată în browser.
   1. Cu toate acestea, acesta nu este încă interactiv, dar utilizatorul poate vedea vizualizarea finală a paginii web.
4. Browserul trimite din nou o solicitare către server și descarcă toate fișierele la care se face referire în fișierul HTML, inclusiv fișierele JavaScript.
5. Odată ce toate scripturile sunt descărcate, componenta React este din nou redată pe client. Cu toate acestea, de data aceasta, hidratează vizualizarea existentă în loc să o suprascrie.
   1. „Hidratarea” unei vederi înseamnă că atașează orice handler de evenimente la elementele DOM (Document Object Model) redate, dar păstrează intacte elementele DOM redate. În acest fel, starea elementelor DOM este păstrată și nu există nicio resetare a vederii care se întâmplă.
6. Pagina web este în sfârșit încărcată complet și utilizatorul poate interacționa acum cu pagina pe care a putut-o vedea chiar de la pasul 3.

Astfel, una dintre cele mai mari schimbări vizuale din perspectiva utilizatorului este că pagina web devine „vizibilă” destul de repede, deoarece redarea HTML nu necesită atât de multă resurse, vorbind din perspectiva browserului.

Acest lucru nu face ca pagina să se încarce mai rapid decât o aplicație non-SSR, dar oferă utilizatorilor vizualizarea paginii web pe măsură ce fișierele JavaScript se descarcă și se analizează în fundal, după care pagina web devine interactivă. Aceasta înseamnă că TTI, adică Time To Interactive (acesta este timpul necesar pentru ca pagina web să fie complet interactivă din momentul în care utilizatorul solicită pagina web) este puțin mai mare decât timpul necesar pentru ca pagina web să fie vizibilă. în browser.

Deci, într-un scenariu SSR, pentru prima randare mai rapidă, HTML și CSS trebuie să fie semnificative pentru utilizatori, iar JavaScript poate fi îmbunătățirea pentru HTML și CSS, deoarece încărcarea acestuia este amânată.

O concepție greșită comună despre funcționarea SSR cu React este că după fiecare modificare, cum ar fi un utilizator care solicită date noi, serverul finalizează din nou toți pașii și trimite fișierul HTML cu noua interfață de utilizare către browser, dar acesta nu este cazul. . Se face doar o actualizare parțială a paginii. Deși redarea este realizată de server, rezultatul finalizat este inserat în DOM prin „hidratarea”, așa cum s-a explicat mai devreme.

Redare pe partea serverului | Când și când să nu se folosească

• Dacă aveți nevoie de un SEO puternic, alegeți SSR, deoarece motoarele de căutare sunt mai ușor de accesat cu crawlere.
• Pentru site-urile web care sunt concentrate pe conținut și nu pe interacțiune, cum ar fi bloguri, site-uri de știri, site-uri web statice și site-uri web grele de text, SSR poate fi un avantaj, deoarece va încărca esențialul site-ului dvs., adică conținutul fulgerător.
• Este nevoie de timp și efort din partea serverului pentru a reda și a genera fișierele pentru a fi trimise către browser. Deci, dacă aveți un buget redus de server și operațiuni, este mai bine să nu implementați SSR, deoarece vor fi trimise o mulțime de solicitări către serverul dvs.
  • Cu toate acestea, cu furnizori precum Firebase, putem genera dinamic conținut cu funcții cloud, iar serverul îl poate stoca în memoria cache CDN
  • Ceea ce ar face acest lucru este ca data viitoare când utilizatorul solicită, generarea fișierelor să nu fie făcută din nou de către server. Mai degrabă, este doar servit de la o margine CDN locală, îmbunătățind timpii de încărcare din punctul de vedere al utilizatorului, utilizând și mai puține resurse de server.

Cum este React bun pentru SSR?

React este o alegere excelentă pentru implementarea SSR, deoarece încorporează conceptul de DOM virtual (Document Object Model).

Acest lucru le permite dezvoltatorilor să creeze o versiune virtuală a aplicației React și să o aibă în serverul însuși.

Acest lucru face mai ușor să îl redați într-un HTML folosind funcția renderToString, așa cum am discutat mai devreme, trimiteți-l în browser, astfel încât browserul să îl poată reda destul de repede și să creeze o versiune virtuală pe computerul client.

Deci, luând în considerare faptul că această versiune virtuală se potrivește cu HTML pe care l-am trimis de pe server, React nu o va re-renda, reducând astfel timpul de interacțiune (TTI), rezultând o pagină web care se încarcă „mai rapidă”.

SSR, toată ziua, în fiecare zi!

Ne-am dori să existe o soluție unică pentru toate, dar acest lucru este departe de a fi cazul, mai ales cu noile tehnologii. Deși SSR are o mulțime de beneficii, există unele cazuri, așa cum am discutat mai devreme, pentru care SSR ar putea să nu fie o alegere bună; site-uri foarte interactive fiind la avangarda acesteia.

Aici intervin Creole Studios. Avem o gamă largă de experți în tehnologie, mereu la curent cu aproape fiecare tehnologie nouă care apare în techverse. Vom înțelege nevoile dvs. de afaceri și vă vom oferi soluții personalizate, fie că este vorba despre o aplicație SSR sau CSR, și fiți siguri că nu va trebui să vă faceți griji pentru nimic în timp ce noi facem munca grea pentru dvs. Contactează-ne și transformă-ți ideile din cap într-o aplicație!