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.
<!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