Pokud pracujete se SEO roky, možná jste se již setkali se serverem Side Rendering (SSR) jako s jedním z konceptů. Proč se rozhodnout pro vykreslování na straně serveru (SSR) namísto vykreslování na straně klienta?
V této příručce představím koncept Server Side Rendering (SSR), jeho význam v moderním vývoji webu a rozliším mezi Server Side Rendering a Client Side Rendering. Představíme také rámce a knihovny, které podporují vykreslování na straně serveru a jak to dělají.
Table of Contents
Co je vykreslování na straně serveru (SSR)?
Server Side Rendering (SSR) je technika vývoje webu, kde se obsah webové stránky vykresluje na serveru namísto v prohlížeči klienta.
Aby k tomu došlo, server vygeneruje plně vykreslenou stránku HTML, kterou odešle do klientského prohlížeče, což znamená, že je to server, kdo zatěžuje. Prohlížeč obdrží stránku připravenou k zobrazení, což zrychluje počáteční dobu načítání.
Jak funguje vykreslování na straně serveru?
Kdykoli uživatel požádá o webovou stránku, server sestaví veškerý potřebný kód JavaScript, HTML a CSS a poté odešle plně vytvořenou stránku do prohlížeče uživatele.
Prohlížeč jako takový nemusí tvořit stránku od začátku, jak se to stává při vykreslování na straně klienta. SSR vede k rychlému úvodnímu načtení stránky a je také dobré pro SEO.
Vykreslování na straně serveru využívá v zákulisí webové rámce jako Vue.js a Gatsby.js k dynamickému generování plně funkční stránky HTML.
Tyto rámce čerpají data z rozhraní API nebo databází a poté pomocí komponent nebo šablon vytvářejí funkční dokumenty HTML. Jakmile server dokončí vytvoření stránky, odešle ji do klientského prohlížeče bez dalšího zpracování.
Kredit obrázku: reagovatpwa
Takto funguje vykreslování na straně serveru:
- Klient odešle HTTP požadavek: Uživatel zadá adresu do adresního řádku v prohlížeči. Prohlížeč naváže spojení HTTP a odešle požadavek na server.
- Načítání dat: Server načítá data z rozhraní API nebo databáze.
- Předběžné vykreslování: Server zkompiluje všechny požadované komponenty JavaScriptu do statického HTML a odešle tento HTML do klientského prohlížeče.
- Stránka se načte a vykreslí: Klient stáhne a zobrazí HTML ze serveru.
- Hydration: Klient konečně stáhne veškerý JavaScript kód, aby přidal interaktivitu na stránku HTML.
Vykreslování na straně serveru vs. Vykreslování na straně klienta
Vykreslování na straně klienta je opakem vykreslování na straně serveru. Prohlížeč v podstatě vygeneruje HTML dokument, který zobrazí uživatelům. Toto jsou rozdíly mezi těmito dvěma přístupy:
FeatureServer-side vykreslování (SSR)Vykreslování na straně klienta (CSR)Počáteční načítáníRychlé počáteční načítáníMůže být pomalé, protože se spoléhá na načítání na straně klientaUživatelské prostředíVylepšené a vylepšené uživatelské prostředí při první návštěvěMůže to občas vést ke zpomalení uživatelská zkušenost při první interakci, ale zvýšení při dalších návštěvách Přístupnost Veškerý základní obsah je načten pomocí úvodního HTML dokumentu vykresleného na serveruPřístupnost může být problém zejména tam, kde uživatelé zakázali JavaScriptSEO performanceSSR zaškrtne všechna správná políčka pro SEONěkteré vyhledávače jej mohou najít obtížné indexovat některé dynamicky generované stránky na straně klienta Škálovatelnost Je snadné škálovat weby s vysokou návštěvností, které využívají vykreslování na straně serveru Vývojáři musí přijít s dobře promyšleným přístupem ke škálování webů, které využívají vykreslování na straně klienta Zabezpečení Je snadné snížit server -side zranitelnosti při načítání stránek na server. Náchylné k útokům, jako je cross-site scripting (XSS) a dalším zranitelnostem spojeným s vykreslováním na straně klienta.
Výhody vykreslování na straně serveru pro SEO
- Rychlé počáteční načítání: Jak dlouho trvá, než se stránka načte, je jedním z faktorů, které návštěvníci vašeho webu zvažují. SSR umožňuje uživatelům webových stránek vidět plně načtenou HTML stránku téměř okamžitě. Okamžité načítání zkracuje dobu, po kterou uživatel čeká před interakcí s webovou stránkou.
- Rychlý výkon na pomalých zařízeních/sítích: Síť, kterou uživatelé používají pro přístup k vašim webovým stránkám, může být pomalá nebo používají zařízení běžící na ne tak rychlých operačních systémech. Vykreslování na straně serveru znamená, že uživatelská zařízení nemusí spouštět tolik JavaScriptu, což zvyšuje jejich výkon. Takové sítě nebo zařízení již nepotřebují velkou šířku pásma nebo výpočetní výkon k zobrazení načtených HTML stránek.
- Konzistentní uživatelská zkušenost: SSR vám umožňuje vytvořit dobrý první dojem pomocí Time to First Paint (TTFP). Tito uživatelé budou vnímat váš web jako první, když se stránky HTML načítají rychle, díky vykreslování na straně serveru.
- Vylepšené SEO: Vyhledávače jako Google, Bing a YouTube zvažují při hodnocení webových stránek spoustu věcí. Zkontrolují například uživatelskou zkušenost, dobu, kterou lidé tráví na vašich stránkách, a rychlost načítání. SSR vylepšuje všechny tyto oblasti, což znamená, že vaše aplikace bude pravděpodobně mít vyšší hodnocení ve vyhledávačích.
- Snadná manipulace s dynamickým obsahem: Vyhledávače milují dynamický obsah. Díky SSR mohou nyní vývojáři snadno zpracovávat dynamický obsah a také personalizovat/přizpůsobovat obsah na základě uživatelských vstupů a preferencí.
- Škálovatelnost a ukládání do mezipaměti: V SSR provádí počáteční načítání server, což snižuje množství zpracování, které by měl klient zvládnout, a činí jej škálovatelnějším. SSR může také používat mezipaměť na úrovni serveru a doručování obsahu (CDN) ke snížení zatížení serveru a zlepšení výkonu.
Některé různé nástroje a rámce implementují SSR. Některé jsou navrženy pouze pro podporu vykreslování na straně serveru, zatímco jiné jsou vytvořeny pro podporu vykreslování na straně klienta a serveru. Toto jsou některé z nejběžnějších, se kterými budete pravděpodobně komunikovat ve světě vývoje webu:
Vue.js
Vue.js je JavaScript framework pro vytváření uživatelských rozhraní a je postaven na standardním JavaScriptu, HTML a CSS. S tímto rámcem můžete vytvářet jednoduchá a složitá uživatelská rozhraní pomocí jeho komponentového a deklarativního programovacího modelu.
Komponenty Vue ve výchozím nastavení vytvářejí a manipulují s objektovým modelem dokumentu (DOM) v prohlížeči jako výstupem. Tento rámec však také používá SSR k vykreslení těchto komponent do řetězců HTML na serveru a jejich odeslání přímo do prohlížeče. Serverem vykreslená aplikace Vue je považována za „univerzální“, protože většina kódu běží na serveru a klientovi.
React.js
Reagovat je JavaScript knihovna pro vytváření uživatelských rozhraní. Tato knihovna používá programovací model založený na komponentách, kde můžete svou aplikaci rozdělit na malé opakovaně použitelné komponenty. React je také deklarativní, takže kód lze snadno předvídat a ladit.
React je navržen tak, aby ve výchozím nastavení implementoval vykreslování na straně klienta i na straně serveru. Pokud potřebujete implementovat vykreslování na straně serveru v aplikaci React, musíte ji nastavit pomocí aplikačního frameworku Node.js, jako je Express.js. Musíte také aktualizovat své skripty v souboru package.json, abyste zajistili, že se aplikace „spustí“ z expresního serveru.
Gatsby
Gatsby je framework pro tvorbu webových stránek založený na Reactu. Tento open-source framework je navržen tak, aby pomáhal vývojářům vytvářet rychlé webové aplikace. Gatsby se integruje s různými systémy pro správu obsahu, jako je Drupal a WordPress, což usnadňuje načítání dat.
K nastavení potřebujete server Node.js vykreslování na straně serveru na Gatsby. SSR běží na Gatsby Cloud, kde je každý požadavek odeslán pracovnímu procesu ve funkci getServerData. Všechna data z pracovního procesu jsou předána komponentě React, která vrací dokument HTML.
Hranatý
Hranatý je vývojová platforma postavená pomocí TypeScript. Tato platforma má rámec založený na komponentách, který můžete použít k vytváření webových aplikací. Angular můžete použít k vytváření malých aplikací a aplikací na podnikové úrovni.
Stejně jako React, Angular standardně neimplementuje SSR. Svou aplikaci Angular však můžete nastavit tak, aby implementovala vykreslování na straně serveru tím, že ji zkombinujete s Express.js, backendovým rámcem node.js. Angular Universal vám umožňuje vykreslovat komponenty Angular na serveru a zkrátit počáteční dobu načítání.
Jak zkontrolovat, zda web používá SSR nebo CSR
Pokud jste vývojář nebo obchodník, je těžké určit, zda web používá vykreslování na straně serveru nebo klienta, když je navštívíte. Naštěstí si můžete web prohlédnout a určit způsob vykreslování, který používá. Můžeme si prohlédnout naše webové stránky etechblog.cz, abychom to ukázali. Kliknu pravým tlačítkem na libovolnou stránku a poté vyberu ‚Zobrazit zdroj stránky‘.
Pokud vidíte značky jako ,
- , pak máte jistotu, že běží na straně serveru.
- Zvýšená složitost kódu: Implementace vykreslování na straně serveru může vyžadovat další konfiguraci na straně serveru. Takový přístup může vést ke zvýšené kódové základně na straně serveru, což ztěžuje údržbu.
- Zvýšené zatížení serveru: I když jsme zdůraznili, že SSR může zkrátit dobu načítání, může také představovat překážku výkonu v době vysokého provozu. Server je zodpovědný za vykreslování obsahu HTML, což může občas přetížit server nebo dokonce vést k havárii.
Omezení vykreslování na straně serveru
Je vykreslování na straně serveru stejné jako značkování na straně serveru?
Ne. Vykreslování na straně serveru je přístup pro vývoj webu, kdy server odešle plně načtenou stránku HTML do prohlížeče. SSR má zvýšit rychlost počátečního načítání a zlepšit SEO.
Tagování na straně klienta je místo, kde se veškeré analýzy a sledování provádějí na straně serveru. Když jsou tagy zpracovávány na serveru, klientský prohlížeč se již s takovými procesy nemusí zabývat, což zvyšuje bezpečnost a zvyšuje výkon. Přečtěte si o značkování na straně serveru, abyste mu lépe porozuměli.
Závěr
Vykreslování na straně serveru je dobrou volbou pro každého webového vývojáře, který chce zvýšit výkon své aplikace prostřednictvím delší doby načítání a lepší uživatelské zkušenosti.
Na druhou stranu, pokud není SSR dobře implementováno, může být náročné, protože je obtížné udržovat kód. Výhody SSR však daleko převažují nad výzvami, a proto jej mnoho organizací přijímá.
Dále si můžete přečíst o důvodech, proč používat značkování na straně serveru před značkováním na straně klienta.