Prikaz klijenta na strani poslužitelja: zašto nije sve crno-bijelo

Od zore vremena, uobičajena metoda za postavljanje vašeg HTML-a na zaslon bila je upotreba prikazivanja na strani poslužitelja. To je bio jedini način. Učitali ste .html stranice na poslužitelj, a zatim je poslužitelj otišao i pretvorio ih u korisne dokumente u preglednicima vaših korisnika.

Prikazivanje na strani poslužitelja i u to je vrijeme izvrsno funkcioniralo, jer je većina web stranica uglavnom bila samo za prikazivanje statičnih slika i teksta, s malo interakcije.

Premotavanje unaprijed do danas i to više nije slučaj. Možete tvrditi da su web stranice danas više poput aplikacija koje se pretvaraju da su web stranice. Pomoću njih možete slati poruke, ažurirati mrežne informacije, kupovati i još mnogo toga. Web je samo puno napredniji nego nekada.

Stoga ima smisla da prikazivanje na strani poslužitelja polako započinje postavljati se na sve veću metodu prikazivanja web stranica na klijentskoj strani.

Pa koja je metoda bolja opcija? Kao i kod većine stvari u razvoju, to stvarno ovisi o tome što planirate raditi sa svojom web lokacijom. Morate razumjeti prednosti i nedostatke, a zatim sami odlučiti koja je ruta najbolja za vas.

Kako funkcionira prikazivanje na poslužitelju

Prikaz na strani poslužitelja najčešći je način prikazivanja informacija na zaslonu. Djeluje pretvaranjem HTML datoteka na poslužitelju u korisne informacije za preglednik.

Kad god posjetite web mjesto, vaš preglednik upućuje zahtjev poslužitelju koji sadrži sadržaj web mjesta. Zahtjev obično traje samo nekoliko milisekundi, ali to u konačnici ovisi o mnoštvu čimbenika:

  • Vaša brzina interneta
  • mjesto poslužitelja
  • koliko korisnika pokušava pristupiti web mjestu
  • i koliko je web stranica optimizirana, da nabrojimo samo neke

Nakon završetka obrade zahtjeva, vaš preglednik vraća u potpunosti prikazani HTML i prikazuje ga na zaslonu. Ako nakon toga odlučite posjetiti drugu stranicu na web mjestu, vaš će preglednik ponovno uputiti novi zahtjev za novim informacijama. To će se dogoditi svaki put kad posjetite stranicu za koju vaš preglednik nema predmemoriranu verziju.

Nije važno ima li nova stranica samo nekoliko stavki koje se razlikuju od trenutne stranice, preglednik će tražiti cijelu novu stranicu i sve će ponovno prikazati od temelja.

Uzmimo za primjer ovaj HTML dokument koji je postavljen na zamišljeni poslužitelj s HTTP adresom od example.testsite.com.

    Example Website   

My Website

This is an example of my new website

Link

Ako biste adresu URL-a primjera upisali u URL svog zamišljenog preglednika, vaš bi zamišljeni preglednik uputio zahtjev poslužitelju koji koristi taj URL i očekivao odgovor nekog teksta koji će se prikazati u pregledniku. U ovom slučaju ono što biste vizualno vidjeli bili bi naslov, sadržaj odlomka i veza.

Sada pretpostavimo da ste željeli kliknuti vezu na prikazanoj stranici koja sadrži sljedeći kôd.

    Example Website   

My Website

This is an example of my new website

This is some more content from the other.html

Jedina razlika između prethodne stranice i ove je ta što ova stranica nema poveznicu i umjesto toga ima drugi odlomak. Logika bi nalagala da se prikazuje samo novi sadržaj, a ostatak ostavi na miru. Nažalost, tako ne funkcionira prikazivanje na strani poslužitelja. Ono što bi se zapravo dogodilo bilo bi da se prikaže cijela nova stranica, a ne samo novi sadržaj.

Iako se za ova dva primjera ne čine velika stvar, većina web stranica nije tako jednostavna. Moderne web stranice imaju stotine redaka koda i puno su složenije. Sada zamislite da pregledavate web stranicu i morate čekati da se svaka stranica prikaže tijekom navigacije web stranicom. Ako ste ikada posjetili WordPress stranicu, vidjeli ste koliko mogu biti sporo. To je jedan od razloga zašto.

Sa dobre strane, prikazivanje na strani poslužitelja izvrsno je za SEO. Vaš je sadržaj prisutan prije nego što ga nabavite, tako da ga tražilice mogu sasvim dobro indeksirati i indeksirati. Nešto što nije tako s prikazom na strani klijenta. Barem ne jednostavno.

Kako funkcionira prikazivanje na strani klijenta

Kada programeri govore o prikazivanju na strani klijenta, oni govore o prikazivanju sadržaja u pregledniku pomoću JavaScript-a. Dakle, umjesto da sav sadržaj dobijete iz samog HTML dokumenta, dobivate HTML dokument s golim kostima s JavaScript datotekom koja će prikazati ostatak web mjesta pomoću preglednika.

Ovo je relativno nov pristup prikazivanju web stranica i zapravo nije postao popularan sve dok ga JavaScript knjižnice nisu počele ugrađivati ​​u svoj stil razvoja. Neki značajni primjeri su Vue.js i React.js, o kojima sam ovdje više napisao.

Vraćajući se na prethodno web mjesto, example.testsite.compretpostavimo da sada imate datoteku index.html sa sljedećim retcima koda.

    Example Website 

Možete odmah primijetiti da postoje neke velike promjene u načinu rada index.hmtl prilikom prikazivanja pomoću klijenta.

Za početak, umjesto da imate sadržaj unutar HTML datoteke, imate div kontejnera s id-om korijena. Također imate dva elementa skripte točno iznad završne oznake tijela. Ona koja će učitati Vue.js JavaScript knjižnicu i ona koja će učitati datoteku nazvanu app.js.

To se radikalno razlikuje od korištenja prikazivanja na strani poslužitelja, jer je poslužitelj sada odgovoran samo za učitavanje golog minusa web stranice. Glavni kotao. Sve ostalo obrađuje klijentska JavaScript biblioteka, u ovom slučaju Vue.js i prilagođeni JavaScript kôd.

Ako biste zahtjev za URL uputili samo s gornjim kodom, dobio bi prazan zaslon. Nema se što učitati jer stvarni sadržaj treba prikazati pomoću JavaScript-a.

Da biste to popravili, u datoteku app.js smjestite sljedeće retke koda.

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.

Client-side pros:

  1. Rich site interactions
  2. Fast website rendering after the initial load.
  3. Great for web applications.
  4. Robust selection of JavaScript libraries.

Client-side cons:

  1. Low SEO if not implemented correctly.
  2. Initial load might require more time.
  3. In most cases, requires an external library.

If you want to learn more about Vue.js, check out my website at juanmvega.com for videos and articles!