Viðskiptavinur hlið versl við hlið netþjóna: af hverju það er ekki allt svart og hvítt

Frá því að tíminn rann upp var hefðbundin aðferð til að koma HTML þínum upp á skjá með því að nota vefþjónsendingu. Það var eina leiðin. Þú hlóðst upp .html síðunum þínum á netþjóninn þinn, þá fór netþjóninn og breytti þeim í gagnleg skjöl í vöfrum notenda.

Framleiðsla netþjónanna virkaði mjög vel á þeim tíma, þar sem flestar vefsíður voru aðallega til þess að birta truflanir myndir og texta, með litlu í vegi fyrir gagnvirkni.

Fljótur áfram til dagsins í dag og það er ekki lengur raunin. Þú gætir haldið því fram að vefsíður þessa dagana séu líkari forritum sem þykjast vera vefsíður. Þú getur notað þau til að senda skilaboð, uppfæra upplýsingar á netinu, versla og svo margt fleira. Vefurinn er aðeins ítarlegri en hann var áður.

Svo það er skynsamlegt að flutningur netþjónanna sé hægt og rólega að taka aftur sæti í sívaxandi aðferð til að birta vefsíður á viðskiptavininum.

Svo hvaða aðferð er betri kosturinn? Eins og með flesta hluti í þróun fer það mjög eftir því hvað þú ætlar að gera með vefsíðunni þinni. Þú verður að skilja kosti og galla og ákveður sjálfur hvaða leið hentar þér best.

Hvernig flutningur miðlara virkar

Framleiðsla netþjóns er algengasta aðferðin til að birta upplýsingar á skjánum. Það virkar með því að umbreyta HTML skrám á netþjóninum í nothæfar upplýsingar fyrir vafrann.

Í hvert skipti sem þú heimsækir vefsíðu leggur vafrinn þinn fram á netþjóninn sem inniheldur innihald vefsíðunnar. Beiðnin tekur venjulega aðeins nokkur millisekúndur en það fer að lokum eftir fjölmörgum þáttum:

  • Internethraðinn þinn
  • staðsetningu netþjónsins
  • hversu margir notendur eru að reyna að komast á síðuna
  • og hversu bjartsýni vefsíðan er, svo eitthvað sé nefnt

Þegar beiðninni er lokið vinnur vafrinn þinn aftur til baka fullkomlega HTML og birtir hann á skjánum. Ef þú ákveður að fara á aðra síðu á vefsíðunni mun vafrinn þinn enn og aftur leggja fram aðra beiðni um nýjar upplýsingar. Þetta mun gerast í hvert skipti sem þú heimsækir síðu sem vafrinn þinn er ekki með í skyndiminni útgáfu af.

Það skiptir ekki máli hvort á nýju síðunni séu aðeins nokkur atriði sem eru frábrugðin þessari síðu, vafrinn mun biðja um alla nýju síðuna og mun skila öllu frá grunni.

Tökum sem dæmi þetta HTML skjal sem hefur verið komið fyrir á ímyndaðri netþjóni með HTTP netfangi voorbeeld.testsite.com.



  
    
     Dæmi um vefsíðu 
  
  
    

Vefsíðan mín

    

Þetta er dæmi um nýja vefsíðu mína

     Hlekkur   

Ef þú myndir slá veffang dæmi vefsíðunnar inn í vefslóð ímyndaða vafra þíns, myndi ímyndaða vafrinn þinn leggja fram beiðni til netþjónsins sem notast var við slóðina og búast við því að svar texta yrði sent inn í vafrann. Í þessu tilfelli væri það sem þú myndir sjá sjónrænt vera titill, efnisgrein efnis og krækjan.

Gerðu nú ráð fyrir að þú vildir smella á hlekkinn á myndinni sem inniheldur eftirfarandi kóða.



  
    
     Dæmi um vefsíðu 
  
  
    

Vefsíðan mín

    

Þetta er dæmi um nýja vefsíðu mína

    

Þetta er meira efni frá hinu.html

  

Eini munurinn á fyrri síðu og þessarar er að þessi síða er ekki með hlekk og hefur í staðinn aðra málsgrein. Röksemdafærsla mælt fyrir um að aðeins ætti að láta nýja efnið af hendi og afgangurinn ætti að vera í friði. Því miður, það er ekki hvernig flutningur miðlara virkar. Það sem raunverulega myndi gerast væri að öll nýja vefsíðan yrði gefin upp, og ekki bara nýja efnið.

Þó að þetta virðist ekki vera mikill samningur fyrir þessi tvö dæmi eru flestar vefsíður ekki svona einfaldar. Nútíma vefsíður hafa mörg hundruð línur af kóða og eru miklu flóknari. Ímyndaðu þér nú að vafra um vefsíðuna og þurfa að bíða eftir að hver einasta síða birtist þegar þú vafrar um síðuna. Ef þú hefur einhvern tíma heimsótt WordPress síðu hefurðu séð hversu hægt þeir geta verið. Þetta er ein af ástæðunum.

Á björtu hliðinni er flutningur netþjóna frábært fyrir SEO. Innihald þitt er til staðar áður en þú færð það, svo leitarvélar geta vísitöluð það og skrunað það bara ágætlega. Eitthvað sem er ekki svo með flutning viðskiptavinarins. Að minnsta kosti ekki einfaldlega.

Hvernig flutningur viðskiptavinarins virkar

