Programmi sees toimub midagi esiots hiljuti. Serveripoolne renderdamine on tänu Reactile ja selle sisseehitatud serveripoolsele hüdreerimisfunktsioonile üha enam haarduvust suurendav. Kuid see pole ainus lahendus, mis pakub kasutajale kiiret kogemust ülikiire aeg-esimese-baidini (TTFB) skooriga: Eelrenderdus on ka päris hea strateegia. Mis vahe on nendel lahendustel täielikult kliendi renderdatud rakendusel?

Kliendi renderdatud rakendus

Kuna sellised raamistikud nagu Angular, Ember.js ja Backbone eksisteerivad, on esiotsa arendajad kaldunud tegema kõik kliendipoolsed. Tänu Google'ile ja selle võimele JavaScripti 'lugeda' töötab see üsna hästi ja see on isegi SEO-sõbralik.

Kliendipoolse renderdamislahenduse abil suunate päringu ümber ühele HTML-failile ja server edastab selle ilma sisuta (või laadimisekraaniga), kuni olete kogu JavaScripti hankinud ja lasknud brauseril kõik enne sisu renderdamist kompileerida.

Hea ja usaldusväärse Interneti-ühenduse korral on see üsna kiire ja töötab hästi. Kuid see võib olla palju parem ja selle valmistamine ei pea olema keeruline. Seda näeme järgmistes jaotistes.

Serveripoolne renderdamine (SSR)

SSR-lahendus on midagi, mida me juba palju aastaid tagasi tegime, kuid kipume kliendipoolse renderdamise lahenduse kasuks unustama.

Koos vana serveripoolsed renderdamislahendused, lõite veebisaidi - näiteks PHP-ga - server koostas kõik, sisaldas andmeid ja edastas kliendile täielikult asustatud HTML-lehe. See oli kiire ja tõhus.

Aga… iga kord, kui navigeeriti teisele marsruudile, pidi server selle töö uuesti tegema: hankima PHP-fail, kompileerima ja edastama HTML-i, kusjuures kõik CSS ja JS viivitavad lehe laadimisega mõnesaja ms-ni või isegi tervikuna sekundit.

Mis oleks, kui saaksite SSR-lahendusega esimese lehe laadida ja seejärel saaksite AJAX-iga dünaamilise marsruutimise jaoks raamistiku tuua ainult vajalikud andmed?

Seetõttu tõmbab SSR kogukonnas järjest rohkem haaret, kuna React populariseeris seda probleemi hõlpsasti kasutatava lahendusega: RenderToString meetod.

Seda uut tüüpi veebirakendust nimetatakse a universaalne rakendus või an isomorfne rakendus . Nende terminite täpse tähenduse ja nende vaheliste suhete üle on endiselt vaidlusi, kuid paljud inimesed kasutavad neid omavahel asendatult.

Igatahes on selle lahenduse eeliseks võimalus arendada sama koodiga rakenduse serveri- ja kliendipool ning pakkuda kohandatud andmetega kasutajale tõeliselt kiiret kogemust. Puuduseks on see, et peate käivitama serveri.

SSR-i kasutatakse andmete toomiseks ja lehe eelnevalt täitmiseks kohandatud sisuga, kasutades selleks serveri usaldusväärset Interneti-ühendust. See tähendab, et serveri enda Interneti-ühendus on parem kui kasutajal valetamine ), nii et see saab andmeid enne kasutajale edastamist eelhankida ja liita.

Eelnevalt asustatud andmetega saab SSR-rakenduse abil lahendada ka probleemi, mis kliendi renderdatud rakendustel on sotsiaalse jagamise ja OpenGraph-süsteemiga. Näiteks kui teil on ainult üks index.html kliendile edastamiseks on neil ainult ühte tüüpi metaandmeid - tõenäoliselt teie avalehe metaandmed. Seda ei kontekstualiseerita, kui soovite jagada teist marsruuti, nii et ühtegi teie marsruuti ei kuvata muudel saitidel koos oma õige kasutaja sisuga (kirjeldus ja eelvaate pilt), mida kasutajad sooviksid maailmaga jagada.

