Încă din zorii timpului, metoda convențională pentru a afișa codul HTML pe un ecran a fost folosirea redării de pe server. A fost singura cale. V-ați încărcat paginile .html pe serverul dvs., apoi serverul dvs. a mers și le-a transformat în documente utile în browserele utilizatorilor dvs.

Renderizarea pe partea de server a funcționat excelent și la vremea respectivă, deoarece majoritatea paginilor web erau destinate doar afișării de imagini statice și text, cu puține interactivități.

Avansăm până astăzi și nu mai este cazul. Ați putea susține că site-urile web de astăzi seamănă mai mult cu aplicațiile care se prefac că sunt site-uri web. Le puteți folosi pentru a trimite mesaje, actualiza informații online, cumpăra și multe altele. Web-ul este mult mai avansat decât înainte.

Așadar, este logic că redarea de pe server începe să înceapă încet să se retragă la metoda în continuă creștere de redare a paginilor web pe partea clientului.

Deci, ce metodă este cea mai bună opțiune? La fel ca în majoritatea lucrurilor în dezvoltare, depinde într-adevăr de ceea ce intenționați să faceți cu site-ul dvs. web. Trebuie să înțelegeți avantajele și dezavantajele, apoi decideți singuri care este ruta cea mai potrivită pentru dvs.

Cum funcționează redarea pe partea de server

Redarea pe partea de server este cea mai comună metodă de afișare a informațiilor pe ecran. Funcționează prin conversia fișierelor HTML din server în informații utilizabile pentru browser.

ad-banner

Ori de câte ori vizitați un site web, browserul dvs. face o cerere către serverul care conține conținutul site-ului web. Solicitarea durează de obicei doar câteva milisecunde, dar aceasta depinde în cele din urmă de o multitudine de factori:

  • Viteza dvs. de internet
  • locația serverului
  • câți utilizatori încearcă să acceseze site-ul
  • și cât de optimizat este site-ul web, pentru a numi câteva

Odată ce solicitarea este procesată, browserul dvs. recuperează codul HTML complet redat și îl afișează pe ecran. Dacă decideți să vizitați o altă pagină de pe site, browserul dvs. va face din nou o altă solicitare pentru noile informații. Acest lucru se va întâmpla de fiecare dată când vizitați o pagină pe care browserul dvs. nu are o versiune cache.

Nu contează dacă noua pagină are doar câteva elemente care sunt diferite de pagina curentă, browserul va solicita întreaga pagină nouă și va reda totul din nou.

Luați de exemplu acest document HTML care a fost plasat într-un server imaginar cu o adresă HTTP de example.testsite.com.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <a href="http://example.testsite.com/other.html.">Link</a>
  </body>
</html>

Dacă ar fi să tastați adresa site-ului web de exemplu în adresa URL a browserului dvs. imaginar, browserul dvs. imaginar va face o cerere către serverul utilizat de URL-ul respectiv și se așteaptă ca un răspuns de text să fie redat în browser. În acest caz, ceea ce ați vedea vizual ar fi titlul, conținutul paragrafului și linkul.

Acum, presupuneți că ați dorit să faceți clic pe linkul din pagina redată care conține următorul cod.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <p>This is some more content from the other.html</p>
  </body>
</html>

Singura diferență dintre pagina anterioară și aceasta este că această pagină nu are un link și are în schimb un alt paragraf. Logica ar dicta ca numai noul conținut să fie redat, iar restul să fie lăsat în pace. Din păcate, nu așa funcționează redarea de pe server. Ceea ce s-ar întâmpla de fapt ar fi ca întreaga pagină nouă să fie redată și nu doar noul conținut.

Deși s-ar putea să nu pară mare lucru pentru aceste două exemple, majoritatea site-urilor web nu sunt atât de simple. Site-urile web moderne au sute de linii de cod și sunt mult mai complexe. Acum imaginați-vă că navigați pe o pagină web și că trebuie să așteptați ca fiecare pagină să fie redată atunci când navigați pe site. Dacă ați vizitat vreodată un site WordPress, ați văzut cât de lent pot fi. Acesta este unul dintre motivele pentru care.

În ceea ce privește aspectul luminos, randarea pe server este excelentă pentru SEO. Conținutul dvs. este prezent înainte de al obține, astfel încât motoarele de căutare sunt capabile să îl indexeze și să îl acceseze cu crawlere foarte bine. Ceva care nu este așa cu randarea pe partea de client. Cel puțin nu pur și simplu.

Cum funcționează randarea pe partea de client

Când dezvoltatorii vorbesc despre randarea pe partea clientului, vorbesc despre redarea conținutului în browser folosind JavaScript. Deci, în loc să obțineți tot conținutul din documentul HTML în sine, primiți un document HTML cu un fișier JavaScript care va reda restul site-ului folosind browserul.

