Scris pe

Randare client-side vs server-side: avantaje si dezavantaje

De cand stramosii nostri au inventat internetul, metoda standard pentru ca sa afisezi HTML pe un ecran a fost randarea server-side. Era singura cale. Faceai upload pe server la cateva fisiere html, apoi serverul era responsabil ca sa transforme aceste fisiere in documente pe care browserele le pot citi. Randarea server-side functiona foarte bine la acel moment pentru ca majoritatea paginilor web erau statice si afisau doar un text si cateva imagini, cu foarte putina interactivitate. Revenim in zilele noastre, lucrurile s-au schimbat. Se poate spune ca foarte multe website-uri astazi sunt defapt aplicatii care “se prefac” ca sunt website-uri. Le poti folosi pentru comunicarea cu prietenii, sa actualizezi informatii online, sa faci cumparaturi si domeniile sunt practic nelimitate. Internet-ul este mult mai avansat decat acum 5-10 ani sai chiar mai mult. Avand in vedere contextul actual, randarea server-side incepe sa fie tot mai des inlocuita de randarea paginilor client-side. Deci, care este cea mai buna optiune? Ca majoritatea lucrurilor in development, nu este asa de simplu. Depinde defapt foarte mult de ce planuiesti sa faci cu website-ul tau. Trebuie sa intelegi avantajele dar si dezavantajele apoi sa decizi pentru tine care ruta este mai buna.

Cum functioneaza randarea server-side

Randarea server-side este, asa cum am zis mai sus, cea mai folosita metoda pentru a arata informatii intr-un browser. Functioneaza transformand fisiere HTML de pe server in informatii croite special pentru browser. De fiecare daca cand vizitezi un site, browser-ul tau face un request la un server care contine defapt site-ul. De obicei acest request este rapid si dureaza doar cateva milisecunde, dar asta depinde de foarte multi factori:
  • Viteza de internet
  • Locatia unde este server-ul
  • Cate useri intra pe site
  • Cat de bine este optimizat site-ul.
Exemplele pot continua. Odata ce s-a terminat request-ul, browser-ul primeste ceea ce se numeste un raspuns, care este defapt HTML-ul randat complet si afisat pe ecran. Daca navighezi pe o alta pagina, se va repeta intregul procedeu si se va creea un nou request si un nou raspuns pentru ca sa se afiseze noua pagina. De fiecare data se repeta acest lucru, in afara de cazul cand exista un cache in browser si se arata pagina din cache-ul local, fara sa se mai faca request la server. Nu conteaza daca pagina noua pe care navighezi are doar cateva chestii schimbate fata de pagina anterioara, browser-ul va cere o pagina noua completa si va face render la toata pagina. Sa luam exemplu aceasta pagina HTML care a fost pusa pe un server imaginar exemplu.test.ro.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplu website</title>
  </head>
  <body>
    <h1>Site-ul meu</h1>
    <p>Acesta este noul meu site.</p>
    <a href="http://exemplu.test.ro/alta_pagina.html.">Link</a>
  </body>
</html>
Daca ai scrie adresa de la site-ul de exmplu intr-un browser, acesta ar face un request la server-ul care e in spatele link-ului and ar astepta un raspuns cu un text pe care il intelege. In acest caz, s-ar afisa titlul, paragraful si link-ul. Acum sa presupunem ca vrei sa dai click pe link si pagina pe care mergi are urmatorul cod:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplu website</title>
  </head>
  <body>
    <h1>Site-ul meu</h1>
    <p>Acesta este noul meu site.</p>
    <p>Acesta este alt paragraf de pe pagina noua<p>
  </body>
</html>
Singura diferenta dintre cele doua pagini este ca prima contine un link pe cand a doua are un paragraf in loc de link. Logica ar spune ca pagina trebuie doar sa schimbe link-ul cu un paragraf cand mergi pe noua pagina. Totusi, randarea server-side nu functioneaza asa. Ce se intampla defapt este ca toata pagina noua va fi incarcata, nu doar continutul nou. Desi pentru exemplul de mai sus asta nu inseamna mare lucru, majoritatea site-urilor nu sunt simple. Site-urile moderne au sute de linii de cod si sunt mult mai complexe. Acum imagineaza-ti ca navighezi pe o pagina si trebuie sa astepti de fiecare data ca pagina sa se randeze pe server. Daca vreodata ai fost pe un site mare care foloseste WordPress, vei vedea ca unele pot sa se incarce destul de incet. Acesta este unul din motive. Majorul avantaj pentru randarea pe server este ca ajuta foarte mult pentru motoarele de cautare. Continutul este prezent inainte sa il primesti, deci Google si alte motoare de cautare stiu sa il indexeze si sa navigheze pe site, ceea ce nu se intampla asa de usor cu validarea client-side.

Cum functioneaza randarea client-side