Eel renderdamine

Universaalse rakenduse kohustuslik server võib olla mõnele heidutav ja väikese rakenduse jaoks üleliigne. Seetõttu võib eelrenderdamine olla tõeliselt tore alternatiiv.

Avastasin selle lahenduse Preact ja oma CLI, mis võimaldab teil kompileerida kõik eelnevalt valitud marsruudid, et saaksite täielikult asustatud HTML-faili a staatiline server. See võimaldab teil pakkuda ülikiiret kasutuskogemust tänu hüdratsioonifunktsioonile Preact / React, ilma et oleks vaja Node.js-d.

Saak on see, et kuna see pole SSR, pole teil praegu kuvada kasutajale spetsiifilisi andmeid - see on lihtsalt staatiline (ja mõnevõrra üldine) fail, mis saadetakse otse esimesel taotlusel, nagu see on. Nii et kui teil on kasutaja spetsiifilisi andmeid, saate siin integreerida kaunilt kujundatud skeleti, et näidata kasutajale nende andmete saabumist, et vältida nende pettumust:

On veel üks konks: selle tehnika toimimiseks peab teil ikkagi olema puhverserver või midagi sellist, mis suunab kasutaja õigesse faili.

Miks?

Ühelehelise rakendusega peate suunama kõik taotlused juurfaili ja seejärel suunab raamistik kasutaja sisseehitatud marsruutimissüsteemiga. Nii et esimese lehe laadimine on alati sama juurfail.

Renderduseelse lahenduse toimimiseks peate oma puhverserverile ütlema, et mõned marsruudid vajavad konkreetseid faile ja mitte alati juur index.html faili.

Oletame näiteks, et teil on neli marsruuti (/, /about, /jobs ja blog) ja kõigil neil on erinev paigutus. Skeleti kasutajale edastamiseks vajate nelja erinevat HTML-faili, mis seejärel lasevad Reageeri / Eelnev / jne. rehüdreerige see andmetega. Nii et kui suunate kõik need marsruudid juuresse index.html faili, on lehel laadimise ajal ebameeldiv ja ebameeldiv tunne, kusjuures kasutaja näeb vale lehe luustikku, kuni see on laadimise lõpetanud ja paigutuse asendab. Näiteks võib kasutaja näha ainult ühe veeruga kodulehe skeleti, kui ta on palunud Pinteresti-laadse galeriiga teist lehte.

Lahendus on öelda oma puhverserverile, et kõik need neli marsruuti vajavad kindlat faili:

• https://my-website.com → Suunake juur index.html faili
• https://my-website.com/about → Suunamine /about/index.html faili
• https://my-website.com/jobs → Suunamine /jobs/index.html faili
• https://my-website.com/blog → Suunamine /blog/index.html faili

Seetõttu võib see lahendus olla kasulik väikeste rakenduste jaoks - näete, kui valus oleks, kui teil oleks paarsada lehekülge.

Rangelt öeldes pole see kohustuslik nii teha - võite lihtsalt kasutada staatilist faili. Näiteks https://my-website.com/about/ töötab ilma ümbersuunamiseta, kuna see otsib automaatselt index.html selle kataloogis. Kuid vajate seda puhverserverit, kui teil on param-URL-id - https://my-website.com/profile/guillaume peab päringu ümbersuunama /profile/index.html oma paigutusega, sest profile/guillaume/index.html pole olemas ja see käivitab vea 404.

---

Lühidalt öeldes on ülalkirjeldatud renderdamisstrateegiatega mängimisel kolm põhivaadet: laadimisekraan, skelett ja kogu leht, kui see on lõplikult renderdatud.

