Gengivelse på klientsiden versus serversiden: hvorfor det ikke er helt sort og hvidt

Siden tidernes morgen var den konventionelle metode til at få din HTML op på en skærm ved hjælp af gengivelse på serversiden. Det var den eneste måde. Du indlæste dine .html-sider på din server, derefter gik din server og forvandlede dem til nyttige dokumenter i dine brugers browsere.

Gengivelse på serversiden fungerede også godt på det tidspunkt, da de fleste websider for det meste kun var til at vise statiske billeder og tekst, med lidt i vejen for interaktivitet.

Spol frem til i dag, og det er ikke længere tilfældet. Du kan argumentere for, at websteder i disse dage mere ligner applikationer, der foregiver at være websteder. Du kan bruge dem til at sende meddelelser, opdatere onlineoplysninger, shoppe og meget mere. Internettet er bare meget mere avanceret end det plejede at være.

Så det giver mening, at gengivelse på serversiden langsomt begynder at tage en bagsæde til den stadigt voksende metode til gengivelse af websider på klientsiden.

Så hvilken metode er den bedre løsning? Som med de fleste ting under udvikling afhænger det virkelig af, hvad du planlægger at gøre med dit websted. Du skal forstå fordele og ulemper og derefter selv bestemme, hvilken rute der er bedst for dig.

Sådan fungerer gengivelse på serversiden

Gengivelse på serversiden er den mest almindelige metode til visning af information på skærmen. Det fungerer ved at konvertere HTML-filer på serveren til brugbare oplysninger til browseren.

Hver gang du besøger et websted, fremsætter din browser en anmodning til serveren, der indeholder webstedets indhold. Anmodningen tager normalt kun et par millisekunder, men det afhænger i sidste ende af en lang række faktorer:

  • Din internethastighed
  • serverens placering
  • hvor mange brugere der prøver på at få adgang til webstedet
  • og hvor optimeret hjemmesiden er for at nævne nogle få

Når anmodningen er færdigbehandlet, får din browser den fuldt gengivne HTML tilbage og viser den på skærmen. Hvis du derefter beslutter at besøge en anden side på hjemmesiden, vil din browser endnu en gang anmode om de nye oplysninger. Dette vil ske hver gang du besøger en side, som din browser ikke har en cachelagret version af.

Det betyder ikke noget, om den nye side kun har et par emner, der adskiller sig fra den aktuelle side, browseren beder om hele den nye side og gengiver alt fra bunden.

Tag for eksempel dette HTML-dokument, der er placeret på en imaginær server med en HTTP-adresse på example.testsite.com.

    Example Website   

My Website

This is an example of my new website

Link

Hvis du skulle indtaste adressen på eksempletswebstedet i URL'en til din imaginære browser, ville din imaginære browser anmode den server, der blev brugt af denne URL, og forventer, at et svar fra en tekst sendes til browseren. I dette tilfælde ville det, du visuelt ville se, være titlen, afsnitets indhold og linket.

Antag nu, at du ville klikke på linket fra den gengivne side, der indeholder følgende kode.

    Example Website   

My Website

This is an example of my new website

This is some more content from the other.html

Den eneste forskel mellem den forrige side og denne er, at denne side ikke har et link, men i stedet har et andet afsnit. Logik vil diktere, at kun det nye indhold skal gengives, og resten skal være alene. Ak, det er ikke sådan, gengivelse på serversiden fungerer. Hvad der faktisk ville ske, ville være, at hele den nye side blev gengivet og ikke kun det nye indhold.

Selvom det måske ikke virker som en big deal for disse to eksempler, er de fleste websteder ikke så enkle. Moderne websteder har hundredvis af kodelinjer og er meget mere komplekse. Forestil dig nu at surfe på en webside og skulle vente på, at hver side skal gengives, når du navigerer på siden. Hvis du nogensinde har besøgt et WordPress-sted, har du set, hvor langsomt de kan være. Dette er en af ​​grundene til det.

På den lyse side er gengivelse på serversiden fantastisk til SEO. Dit indhold er til stede, før du får det, så søgemaskiner er i stand til at indeksere det og gennemgå det fint. Noget, der ikke er tilfældet med gengivelse på klientsiden. I det mindste ikke blot.

Sådan fungerer gengivelse på klientsiden

