Kliento ir serverio atvaizdavimas: kodėl ne viskas juoda ir balta

Nuo laiko aušros įprastas būdas patekti į HTML ekrane buvo naudoti serverio atvaizdavimą. Tai buvo vienintelis būdas. Įkėlėte savo .html puslapius į savo serverį, tada jūsų serveris nuėjo ir pavertė juos naudingais dokumentais jūsų vartotojų naršyklėse.

Serverio pusės perteikimas tuo metu taip pat veikė puikiai, nes dauguma tinklalapių daugiausia buvo skirti tik statiniams vaizdams ir tekstui rodyti, o interaktyvumas buvo mažas.

Greitai pirmyn į šiandieną ir taip nebėra. Galima teigti, kad šių dienų svetainės yra labiau panašios į programas, apsimetančias svetainėmis. Jomis galite siųsti pranešimus, atnaujinti informaciją internete, apsipirkti ir dar daugiau. Žiniatinklis yra tik daug pažangesnis nei anksčiau.

Taigi logiška, kad serverio atvaizdavimas pamažu pradeda žlugdyti vis didėjantį tinklalapių atvaizdavimo metodą kliento pusėje.

Taigi, kuris metodas yra geresnis pasirinkimas? Kaip ir daugelio dalykų kūrimo metu, tai tikrai priklauso nuo to, ką ketinate daryti su savo svetaine. Turite suprasti „už“ ir „prieš“, tada patys nuspręsti, kuris maršrutas jums tinkamiausias.

Kaip veikia atvaizdavimas serverio pusėje

Serverio pusės atvaizdavimas yra labiausiai paplitęs informacijos rodymo ekrane metodas. Tai veikia konvertuojant HTML failus serveryje į naršyklės informaciją.

Kiekvieną kartą, kai lankotės svetainėje, jūsų naršyklė pateikia užklausą serveriui, kuriame yra svetainės turinys. Užklausa paprastai trunka tik kelias milisekundes, tačiau tai galiausiai priklauso nuo daugybės veiksnių:

  • Jūsų interneto greitis
  • serverio vieta
  • kiek vartotojų bando pasiekti svetainę
  • ir kaip optimizuota svetainė, jei norėčiau paminėti keletą

Kai užklausa bus apdorota, jūsų naršyklė atgaus visiškai pateiktą HTML ir parodys ją ekrane. Jei nuspręsite apsilankyti kitame svetainės puslapyje, jūsų naršyklė dar kartą pateiks naujos informacijos užklausą. Tai nutiks kiekvieną kartą, kai lankysitės puslapyje, kurio naršyklėje nėra talpyklos versijos.

Nesvarbu, ar naujame puslapyje yra tik keli elementai, kurie skiriasi nuo dabartinio puslapio, naršyklė paprašys viso naujo puslapio ir pateiks viską iš naujo.

Paimkime, pavyzdžiui, šį HTML dokumentą, kuris buvo įdėtas į įsivaizduojamą serverį, kurio HTTP adresas yra example.testsite.com.

    Example Website   

My Website

This is an example of my new website

Link

Jei įvedate svetainės pavyzdžio adresą į savo įsivaizduojamos naršyklės URL, jūsų įsivaizduojama naršyklė pateikia užklausą serveriui, kurį naudoja tas URL, ir tikisi, kad naršyklėje bus pateiktas tam tikro teksto atsakymas. Šiuo atveju vizualiai matytumėte pavadinimą, pastraipos turinį ir nuorodą.

Tarkime, kad norėjote spustelėti nuorodą iš pateikto puslapio, kuriame yra šis kodas.

    Example Website   

My Website

This is an example of my new website

This is some more content from the other.html

Vienintelis skirtumas tarp ankstesnio ir šio yra tas, kad šiame puslapyje nėra nuorodos, o vietoje to yra dar viena pastraipa. Logika nurodytų, kad turėtų būti pateiktas tik naujas turinys, o likęs liktų vienas. Deja, taip netinka serverio atvaizdavimas. Kas iš tikrųjų nutiktų, būtų pateiktas visas naujas puslapis, o ne tik naujas turinys.

Nors atrodo, kad šie du pavyzdžiai nėra didelis dalykas, dauguma svetainių nėra tokios paprastos. Šiuolaikinėse svetainėse yra šimtai kodo eilučių ir jos yra daug sudėtingesnės. Dabar įsivaizduokite, kaip naršote tinklalapį ir naršydami svetainėje turite laukti, kol kiekvienas puslapis bus pateiktas. Jei kada nors lankėtės „WordPress“ svetainėje, pamatėte, kaip jos gali būti lėtos. Tai yra viena iš priežasčių, kodėl.

