Vykreslování na straně klienta vs. na straně serveru: Proč to není všechno černé a bílé

Od úsvitu času byla běžná metoda, jak dostat svůj HTML na obrazovku, pomocí vykreslování na straně serveru. To byl jediný způsob. Načtili jste své stránky .html na svůj server, poté váš server šel a změnil je na užitečné dokumenty v prohlížečích uživatelů.

V té době fungovalo skvěle také serverové vykreslování, protože většina webových stránek byla většinou určena pouze pro zobrazování statických obrázků a textu, s malou interaktivitou.

Rychlý posun do dneška a to už neplatí. Dalo by se namítnout, že webové stránky jsou dnes spíše jako aplikace předstírající, že jsou webové stránky. Můžete je použít k odesílání zpráv, aktualizaci online informací, nakupování a mnoho dalšího. Web je jen mnohem pokročilejší, než tomu bylo dříve.

Má tedy smysl, že vykreslování na straně serveru se pomalu začíná opírat o stále rostoucí metodu vykreslování webových stránek na straně klienta.

Takže která metoda je lepší volbou? Stejně jako u většiny vyvíjených věcí to opravdu záleží na tom, co s vaším webem plánujete. Musíte pochopit klady a zápory a pak se sami rozhodnout, která cesta je pro vás nejlepší.

Jak funguje vykreslování na straně serveru

Vykreslování na straně serveru je nejběžnější metodou zobrazování informací na obrazovce. Funguje tak, že převádí soubory HTML na serveru na použitelné informace pro prohlížeč.

Kdykoli navštívíte web, váš prohlížeč požádá server, který obsahuje jeho obsah. Požadavek obvykle trvá jen několik milisekund, ale to nakonec závisí na mnoha faktorech:

  • Vaše rychlost internetu
  • umístění serveru
  • kolik uživatelů se pokouší získat přístup k webu
  • a jak optimalizovaný web je, abychom jmenovali alespoň některé

Jakmile je zpracování žádosti dokončeno, váš prohlížeč vrátí plně vykreslený HTML a zobrazí jej na obrazovce. Pokud se poté rozhodnete navštívit jinou stránku na webu, váš prohlížeč znovu požádá o nové informace. K tomu dojde pokaždé, když navštívíte stránku, kterou váš prohlížeč nemá v mezipaměti.

Nezáleží na tom, zda nová stránka obsahuje pouze několik položek, které se liší od aktuální stránky, prohlížeč si vyžádá celou novou stránku a vše znovu vykreslí od základu.

Vezměme si například tento dokument HTML, který byl umístěn na imaginárním serveru s adresou HTTP example.testsite.com.



  
    
     Příklad webových stránek 
  
  
    

Můj web

    

Toto je příklad mého nového webu

     Odkaz   

Pokud byste zadali adresu vzorového webu do adresy URL vašeho imaginárního prohlížeče, váš imaginární prohlížeč by požádal server o použití této adresy URL a očekával odpověď nějakého textu, který se do prohlížeče vykreslí. V tomto případě byste vizuálně viděli nadpis, obsah odstavce a odkaz.

Nyní předpokládejme, že jste chtěli kliknout na odkaz na vykreslené stránce, která obsahuje následující kód.



  
    
     Příklad webových stránek 
  
  
    

Můj web

    

Toto je příklad mého nového webu

    

Toto je další obsah z other.html

  

Jediným rozdílem mezi předchozí a touto stránkou je to, že tato stránka nemá odkaz a místo toho má jiný odstavec. Logika by diktovala, že by se měl vykreslit pouze nový obsah a zbytek by měl zůstat sám. Bohužel, takto nefunguje vykreslování na straně serveru. Ve skutečnosti by se stalo, že by byla vykreslena celá nová stránka, nejen nový obsah.

I když se nemusí zdát jako velký problém pro tyto dva příklady, většina webových stránek není tak jednoduchá. Moderní webové stránky mají stovky řádků kódu a jsou mnohem složitější. Nyní si představte, jak procházíte webovou stránku a budete muset čekat na vykreslení každé stránky při navigaci na webu. Pokud jste někdy navštívili web WordPress, viděli jste, jak pomalu mohou být. To je jeden z důvodů, proč.

Z jasného hlediska je vykreslování na straně serveru skvělé pro SEO. Váš obsah je přítomen dříve, než jej získáte, takže vyhledávače jej mohou indexovat a procházet v pořádku. Něco takového není s renderováním na straně klienta. Alespoň ne jednoduše.

Jak funguje vykreslování na straně klienta

Když vývojáři hovoří o vykreslování na straně klienta, mluví o vykreslování obsahu v prohlížeči pomocí JavaScriptu. Takže namísto získávání veškerého obsahu ze samotného dokumentu HTML získáváte dokument HTML holých kostí se souborem JavaScript, který pomocí prohlížeče vykreslí zbytek webu.