Cand programatorii vorbeste despre randare client-side, vorbesc in principal de randarea in browser folosind JavaScript. In loc ca sa ia tot continutul din documentul HTML, se ia doar minimul dintr-un fisier HTML care contine un script JS care va randa mai departe tot site-ul folosind browser-ul. Aceasta randare este relativ noua pentru site-uri si nu a devenit populara pana cand nu au aparut librariile JavaScript moderne care fac treaba asta. Putem da exemple aici pe Vue.js si React.js. Mergand inapoi la site-ul nostru de exemplu, sa presupunem ca acum index.html arata asa:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Exemplu website</title>
</head>
<body>
  <div id="root">
    <app></app>
  </div>
  <script src="https://vuejs.org"type="text/javascript"></script>
  <script src="ceva/blabla/app.js"type="text/javascript"></script>
</body>
</html>
Poti vedea din prima ca sunt niste schimbari majore in modul cum arata fisierul folosind validarea client-side. Pentru inceput, in loc sa avem continutul in fisierul HTML, ai doar un div cu id-ul root. Ai si doua elemente noi inainte sa se inchide body-ul. Un element script incarca libraria Vue.js si alta incarca fisierul app.js Aceasta randare este complet diferita de cea server-side pentru ca server-ul este acum responsabil sa incarce minimul site-ului. Schita principala sa zic asa. Toate elementele ramase sunt randate de libraria JavaScript, in cazul nostru, Vue.js. Daca incarci fisierul de mai sus vei vedea un ecran gol. Nu este nimic de incarcat pentru ca restul continutului trebuie randat de JavaScript si Vue. Pentru a repara asta, trebuie sa modificam fisierul app.js sa arate cam asa:
var data = {
        title:"Site-ul meu",
        message:"Acesta este un site de exemplu."
      }
  Vue.component('app', {
    template:
    `
    <div>
    <h1>{{title}}</h1>
    <p id="continutMaiMult">{{message}}</p>
    <a v-on:click='incarcaContinut'>Link</a>
    </div>
    `,
    data: function() {
      return data;
    },
    methods:{
      incarcaContinut: function(){
        var node = document.createElement('p');
        var textNode = document.createTextNode('Acesta este alt paragraf de pe pagina noua');
        node.appendChild(textNode);
        document.getElementById('continutMaiMult').appendChild(node);
      }
    }
  })
  new Vue({
    el: '#root',
  });
Acum daca vizitezi noul URL, vei vedea acelasi continut ca si in varianta server-side. Principala diferenta e ca daca dai click pe link ca sa incarci continutul nou, browser-ul nu va mai face inca un request la server. Se va randa continutul pe browser direct deci va folosi direct JavaScript pentru ca sa incarce noul continut si se va asigura ca doar noul continut este randat. Totul pe langa va fi neschimbat. Acest mod este mult mai rapid pentru ca incarci doar o sectiune mica din pagina pentru ca sa iei continut nou, nu se mai face un request pentru intreaga pagina. Sunt cateva dezavantaje totusi la validarea client-side. Pentru ca pagina nu are continut initial numai cand e incarcata in browser, e mai greu sa faci SEO. Sunt modalitati ca sa indexezi totusi site-ul, dar nu e la fel de simplu ca si la validarea server-side. Un alt lucru care trebuie notat este ca aplicatia/site-ul nu se vor incarca pana TOATE fisierele JavaScript sunt descarcate de browser. Ceea ce e logic, pentru ca aceste fisiere au tot content-ul. Daca utilizatorii au conexiune inceata la internet, incarcarea initiala dureaza ceva mai mult.

Avantajele si dezavantajele la ambele

Am ajuns si aici, dupa ce stii cate ceva din ambele metode. Acestea sunt principalele diferente intre randarea pe server sau pe browser. Numai tu ca developer poti decide care optiune e mai buna pentru site-ul sau aplicatia ta. Mai jos, pe scurt, cateva avantaje si dezavantaje:

Avantaje server-side:

  • Motoarele de cautare indexeaza mai usor site-ul
  • Pagina initiala se incarca mai rapid
  • Cea mai buna metoda pentru pagini statice.

Dezavantaje server-side:

  • Multe request-uri la server
  • Randarea paginii este mai inceata
  • La navigare se reincarca toata pagina
  • Nu este la fel de interactiva pagina

Avantaje client-side:

  • Pagina mai interactiva
  • Dupa prima incarcare initiala, pagina se incarca super rapid
  • Cea mai buna metoda pentru aplicatii web
  • Poti alege multe framework-uri JavaScript

Dezavantaje client-side:

  • SEO scazut daca nu implementezi corect pagina
  • Incarcarea initiala ceva mai lenta
  • In cele mai multe cazuri, ai nevoie de un framework (Vue.js)

Daca vrei sa inveti Vue.js, voi pregati in luna care urmeaza un curs Vue.js pe care il vei putea urmari. Stai pe aproape.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Copyright © 2024 toate drepturile
nu sunt
rezervate. Faceti ce vreti, e o tara libera.
Cred ca nu mai are rost sa zic, dar tema e facuta de mine cu TailwindCSS. Gasesti codul sursa aici.
Inca folosesc WordpPess 🧡. Tema e insa custom Laravel 😎.