Aceasta este o abordare relativ nouă pentru redarea site-urilor web și nu a devenit cu adevărat populară până când bibliotecile JavaScript nu au început să o încorporeze în stilul lor de dezvoltare. Câteva exemple notabile sunt Vue.js și React.js, pe care le-am am scris mai multe despre aici.

Revenind la site-ul anterior, example.testsite.com, presupunem că aveți acum un fișier index.html cu următoarele linii de cod.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example Website</title>
</head>
<body>
  <div id="root">
    <app></app>
  </div>
  <script src="https://vuejs.org"type="text/javascript"></script>
  <script src="location/of/app.js"type="text/javascript"></script>
</body>
</html>

Puteți vedea imediat că există câteva modificări majore ale modului în care funcționează index.hmtl atunci când se redă utilizând clientul.

Pentru început, în loc să aveți conținutul în fișierul HTML, aveți un container div cu un ID de root. De asemenea, aveți două elemente de script chiar deasupra etichetei de închidere a corpului. Unul care va încărca biblioteca JavaScript Vue.js și unul care va încărca un fișier numit app.js.

Acest lucru este radical diferit de utilizarea redării pe partea de server, deoarece serverul este acum responsabil numai de încărcarea minusului gol al site-ului web. Placa centrală principală. Orice altceva este gestionat de o bibliotecă JavaScript partea clientului, în acest caz, Vue.js și un cod JavaScript personalizat.

Dacă ar fi să faceți o cerere către adresa URL cu numai codul de mai sus, veți obține un ecran gol. Nu este nimic de încărcat, deoarece conținutul real trebuie redat folosind JavaScript.

Pentru a remedia acest lucru, ați plasa următoarele linii de cod în fișierul app.js.

var data = {
        title:"My Website",
        message:"This is an example of my new website"
      }
  Vue.component('app', {
    template:
    `
    <div>
    <h1>{{title}}</h1>
    <p id="moreContent">{{message}}</p>
    <a v-on:click='newContent'>Link</a>
    </div>
    `,
    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',
  });

Acum, dacă accesați adresa URL, veți vedea același conținut ca și exemplul de pe partea serverului. Diferența esențială este că, dacă ar fi să faceți clic pe linkul paginii pentru a încărca mai mult conținut, browserul nu va mai face o cerere către server. Redați elemente cu browserul, deci acesta va folosi în schimb JavaScript pentru a încărca noul conținut, iar Vue.js se va asigura că numai noul conținut este redat. Orice altceva va fi lăsat singur.

Acest lucru este mult mai rapid, deoarece încărcați doar o secțiune foarte mică a paginii pentru a prelua conținutul nou, în loc să încărcați întreaga pagină.

Cu toate acestea, există unele compromisuri cu utilizarea randării pe partea de client. Deoarece conținutul nu este redat până când pagina nu este încărcată în browser, SEO pentru site-ul web va primi o lovitură. Există modalități de a evita acest lucru, dar nu este la fel de ușor ca și în cazul redării de pe server.

Un alt lucru de reținut este că site-ul / aplicația dvs. nu va fi capabil să se încarce până când TOT JavaScript nu este descărcat în browser. Ceea ce are sens, deoarece conține tot conținutul care va fi necesar. Dacă utilizatorii utilizează o conexiune lentă la internet, timpul de încărcare inițială ar putea să devină puțin mai lung.

Avantajele și dezavantajele fiecărei abordări

Deci, iată-l. Acestea sunt principalele diferențe între randarea pe partea de server și cea pe partea de client. Numai dvs. dezvoltatorul puteți decide care este cea mai bună opțiune pentru site-ul sau aplicația dvs.

Mai jos este o defalcare rapidă a avantajelor și dezavantajelor pentru fiecare abordare:

Profesioniști din partea serverului:

  1. Motoarele de căutare pot accesa cu crawlere site-ul pentru un SEO mai bun.
  2. Încărcarea inițială a paginii este mai rapidă.
  3. Excelent pentru site-uri statice.

Contra de la server:

  1. Cereri frecvente de server.
  2. O redare generală lentă a paginii.
  3. Reîncărcări pagină completă.
  4. Interacțiuni non-bogate pe site.

Profesioniști din partea clientului:

  1. Interacțiuni bogate pe site
  2. Redare rapidă a site-ului web după încărcarea inițială.
  3. Excelent pentru aplicații web.
  4. Selecție robustă a bibliotecilor JavaScript.

Contra clienților:

  1. SEO scăzut dacă nu este implementat corect.
  2. Încărcarea inițială ar putea necesita mai mult timp.
  3. În majoritatea cazurilor, necesită o bibliotecă externă.

Dacă doriți să aflați mai multe despre Vue.js, consultați site-ul meu la juanmvega.com pentru videoclipuri și articole!