Articles /

Angular Universal v praxi – jak vytvářet jednostránkové aplikace vhodné pro SEO pomocí Angularu

V posledních měsících se hodně mluví o Angularu a o tom, jak jej používat k vytváření klientských aplikací, ale jedna z jeho nejdůležitějších inovací se ve skutečnosti odehrává na serveru.

Jde o technologii, která by mohla pomoci vytvořit zcela nový typ webových aplikací: Angular Universal. Pojďme se o ní dozvědět více! Projdeme si následující témata:

  • Výhody jednostránkových aplikací
  • Proč tedy nepoužíváme jednostránkové aplikace všude?
  • Pochopení důsledků jednostránkové aplikace pro SEO
  • Co je Angular Universal, co umožňuje?
  • Renderování na straně serveru opravdu není jen vykreslování na serveru
  • Demonstrace jednostránkové aplikace vykreslené na straně serveru v akci
  • Předběžné vykreslování v době sestavení – nahrávání předem vykreslených aplikací do Amazon S3
  • Zabijácká funkce Angular Universal: Tento příspěvek je úvodem do aplikace Angular Universal: Dependency Injection
  • Závěry

Tento příspěvek je úvodem do aplikace Angular Universal. Podrobnější návod, který se zabývá jeho použitím v praxi, najdete v tomto příspěvku:

Angular Universal: kompletní praktický průvodce

Výhody single page aplikací

Jednostránkové aplikace jsou tu už nějakou dobu a frameworky jako Angular, React nebo Ember jsou pravděpodobně knihovny pro Javascript, kterým se ve světě Javascriptu věnuje největší pozornost.

Výhody aplikací SPA jsou ve skutečnosti jen jedny

Výhod jednostránkových aplikací je potenciálně mnoho:

  • když se uživatel pohybuje na stránce, nahrazují se pouze její části, což umožňuje plynulejší prostředí
  • po prvním načtení stránky jdou po drátě pouze data, když se uživatel pohybuje v aplikaci: JSON je doručen do prohlížeče a aplikován na šablony HTML přímo v prohlížeči
  • to vede k lepšímu výkonu a otevírá možnost, aby se tyto backendové služby používaly k jiným věcem, protože pouze vracejí data

Můžeme to shrnout do jediné věci:

Aplikace na jedné stránce mohou poskytnout mnohem lepší uživatelský zážitek!

A uživatelský zážitek je ve světě veřejného internetu rozhodující. Existuje řada studií, které nade vší pochybnost dokazují, že se zpožděním stránky velmi rychle roste její pokles a odchod uživatelů.

Pokud se stránka načítá o 200 ms déle, má to potenciálně vysoký dopad na podnikání a prodej (viz tento výzkum společnosti Google). Ještě více to platí pro mobilní zařízení, kde bývají aplikace pomalejší.

Proč tedy SPA nepoužívat všude?

Vzhledem k těmto statistikám a skutečnosti, že SPA poskytují mnohem lepší uživatelský zážitek, proč všichni nepoužívají jednostránkové aplikace na všechno?

Jsou tu už léta a každý web s navigačním systémem by mohl těžit z toho, že je takto postaven.

Pochopení důsledků jednostránkové aplikace pro SEO

Existuje jeden hlavní důvod, proč se jednostránkové aplikace zatím nepoužívají všude (se dvěma samostatnými příčinami):

Jednostránkové aplikace nemají ve vyhledávačích dobrý výkon

Dva důvody jsou:

Vyhledávač musí „odhadnout“, kdy je stránka kompletní

Při načtení jedné stránky uvidí vyhledávač jen velmi málo HTML. Teprve když se spustí rámec MVC, bude stránka skutečně plně vykreslena pomocí dat získaných ze serveru.

Problém spočívá v tom, že vyhledávač musí odhadnout, kdy rámec Javascript dokončí vykreslování stránky, takže existuje riziko indexace neúplného obsahu.

Druhým důvodem, proč SPA nemají u vyhledávačů dobré výsledky, je:

Hluboké odkazy SPA se těžko indexují

