Kliendipoolne vs serveripoolne renderdamine: miks pole see kõik mustvalge

Alates aegade algusest oli HTML-i kuvamiseks tavapärane meetod serveripoolse renderdamise kasutamine. See oli ainus viis. Laadisite oma serverisse .html-lehed, seejärel teie server läks ja muutis need teie kasutajate brauserites kasulikeks dokumentideks.

Ka serveripoolne renderdamine töötas sel ajal suurepäraselt, kuna enamus veebisaite olid enamasti mõeldud ainult staatiliste piltide ja teksti kuvamiseks, vähe interaktiivsusega.

Kiire edasiandmine tänaseni ja see pole enam nii. Võiksite väita, et tänapäeval sarnanevad veebisaidid pigem veebisaitidele pretendeerivate rakendustega. Saate neid kasutada sõnumite saatmiseks, veebiteabe värskendamiseks, ostlemiseks ja muuks. Veeb on lihtsalt palju arenenum kui vanasti.

Seega on mõistlik, et serveripoolne renderdamine hakkab tasapisi kliendi poolel üha kasvavale veebilehtede renderdamise meetodile tugiteenuseid pakkuma.

Milline meetod on parem valik? Nagu enamiku arenduses olevate asjade puhul, sõltub see tõesti sellest, mida plaanite oma veebisaidiga teha. Peate mõistma plusse ja miinuseid, seejärel otsustage ise, milline marsruut on teie jaoks parim.

Kuidas serveripoolne renderdamine töötab?

Serveripoolne renderdamine on kõige levinum meetod ekraanil teabe kuvamiseks. See toimib teisendades serveris olevad HTML-failid brauseri jaoks kasutatavaks teabeks.

Kui külastate mõnda veebisaiti, esitab teie brauser serverile päringu, mis sisaldab veebisaidi sisu. Taotlus võtab tavaliselt vaid mõne millisekundi, kuid see sõltub lõpuks paljudest teguritest:

  • Teie Interneti-kiirus
  • serveri asukoht
  • kui palju kasutajaid proovib saidile juurde pääseda
  • ja kui palju on näiteks veebisaiti optimeeritud

Kui päringu töötlemine on lõpetatud, saab teie brauser täielikult renderdatud HTML-i tagasi ja kuvab selle ekraanil. Kui otsustate seejärel külastada mõnda muud veebisaidi lehte, taotleb teie brauser taas uut teavet. See juhtub iga kord, kui külastate lehte, mille brauseril pole vahemällu salvestatud versiooni.

Pole tähtis, kas uuel lehel on ainult mõned üksused, mis erinevad praegusest lehest, küsib brauser kogu uue lehe ja muudab kõik maapinnast uuesti.

Võtame näiteks selle HTML-dokumendi, mis on paigutatud kujuteldavasse serverisse HTTP-aadressiga example.testsite.com.



  
    
     Veebisaidi näide 
  
  
    

Minu veebisait

    

See on näide minu uuest veebisaidist

     Link   

Kui kirjutaksite näidisveebisaidi oma kujutletava brauseri URL-i, esitab teie kujuteldav brauser selle URL-i kasutatavale serverile päringu ja eeldab, et brauserile kuvatakse mingi teksti vastus. Sel juhul näeksite visuaalselt pealkirja, lõigu sisu ja linki.

Nüüd oletame, et soovisite klõpsata renderdatud lehe lingil, mis sisaldab järgmist koodi.



  
    
     Veebisaidi näide 
  
  
    

Minu veebisait

    

See on näide minu uuest veebisaidist

    

See on veel mõni sisu saidilt other.html

  

Ainus erinevus eelmise lehe ja selle vahel on see, et sellel lehel pole linki ja selle asemel on sellel teine ​​lõik. Loogika dikteeriks, et renderdada tuleks ainult uus sisu ja ülejäänud tuleks jätta rahule. Kahjuks serveripoolne renderdamine ei toimi nii. Tegelikult juhtuks see, et renderdatakse kogu uus leht, mitte ainult uus sisu.

Ehkki nende kahe näite puhul ei pruugi see tunduda suur asi, pole enamik veebisaite nii lihtne. Kaasaegsetel veebisaitidel on sadu koodiridu ja need on palju keerukamad. Kujutage nüüd ette, et sirvite mõnda veebilehte ja peate saidil navigeerides ootama, kuni iga leht renderdatakse. Kui olete kunagi WordPressi saiti külastanud, olete näinud, kui aeglased need võivad olla. See on üks põhjusi, miks.

Eredalt vaadates on serveripoolne renderdamine SEO jaoks suurepärane. Teie sisu on olemas enne selle hankimist, nii et otsingumootorid saavad seda indekseerida ja indekseerida. Midagi sellist, mis pole kliendipoolse renderdamise puhul nii. Vähemalt mitte lihtsalt.

Kuidas klient-külje renderdamine töötab?

Kui arendajad räägivad kliendipoolsest renderdamisest, räägivad nad brauseri sisu renderdamisest JavaScripti abil. Nii et selle asemel, et kogu sisu kogu HTML-dokumendist endalt saada, saate selle asemel palja luudeta HTML-i JavaScripti faili, mis muudab brauseri abil ülejäänud saidi.