Når udviklere taler om gengivelse på klientsiden, taler de om gengivelse af indhold i browseren ved hjælp af JavaScript. Så i stedet for at få alt indholdet fra selve HTML-dokumentet, får du et HTML-dokument med bare knogler med en JavaScript-fil, der gengiver resten af ​​webstedet ved hjælp af browseren.

Dette er en relativt ny tilgang til gengivelse af websteder, og det blev ikke rigtig populært, før JavaScript-biblioteker begyndte at integrere det i deres udviklingsstil. Nogle bemærkelsesværdige eksempler er Vue.js og React.js, som jeg har skrevet mere om her.

Gå tilbage til det forrige websted og example.testsite.comantag, at du nu har en index.html-fil med følgende kodelinjer.

    Example Website 

Du kan straks se, at der er nogle store ændringer i den måde, index.hmtl fungerer, når de gengives ved hjælp af klienten.

Til at begynde med har du i stedet for at have indholdet i HTML-filen en containerdiv med et id til root. Du har også to scriptelementer lige over det afsluttende body-tag. En der vil indlæse Vue.js JavaScript-biblioteket og en der vil indlæse en fil kaldet app.js.

Dette er radikalt anderledes end at bruge gengivelse på serversiden, fordi serveren nu kun er ansvarlig for at indlæse den nøgne minus af hjemmesiden. Den vigtigste kedelplade. Alt andet håndteres af et JavaScript-bibliotek på klientsiden, i dette tilfælde Vue.js og tilpasset JavaScript-kode.

Hvis du skulle stille en anmodning til URL'en med kun koden ovenfor, ville du få en tom skærm. Der er intet at indlæse, da det faktiske indhold skal gengives ved hjælp af JavaScript.

For at rette op på det placerer du følgende kodelinjer i app.js-filen.

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', });

Hvis du nu besøger webadressen, vil du se det samme indhold som eksemplet på serversiden. Hovedforskellen er, at hvis du skulle klikke på linket på siden for at indlæse mere indhold, vil browseren ikke stille en anden anmodning til serveren. Du gengiver elementer med browseren, så det bruger i stedet JavaScript til at indlæse det nye indhold, og Vue.js sørger for, at kun det nye indhold gengives. Alt andet vil være alene.

Dette er meget hurtigere, da du kun indlæser en meget lille del af siden for at hente det nye indhold i stedet for at indlæse hele siden.

Der er dog nogle afvejninger ved at bruge gengivelse på klientsiden. Da indholdet ikke gengives, før siden er indlæst i browseren, vil SEO for webstedet få et hit. Der er måder at komme rundt på dette, men det er ikke så let som med gengivelse på serversiden.

En anden ting at huske på er, at dit websted / din applikation ikke kan indlæses, før ALLE JavaScript er downloadet til browseren. Hvilket giver mening, da det indeholder alt det indhold, der skal bruges. Hvis dine brugere bruger langsom internetforbindelse, kan det gøre deres oprindelige indlæsningstid lidt lang.

Fordele og ulemper ved hver tilgang

Så der har du det. Det er de vigtigste forskelle mellem gengivelse på serversiden og klientsiden. Kun dig udvikleren kan beslutte, hvilken mulighed der er bedst for dit websted eller din applikation.

Nedenfor er en hurtig oversigt over fordele og ulemper ved hver tilgang:

Server-side fordele:

  1. Søgemaskiner kan gennemgå webstedet for bedre SEO.
  2. Den indledende sideindlæsning er hurtigere.
  3. Fantastisk til statiske steder.

Ulemper ved serversiden:

  1. Hyppige serveranmodninger.
  2. En samlet langsom gengivelse af sider.
  3. Hele siden genindlæses.
  4. Ikke-rige webstedsinteraktioner.

Professionelle på klientsiden:

  1. Rige webstedsinteraktioner
  2. Hurtig gengivelse af hjemmesiden efter den indledende indlæsning.
  3. Fantastisk til webapplikationer.
  4. Robust udvælgelse af JavaScript-biblioteker.

Ulemper ved kundesiden:

  1. Lav SEO, hvis den ikke implementeres korrekt.
  2. Indledende belastning kan kræve mere tid.
  3. I de fleste tilfælde kræver det et eksternt bibliotek.

Hvis du vil lære mere om Vue.js, skal du tjekke min hjemmeside på juanmvega.com for videoer og artikler!