Vzhledem k tomu, že prohlížeče nepodporují historii HTML5, založily jednostránkové aplikace své navigační adresy URL na kotvách záložek HTML (adresy URL s #, například /home#section1). Ty vyhledávače nesnadno indexují jako samostatné stránky, existují způsoby, jak to udělat, ale je to otrava a vždy budou potíže s tím, aby se to správně indexovalo, na rozdíl od použití prostého HTML.

Závěr by mohl být takový, že nemá smysl mít co nejsnadněji navigovatelný web, pokud způsob, jakým je vytvořen, brání tomu, aby měl dobré SEO.

Teď dobrá zpráva

Dobrá zpráva je, že žádný z těchto dvou důvodů už není stoprocentní! Google začal lépe indexovat jednostránkové aplikace.

A nedávná depreciace IE9 znamená, že HTML5 History je k dispozici téměř všude, takže používání kotevních URL už není pro SPA potřeba, můžeme prostě používat obyčejné URL (jako /home/section1).

To je skvělá zpráva, ale jsou tu i další vyhledávače, které řídí významnou návštěvnost. Například Baidu řídí více než polovinu návštěvnosti v Číně (aktuálně 1,3 miliardy lidí).

Je tu také stále otázka výkonu: jednostránková aplikace bude pomalejší kvůli velkému množství Javascriptu, které potřebuje, a velké době spouštění, a bude tedy fungovat hůře než řešení založené na HTML.

A to znamená výpadky stránek, tento problém v dohledné době nezmizí, zejména na mobilech. Existuje nějaký způsob, jak mít to nejlepší ze všech světů a získat jak okamžitou navigaci, tak přívětivost pro SEO a vysoký výkon na mobilních zařízeních?

Odpověď zní: Ano, pomocí Angular Universal.

Co je Angular Universal, co umožňuje?

Zjednodušeně řečeno, Angular Universal nám umožňuje vytvářet aplikace, které mají výhody výkonu i zapojení uživatelů jako jednostránkové aplikace v kombinaci se SEO přívětivostí statických stránek.

Renderování na straně serveru opravdu není jen renderování na serveru

Angular Universal má několik dalších funkcí, kromě toho, že poskytuje řešení pro renderování HTML na serveru. Na základě termínu „vykreslování na straně serveru“ bychom si mohli myslet, že to, co Angular Universal dělá, je podobné například šablonovacímu jazyku na straně serveru, jako je Jade. Je v něm však mnohem více funkcí.

S Angular Universal získáte toto počáteční užitečné zatížení HTML vykreslené na serveru, ale také na klientovi spustíte ořezanou verzi Angularu a odtud Angular převezme stránku jako jednostránkovou aplikaci a generuje odtud veškeré HTML na klientovi místo na serveru.

Konečný výsledek, který získáte, je tedy stejný, je to spuštěná jednostránková aplikace, ale protože jste nyní získali počáteční zátěž HTML ze serveru, získáte mnohem lepší dobu spuštění a také plně indexovatelnou aplikaci pro SEO.

Předrenderování v době sestavení – nahrávání předrenderovaných aplikací do Amazon S3

Další možností, kterou Angular Universal otevírá, je předrenderování obsahu, který se v době sestavení často nemění. To bude možné pomocí pluginů Grunt, Gulp nebo Weppack. Takto bude vypadat konfigurace Gulp, která předrenderuje obsah naší aplikace do souboru:

A ten pak jednoduše nahrajeme do kbelíku Amazon S3 pomocí rozhraní Amazon CLI:

Pokud tento kbelík propojíme s distribucí Cloudfront CDN, máme velmi dostupný a škálovatelný web.

Co když uživatel začne se stránkou okamžitě interagovat?“

Mezi okamžikem, kdy je vykresleno a uživateli prezentováno prosté HTML, a okamžikem, kdy se na straně klienta spustí Angular a převezme funkci SPA, existuje počáteční prodleva.

V tomto časovém rámci může uživatel na něco kliknout nebo dokonce začít psát do vyhledávacího pole. To, co Angular Universal umožňuje prostřednictvím své funkce před spuštěním, je zaznamenávat události, které uživatel spouští, a přehrávat je, jakmile se Angular spustí.

Takto bude Angular schopen na tyto události reagovat, například zobrazením výsledků hledání v seznamu Typeahead.

Ale jak to vypadá na serveru z hlediska kódu?

Jak vykreslovat HTML pomocí Angularu na serveru

Způsob, jakým se obsah vykresluje na serveru, je pomocí vykreslovacího jádra Angular Universal Express expressEngine :

K dispozici je také jádro Hapi, pokud místo Express raději používáte Hapi. Chystají se také serverové vykreslovací enginy pro nejrůznější platformy:

Jak začít s Angular Universal?

Nejlepším místem pro začátek je oficiální startér Universal-starter, se startérem získáme běžící aplikaci, která obsahuje Express server s vykreslováním na straně serveru fungující hned po vybalení z krabice.

Inovativní na Angular Universal je jeho jednoduchost použití. Jedním z hlavních konstrukčních prvků Angularu Universal je způsob, jakým používá vstřikování závislostí.

Vývoj vykreslování na straně serveru není jako kódování pouze pro klienta

Většinou chceme, aby naše aplikace dělala na serveru přesně totéž co na klientovi, a to tak, že nebude přímo závislá na rozhraní API prohlížeče.

Realita vývoje vykreslování na straně serveru je taková, že to není vždy možné a některé věci chceme dělat jinak na klientovi a jinak na serveru.

Příklad vykreslování grafu: pravděpodobně chcete zavolat knihovnu třetí strany, která používá SVG. Na serveru ji zavolat nemůžeme, jak ji tedy vykreslíme?“

Další příklad: jak můžeme vykreslit ověřené stránky? Protože obsah závisí na tom, kdo je právě přihlášen.

Použití Dependency Injection k implementaci autentizace

Pro zpracování autentizace je to jeden ze způsobů:

  • Na klientovi chceme identitu uživatele převzít z tokenu dostupného buď v cookie, nebo v lokálním úložišti prohlížeče.

  • na serveru chceme při vykreslování požadavku načíst token identity z hlavičky požadavku HTTP.

Jak mít stejný výstup stránky při přechodu na tuto stránku na klientovi pomocí přechodu směrovače vs. na serveru pomocí obnovení prohlížeče?

Nejprve definujeme rozhraní služby

Prvním krokem je definice rozhraní, které bude služba poskytovat a které je nezávislé na běhovém prostředí:

Poté poskytneme dvě implementace tohoto rozhraní, jednu pro klienta a druhou pro server. Například na serveru není příležitost pro volání metody login, takže vyhodíme chybu:

Naopak na klientovi spustíme zamykací obrazovku Auth0 (knihovna třetí strany určená pouze pro prohlížeče), která poskytne přihlašovací formulář:

Na serveru a na klientovi pak injektujeme různé implementace rozhraní pro stejný injekční token:

A takto můžeme v Angular Universal udělat něco jiného na klientovi a na serveru, a to s využitím kontejneru Angular dependency injection.

Ve skutečnosti je Angular Universal postaven také na tomto pojetí: například způsob vykreslování HTML je takový, že místo injektování vykreslovače DOM při zavádění frameworku se injektuje serverový vykreslovač, který generuje HTML pomocí serializační knihovny parse5 HTML.

Závěry

Stejně jako u každé technologie se výhody vykreslování na straně serveru budou časem vyvíjet. V současné době však vykreslování na straně serveru představuje velkou výhodu pro vytváření aplikací vhodných pro mobilní zařízení a vyhledávače, které mají vysokou míru zapojení uživatelů díky bezproblémové a okamžité navigaci.

Vytváření těchto typů aplikací je dnes jednodušší než kdykoli předtím, a to pomocí softwaru Angular Universal a univerzálního startéru.

Při použití softwaru Angular Universal je díky funkci dependency injection velmi jednoduché udělat na serveru něco trochu jiného než na klientovi, pokud to potřebujeme.

Začínáme s Angularem

Pokud se chcete o Angularu dozvědět více, podívejte se na kurz Angular pro začátečníky:

Další příspěvky o Angularu

Pokud se vám tento příspěvek líbil, zde jsou další oblíbené příspěvky na našem blogu:

  • Angular Router – Jak vytvořit navigační menu pomocí Bootstrapu 4 a vnořených tras
  • Angular Router – rozšířený průvodce, Vyhněte se častým úskalím
  • Komponenty Angular – základy
  • Jak dnes provozovat Angular ve výrobě
  • Jak vytvářet aplikace Angular pomocí pozorovatelných datových služeb – úskalí, kterým je třeba se vyhnout
  • Úvod do formulářů Angular – šablony, Model Driven nebo něco mezi tím
  • Angular ngFor – Naučte se všechny funkce včetně trackBy, proč není jen pro pole ?
  • Angular Universal v praxi – Jak s Angularem vytvářet SEO friendly single page aplikace
  • Jak skutečně funguje detekce změn v Angularu

?

Leave a Reply