Geriausia, kad serverio atvaizdavimas yra puikus SEO. Jūsų turinys yra prieš jį gaunant, todėl paieškos sistemos gali jį indeksuoti ir tikrinti. Kažkas, kas nėra taip, jei pateikiama kliento pusėje. Bent jau ne paprasčiausiai.

Kaip veikia kliento pateikimas

Kai kūrėjai kalba apie kliento pateikimą, jie kalba apie turinio pateikimą naršyklėje naudojant „JavaScript“. Taigi vietoj to, kad gautumėte visą turinį iš paties HTML dokumento, jūs gaunate plika kaulo HTML dokumentą su „JavaScript“ failu, kuris perteiks likusią svetainės dalį naudojant naršyklę.

Tai yra gana naujas požiūris į svetainių atvaizdavimą ir jis iš tikrųjų nepopuliarėjo, kol „JavaScript“ bibliotekos nepradėjo jo įtraukti į savo kūrimo stilių. Keletas žymių pavyzdžių yra „Vue.js“ ir „React.js“, apie kuriuos daugiau parašiau čia.

Grįždami į ankstesnę svetainę, example.testsite.comtarkime, kad dabar turite failą index.html su šiomis kodo eilutėmis.

    Example Website 

Iš karto matote, kad yra keletas esminių „index.hmtl“ veikimo pokyčių, kai jie atliekami naudojant klientą.

Pradedantiesiems, užuot turėdami HTML faile, turite konteinerio div su šaknies ID. Jūs taip pat turite du scenarijaus elementus tiesiai virš baigiamosios kūno žymos. Tas, kuris įkels „Vue.js JavaScript“ biblioteką, ir tas, kuris įkels failą, vadinamą „app.js“.

Tai yra kardinaliai kitaip nei naudojant serverio atvaizdavimą, nes dabar serveris yra atsakingas tik už plikaus minuso svetainės įkėlimą. Pagrindinė katilinė. Visa kita tvarko kliento pusėje esanti „JavaScript“ biblioteka, šiuo atveju „Vue.js“ ir pasirinktinis „JavaScript“ kodas.

Jei pateikėte užklausą URL naudodami tik aukščiau esantį kodą, gausite tuščią ekraną. Nėra nieko įkelti, nes tikrąjį turinį reikia pateikti naudojant „JavaScript“.

Norėdami tai išspręsti, į failą app.js įdėkite šias kodo eilutes.

var data = { title:"My Website", message:"This is an example of my new website" } Vue.component('app', { template: ` 

{{title}}

{{message}}

Link `, data: function() { return data; }, methods:{ newContent: function(){ var node = document.createElement('p'); var textNode = document.createTextNode('This is some more content from the other.html'); node.appendChild(textNode); document.getElementById('moreContent').appendChild(node); } } }) new Vue({ el: '#root', });

Now if you visit the URL, you would see the same content as you did the server-side example. The key difference is that if you were to click on the link the page to load more content, the browser will not make another request to the server. You are rendering items with the browser, so it will instead use JavaScript to load the new content and Vue.js will make sure that only the new content is rendered. Everything else will be left alone.

This is much faster since you are only loading a very small section of the page to fetch the new content, instead of loading the entire page.

There are some trade offs with using client-side rendering, though. Since the content is not rendered until the page is loaded on the browser, SEO for the website will take a hit. There are ways to get around this, but it’s not as easy as it is with server-side rendering.

Another thing to keep in mind is that your website/application won’t be able to load until ALL of the JavaScript is downloaded to the browser. Which makes sense, since it contains all the content that will be needed. If your users are using slow internet connection, it could make their initial loading time a bit long.

The pros and cons of each approach

So there you have it. Those are the main differences between server-side and client-side rendering. Only you the developer can decide which option is best for your website or application.

Below is a quick breakdown of the pros and cons for each approach:

Server-side pros:

  1. Search engines can crawl the site for better SEO.
  2. The initial page load is faster.
  3. Great for static sites.

Server-side cons:

  1. Frequent server requests.
  2. An overall slow page rendering.
  3. Full page reloads.
  4. Non-rich site interactions.

Kliento pusės privalumai:

  1. Turtinga svetainių sąveika
  2. Greitas svetainės pateikimas po pradinio įkėlimo.
  3. Puikiai tinka interneto programoms.
  4. Patikimas „JavaScript“ bibliotekų pasirinkimas.

Kliento pusės trūkumai:

  1. Žemas SEO, jei jis netinkamai įgyvendinamas.
  2. Pradinei apkrovai gali prireikti daugiau laiko.
  3. Daugeliu atvejų reikalinga išorinė biblioteka.

Jei norite sužinoti daugiau apie „Vue.js“, apsilankykite mano svetainėje juanmvega.com, kur rasite vaizdo įrašų ir straipsnių!