Þegar verktaki talar um flutning viðskiptavinarins eru þeir að tala um að skila efni í vafranum með JavaScript. Svo í stað þess að fá allt efnið frá HTML skjalinu sjálfu, þá ertu að fá HTML-skjal með berum beinum með JavaScript-skrá sem gerir það sem eftir er af vefnum með vafranum.

Þetta er tiltölulega ný nálgun við flutning vefsíðna og það varð ekki raunverulega vinsælt fyrr en JavaScript bókasöfn fóru að fella það inn í sinn stíl við þróun. Nokkur athyglisverð dæmi eru Vue.js og React.js, sem ég hef skrifað meira um hér.

Þegar þú ferð aftur á fyrri vefsíðu, dæmi.testsite.com, gerðu ráð fyrir að þú hafir nú index.html skrá með eftirfarandi kóðalínum.




  
   Dæmi um vefsíðu 


  
       
     

Þú getur séð strax að það eru nokkrar meiriháttar breytingar á því hvernig index.hmtl virkar þegar það er notað með viðskiptavininum.

Til að byrja með, í stað þess að hafa innihaldið inni í HTML skjalinu, hefur þú gáma div með auðkenni rótar. Þú ert líka með tvo handritsþætti rétt fyrir ofan lokamerkið. Einn sem mun hlaða Vue.js JavaScript bókasafnið og það sem mun hlaða skrá sem kallast app.js.

Þetta er róttækan hátt en að nota vefútgáfu vegna þess að miðlarinn er nú aðeins ábyrgur fyrir því að hlaða beran mínus vefsíðunnar. Aðal ketilplata. Allt annað er meðhöndlað af JavaScript bókasafni við hlið viðskiptavinar, í þessu tilfelli, Vue.js og sérsniðnum JavaScript kóða.

Ef þú myndir leggja fram beiðni á slóðina með aðeins kóðanum hér að ofan fengir þú auða skjá. Það er ekkert að hlaða þar sem það þarf að skila raunverulegu innihaldi með JavaScript.

Til að laga það myndirðu setja eftirfarandi línur með kóða í app.js skrána.

var gögn = {
        titill: „Vefsíðan mín“,
        skilaboð: „Þetta er dæmi um nýja vefsíðu mína“
      }
  Vue.component ('app', {
    sniðmát:
    `
    
    

{{title}}

    

{{message}}

     Link     
    `,     gögn: fall () {       skila gögnum;     },     aðferðir: {       newContent: fall () {         var node = document.createElement ('p');         var textNode = document.createTextNode ('Þetta er meira efni frá hinu.html');         node.appendChild (textNode);         document.getElementById ('meira Innihald'). viðbætirChild (hnút);       }     }   })   nýr Vue ({     el: '#root',   });

Nú ef þú heimsækir slóðina, myndirðu sjá sama innihald og þú notaðir dæmið á þjóninum. Lykilmunurinn er sá að ef þú myndir smella á hlekkinn á síðunni til að hlaða meira efni mun vafrinn ekki leggja fram aðra beiðni til netþjónsins. Þú ert að skila hlutum í vafranum, svo það mun í staðinn nota JavaScript til að hlaða nýja efnið og Vue.js mun sjá til þess að aðeins nýja efnið sé skilað. Allt annað verður látið í friði.

Þetta er miklu hraðar þar sem þú ert aðeins að hlaða mjög lítinn hluta af síðunni til að sækja nýja efnið í stað þess að hlaða alla síðuna.

Það eru þó nokkrar viðskiptabætur með því að nota flutning viðskiptavinarins. Þar sem innihaldið er ekki skilað fyrr en síðunni er hlaðið í vafrann mun SEO fyrir vefsíðuna slá í gegn. Það eru leiðir til að komast í kringum þetta, en það er ekki eins auðvelt og með framendingu netþjónanna.

Annað sem þarf að hafa í huga er að vefsíðan / forritið þitt fær ekki að hlaða fyrr en ÖLL JavaScript er hlaðið niður í vafrann. Sem er skynsamlegt, þar sem það inniheldur allt það efni sem þarf. Ef notendur þínir nota hæga internettengingu gæti það gert upphafshleðslutíma þeirra svolítið langan.

Kostir og gallar hverrar nálgunar

Svo þar hefur þú það. Þetta er helsti munurinn á flutningi netþjónsins og viðskiptavinarhliða. Aðeins þú verktaki getur ákveðið hvaða valkostur er bestur fyrir vefsíðuna þína eða forritið.

Hér að neðan er fljótleg sundurliðun á kostum og göllum fyrir hverja nálgun:

Kostir netþjónsins:

  1. Leitarvélar geta skriðið á síðuna fyrir betri SEO.
  2. Upphafssíðan er hraðari.
  3. Frábært fyrir truflanir staður.

Gallar netþjónsins:

  1. Algengar beiðnir netþjóna.
  2. Almenn hægt útgáfa.
  3. Endurnýjar heila síðu.
  4. Samskipti við ríkur sem ekki eru rík.

Kostir viðskiptavinarins:

  1. Rík samskipti við vefi
  2. Fljótleg vefsíðuskil eftir upphleðslu.
  3. Fínt fyrir vefforrit.
  4. Öflugt úrval af JavaScript bókasöfnum.

Gallar við viðskiptavini:

  1. Lágt SEO ef ekki er útfært á réttan hátt.
  2. Upphafleg álag gæti þurft meiri tíma.
  3. Í flestum tilvikum þarf utanaðkomandi bókasafn.

Ef þú vilt læra meira um Vue.js skaltu skoða VueReactor.com. Þú getur líka heimsótt juanmvega.com til að fylgjast með nýjustu sögunum mínum.