Sõltuvalt strateegiast kasutame mõnikord kõiki neid kolme vaadet ja mõnikord hüppame otse täielikult renderdatud lehele. Ainult ühel kasutusjuhtumil oleme sunnitud kasutama teistsugust lähenemist:

Meetod	Maandumine (nt /)	Staatiline (nt /about)	Fikseeritud dünaamiline (nt /news)	Parameetriline dünaamiline (nt /users/:user-id)
Kliendi renderdatud	Laadimine → Täis	Laadimine → Täis	Laadimine → Skelett → Täis	Laadimine → Skelett → Täis
Eelnevalt renderdatud	Täis	Täis	Skelett → Täis	HTTP 404 (lehte ei leitud)
Eelnevalt renderdatud puhverserveriga	Täis	Täis	Skelett → Täis	Skelett → Täis
NSV	Täis	Täis	Täis	Täis

Ainult kliendile renderdamist pole sageli piisavalt

Kliendi renderdatud rakendusi peaksime nüüd vältima, sest saame kasutaja jaoks paremini teha. Ja paremaks muutmine on sel juhul sama lihtne kui eelrenderduse lahendus. See on kindlasti ainult kliendirenderduse parandamine ja seda on lihtsam rakendada kui täielikult serveripoolsel renderdatud rakendusel.

SSR / universaalne rakendus võib olla tõesti võimas, kui teil on suur rakendus, millel on palju erinevaid lehti. See võimaldab teie sisul olla sotsiaalse indekseerijaga vesteldes fokuseeritud ja asjakohane. See kehtib ka otsingumootorirobotite kohta, mis võtavad saidi järjestamisel nüüd arvesse teie saidi toimivust.

Püsige kursusel järelõppega, kus tutvun SPA muutmisega eelnevalt renderdatud ja SSR versioonideks ning võrdlen nende toimivust.

Seotud: Ülevaade populaarsetest staatiliste saitide generaatoritest

Põhitõdede mõistmine

Mis on kliendipoolne renderdamine?

Kliendipoolne renderdamine võimaldab arendajatel oma veebisaidid Java-brauseris täielikult renderdada. Selle asemel, et marsruudil oleks erinev HTML-leht, loob kliendipoolne renderdatud veebisait iga marsruudi dünaamiliselt otse brauseris. See lähenemine levis, kui JS-i raamistikud muutsid selle hõlpsasti kasutatavaks.

Mis on serveripoolne renderdamine?

Serveripoolne renderdamine võimaldab arendajatel veebi eelnevalt asustada kohandatud kasutajaandmetega otse serveris. Kõiki päringuid on serveris tavaliselt kiirem teha kui nende jaoks täiendavaid brauserite vahelisi edasi-tagasi sõite. Seda tegid arendajad enne kliendipoolset renderdamist.

Mis vahe on kliendipoolsel ja serveripoolsel renderdamisel?

Kliendipoolne renderdamine haldab marsruutimist dünaamiliselt, ilma lehte värskendamata iga kord, kui kasutaja taotleb erinevat marsruuti. Kuid serveripoolne renderdamine suudab veebisaidi mis tahes marsruudi esimesel koormusel kuvada täielikult asustatud lehe, kliendipoolne renderdamine aga kõigepealt tühja lehe.

Mis on eelrenderdus?

Eel renderdamine on kompromiss kliendipoolse ja serveripoolse renderdamise vahel. Igal eelnevalt renderdatud lehel kuvatakse skeleti mall, kui andmed ootavad AJAX / XHR päringutega uuesti vedelikku. Kui leht on tõmmatud, tehakse sisemine marsruutimine dünaamiliselt, et ära kasutada kliendipoolset renderdatud veebisaiti.

Mis on universaalne rakendus?

Universaalne rakendus saadab brauserile andmetega asustatud lehe. Seejärel laadib rakendus oma JavaScripti ja hüdreerib lehte, et saada täielikult kliendipoolne renderdatud rakendus. See lähenemisviis ühendab tänapäeval kasutatavate uusimate tehnikate eelised.