See on suhteliselt uus lähenemisviis veebisaitide renderdamiseks ja see ei muutunud tegelikult populaarseks enne, kui JavaScripti raamatukogud hakkasid seda oma arengustiili sisse viima. Märkimisväärsed näited on Vue.js ja React.js, millest olen siin pikemalt kirjutanud.

Naastes eelmisele veebisaidile, näide.testsite.com, eeldage, et teil on nüüd index.html-fail järgmiste koodiridadega.




  
   Veebisaidi näide 


  
       
     

Kohe näete, et index.hmtl toimimises on kliendi abil renderdamisel suured muudatused.

Alustuseks on selle asemel, et HTML-failis oleks sisu, teil konteineri div, millel on juur ID. Teil on ka kaks skripti elementi otse sulgeva kehasildi kohal. Üks, mis laadib Vue.js JavaScripti teegi ja see, mis laadib faili nimega app.js.

See on radikaalselt erinev kui serveripoolne renderdamine, kuna server vastutab nüüd ainult veebisaidi tühja miinuse laadimise eest. Peakatlamaja. Kõike muud haldab kliendipoolne JavaScripti teek, antud juhul Vue.js ja kohandatud JavaScripti kood.

Kui peaksite esitama URL-ile taotluse ainult ülaltoodud koodiga, kuvatakse tühi ekraan. Midagi pole vaja laadida, kuna tegelik sisu tuleb renderdada JavaScripti abil.

Selle parandamiseks sisestage järgmised koodiridad faili app.js.

var data = {
        pealkiri: "Minu veebisait",
        teade: "See on näide minu uuest veebisaidist"
      }
  Vue.component ('rakendus', {
    mall:
    `
    
    

{{title}}

    

{{message}}

     Link     
    `,     andmed: funktsioon () {       andmed tagasi saata;     },     meetodid: {       newContent: funktsioon () {         var node = document.createElement ('p');         var textNode = document.createTextNode ('See on veel mõni sisu muust.html');         node.appendChild (textNode);         document.getElementById ('moreContent'). appendChild (sõlm);       }     }   })   uus Vue ({     el: '# root',   });

Kui külastate URL-i, näeksite sama sisu nagu serveripoole näites. Peamine erinevus on see, et kui klõpsaksite lehe lingil suurema sisu laadimiseks, ei esita brauser serverile uut taotlust. Pakute üksusi brauseriga, nii et uue sisu laadimiseks kasutab see selle asemel JavaScripti ja Vue.js tagab, et ainult uus sisu renderdatakse. Kõik muu jääb üksi.

See on palju kiirem, kuna kogu sisu laadimise asemel laadite uue sisu toomiseks ainult väga väikese osa lehest.

Kliendipoolse renderdamise kasutamisel on siiski mõned kompromissid. Kuna sisu ei renderdata enne, kui leht on brauserisse laaditud, võtab veebisaidi SEO tabamuse. Selle saavutamiseks on mitmeid viise, kuid see pole nii lihtne kui serveripoolse renderdamise puhul.

Veel tuleb meeles pidada, et teie veebisaiti / rakendust ei saa laadida enne, kui brauserisse on alla laaditud KÕIK JavaScriptid. Mis on mõistlik, kuna see sisaldab kogu vajalikku sisu. Kui teie kasutajad kasutavad aeglast Interneti-ühendust, võib see nende esialgse laadimisaja pisut pikendada.

Iga lähenemisviisi plussid ja miinused

Nii et teil see on. Need on peamised erinevused serveripõhise ja kliendipoolse renderdamise vahel. Ainult teie arendaja saab otsustada, milline valik on teie veebisaidi või rakenduse jaoks parim.

Allpool on toodud iga lähenemisviisi plusside ja miinuste kiire jaotus:

Serveripoolsed plussid:

  1. Otsingumootorid saavad seda saiti parema SEO jaoks üles indekseerida.
  2. Esialgne lehe laadimine on kiirem.
  3. Suurepärane staatiliste saitide jaoks.

Serveripoolsed miinused:

  1. Sagedased serveri päringud.
  2. Üldiselt aeglane lehe renderdamine.
  3. Terve leht laaditakse uuesti.
  4. Mitmekesised saidi koostoimed.

Kliendipoolsed plussid:

  1. Rikkalik saidi koostoime
  2. Veebisaidi kiire renderdamine pärast esialgset laadimist.
  3. Suurepärane veebirakenduste jaoks.
  4. Tugev valik JavaScripti raamatukogusid.

Kliendipoolsed miinused:

  1. Madal SEO, kui seda pole õigesti rakendatud.
  2. Esialgne laadimine võib nõuda rohkem aega.
  3. Enamikul juhtudel on vaja välist teeki.

Kui soovite lisateavet veebisaidi Vue.js kohta, vaadake veebisaiti VueReactor.com. Võite ka külastada juanmvega.com, et olla kursis minu uusimate lugudega.