Jedná se o relativně nový přístup k vykreslování webových stránek a ve skutečnosti se nestal populárním, dokud jej knihovny jazyka JavaScript nezačaly začleňovat do jejich stylu vývoje. Některé pozoruhodné příklady jsou Vue.js a React.js, o kterých jsem zde psal více.

Vraťte se na předchozí web, example.testsite.com, předpokládejte, že nyní máte soubor index.html s následujícími řádky kódu.




  
   Příklad webových stránek 


  
       
     

Okamžitě vidíte, že při vykreslování pomocí klienta dochází k zásadním změnám ve způsobu, jakým index.hmtl funguje.

Pro začátečníky, místo toho, aby obsah uvnitř souboru HTML, máte kontejner div s id root. Přímo nad koncovou značkou těla máte také dva prvky skriptu. Jeden, který načte knihovnu JavaScript Vue.js, a ten, který načte soubor s názvem app.js.

To je radikálně odlišné od použití vykreslování na straně serveru, protože server je nyní zodpovědný pouze za načtení holé mínus webové stránky. Hlavní varná deska. Vše ostatní je řešeno knihovnou JavaScript na straně klienta, v tomto případě Vue.js, a vlastním kódem JavaScript.

Pokud byste chtěli na adresu URL požádat pouze s výše uvedeným kódem, byla by zobrazena prázdná obrazovka. Není co načíst, protože skutečný obsah musí být vykreslen pomocí JavaScriptu.

Chcete-li to vyřešit, umístěte následující řádky kódu do souboru app.js.

var data = {
        název: „Můj web“,
        message: "Toto je příklad mého nového webu"
      }
  Vue.component ('app', {
    šablona:
    `
    
    

{{title}}

    

{{message}}

     Odkaz     
    `,     data: function () {       návratové údaje;     },     metody:{       newContent: function () {         var node = document.createElement ('p');         var textNode = document.createTextNode ('Toto je nějaký další obsah z other.html');         node.appendChild (textNode);         document.getElementById ('moreContent'). appendChild (node);       }     }   })   nová Vue ({     el: '#root',   });

Nyní, pokud navštívíte adresu URL, uvidíte stejný obsah jako v příkladu na straně serveru. Klíčový rozdíl je v tom, že pokud jste klikli na odkaz na stránce, abyste načíst více obsahu, prohlížeč nevydá na server další požadavek. Vykreslíte položky pomocí prohlížeče, takže místo toho použije JavaScript k načtení nového obsahu a Vue.js zajistí, že bude vykreslen pouze nový obsah. Všechno ostatní zůstane samo.

Je to mnohem rychlejší, protože načítáte pouze velmi malou část stránky, abyste načíst nový obsah, namísto načítání celé stránky.

Existují však určité kompromisy s použitím vykreslování na straně klienta. Vzhledem k tomu, že obsah není vykreslen, dokud není stránka načtena do prohlížeče, bude SEO pro web zasáhnout. Existuje několik způsobů, jak to obejít, ale není to tak snadné jako u vykreslování na straně serveru.

Další věcí, kterou je třeba mít na paměti, je, že se váš web / aplikace nebude moci načíst, dokud se do prohlížeče nestáhne VŠECHNY JavaScript. Což dává smysl, protože obsahuje veškerý potřebný obsah. Pokud vaši uživatelé používají pomalé připojení k internetu, může jejich počáteční doba načítání trochu prodloužit.

Výhody a nevýhody každého přístupu

Takže to máte. To jsou hlavní rozdíly mezi renderováním na straně serveru a na straně klienta. Pouze vy vývojář se může rozhodnout, která možnost je pro váš web nebo aplikaci nejlepší.

Níže je uveden rychlý přehled výhod a nevýhod pro každý přístup:

Výhody na straně serveru:

  1. Vyhledávače mohou procházet web pro lepší SEO.
  2. Počáteční načtení stránky je rychlejší.
  3. Skvělé pro statické weby.

Nevýhody na straně serveru:

  1. Časté požadavky na server.
  2. Celkové pomalé vykreslování stránky.
  3. Načte celou stránku.
  4. Interakce bez bohatých stránek.

Profesionálové na straně klienta:

  1. Bohaté interakce webu
  2. Rychlé vykreslení webové stránky po počátečním načtení.
  3. Skvělé pro webové aplikace.
  4. Robustní výběr knihoven JavaScript.

Nevýhody na straně klienta:

  1. Nízké SEO, pokud není implementováno správně.
  2. Počáteční zatížení může vyžadovat více času.
  3. Ve většině případů vyžaduje externí knihovnu.

Pokud se chcete dozvědět více o Vue.js, podívejte se na VueReactor.com. Můžete také navštívit stránky juanmvega.com a zůstat v obraze se svými nejnovějšími příběhy.