Home-theater-designers
Moderní webové rámce nabízejí mnoho možností, jak doručit web nebo aplikaci ze serveru na klienta. HTML můžete generovat na obou stranách nebo jej předem vykreslit pro vysokorychlostní distribuci prostřednictvím sítě pro doručování obsahu.
Rozhodnutí, jak strukturovat web nebo aplikaci, závisí na několika různých faktorech. Musíte si být vědomi toho, jak budou návštěvníci přistupovat k vašemu webu nebo aplikaci. Měli byste pochopit, zda rychlost načítání záleží více na počátečním načtení nebo následné navigaci. Zvažte také, jak často budete web aktualizovat.
VYTVOŘENÍ VIDEA DNE POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM
Mějte na paměti všechny tyto faktory, abyste zvážili klady a zápory každého vykreslovacího paradigmatu.
Vykreslování webových stránek více způsoby
Vykreslování webové stránky se týká procesu, při kterém se webová stránka zobrazuje ve webovém prohlížeči. Existuje mnoho různých způsobů, jak přistupovat k procesu převodu nezpracovaných dat do formátovaného HTML na obrazovce uživatele.
Každá metoda má své klady a zápory a znalost výhod a nevýhod každé vám pomůže vybrat tu správnou pro váš web.
CSR: Prohlížeč přebírá zodpovědnost
CSR je zkratka pro Client Side Rendering. Když vykreslíte klientskou stranu aplikace nebo webu, server předá jen malý nebo žádný HTML kromě malého kousku standardního kódu. Stránka si poté vyžádá od serveru všechna potřebná data po události načtení stránky prostřednictvím požadavků AJAX.
Když aplikace nebo stránka vykreslí stranu klienta, server předá klientovi skript, který vygeneruje HTML v prohlížeči klienta. To umožňuje jednostránkové aplikace, které při interakci s nimi neobnovují prohlížeč.
Aplikace CSR se při navigaci často načítají rychle, ale zpočátku se mohou načítat pomalu. Rychlost bude do značné míry záviset na frameworku, který se rozhodnete pro vykreslování, a na tom, kolik dalších knihoven a doplňků použijete. Většina populární moderní frameworky JavaScript zahrnují možnost CSR.
Stránky a aplikace plně vykreslené na straně klienta trpí nemožností přejít přímo na danou stránku pomocí adresy URL. Když se aplikace vykreslená na straně klienta poprvé spustí, bez ohledu na zadanou adresu URL přejde do stejného výchozího bodu.
iphone 12 pro max vs pro
SSR: Vykreslování na centrálním serveru
SSR je zkratka pro Server Side Rendering. Toto je mnohem tradičnější forma vykreslování webových stránek, ve které weby generují HTML na základě šablon a odesílají klientovi směs HTML, šablon stylů a skriptů. Většina nejoblíbenější backendové webové rámce spadají do této kategorie.
Aplikace a weby vykreslené na straně serveru mají obvykle rychlejší počáteční načítání, ale každá následná navigace bude vyžadovat úplné obnovení. To znamená, že to nejenže bude trvat déle, ale vývojáři pracující s SSR budou muset zohlednit správu relací.
Největší výhodou webů a aplikací generovaných SSR je konzistence navigace po cestě. Uživatel, který zadá danou cestu, bude přesměrován přímo na požadovanou stránku. Některé rámce spravují přesměrování uživatelů ze stránky na stránku v rámci aplikace, ale uživatelé nemusí mít zpočátku přístup ke stránce, kterou chtějí.
Mnoho moderních frameworků nabízí smíšená řešení, která začínají tím, že klientovi naservírují serverem vykreslenou stránku. Jakmile se stránka načte, dojde k události známé jako hydratace, při které jsou události skriptu na straně klienta připojeny k ovládacím prvkům stránky. Od této chvíle se klient stará o jakoukoli navigaci.
Smíšená dynamika nabízí uživatelům možnost přejít přímo na libovolnou stránku v aplikaci a přitom stále využívat rychlost a plynulost jednostránkové aplikace. Next.js nabízí několik paradigmat vykreslování , stejně jako Nuxt.js a Sveltekit.
SSG: Minimalizované vykreslování
SSG neboli Static Site Generation obchází potřebu generovat HTML na straně klienta nebo serveru. Místo toho weby a aplikace ve stylu SSG předkompilují každou stránku, kterou by mohly potřebovat, a výsledky předávají do CDN pro rychlé doručení.
Jedná se o extrémně efektivní způsob poskytování webových stránek extrémně rychle. Výsledky jsou obvykle sestaveny do jednoduchých balíčků obsahujících všechny HTML a šablony stylů potřebné pro jednotlivou stránku. Tyto balíčky jsou udržovány co nejkompaktnější, aby bylo zajištěno, že je uživatel obdrží co nejrychleji.
Stránky SSG mají tendenci nabízet výjimečně rychlé rychlosti načítání, přestože vyžadují aktualizaci pro každou navigaci. Hlavní nevýhodou statického webu je však nedostatek flexibility. Vysoce dynamické systémy, jako jsou aplikace sociálních médií nebo složité platformy elektronického obchodování, budou vyžadovat mnohem více změn, než jaké SSG dokáže snadno zvládnout.
Mnoho statických webů bude také vyžadovat větší režii ke změně, protože každou novou změnu bude nutné zkompilovat nezávisle. Díky tomu je vykreslování ve stylu SSG špatnou volbou pro weby, které se rychle mění, jako je digitální obchod s rychle se měnícím inventářem nebo aplikace sociálních médií.
ISR: Od všeho trochu
Snadno nejsložitější typ vykreslování, ale také nejpřínosnější, ISR znamená Incremental Static Regeneration. ISR spojuje rychlost a škálovatelnost staticky generovaných stránek s reaktivitou SSR a aplikací ve stylu CSR.
Když je na stránce nebo v aplikaci ve stylu ISR požadována jakákoli stránka, server nejprve zkontroluje, zda neexistuje verze stránky, jejíž platnost nevypršela. Pokud existuje, server okamžitě zobrazí stránku uloženou v mezipaměti.
Pokud verze stránky v mezipaměti neexistuje nebo od jejího vygenerování uplynulo dost času, server vygeneruje novou verzi. Tato nová verze bude předána klientovi a uložena do mezipaměti pro budoucí použití.
Tento typ vykreslování je složitější na nastavení, ale automatizuje většinu problémů, se kterými se weby SSG běžně setkávají. To umožňuje aplikacím nabízet rychlost i spolehlivost staticky generované aplikace a zároveň automatizovat další režii.
Několik moderních frameworků již nabízí možnost vykreslování ve stylu ISR. Mnoho dalších má podporu pro inkrementální generaci ve vývoji. Většina hlavních frameworků bude brzy podporovat vykreslování ISR, pokud to tak ještě není.
Jaký typ vykreslení je nejlepší?
Existuje několik způsobů, jak vykreslit web nebo aplikaci. Každý z těchto čtyř typů vykreslování má několik variant. Žádný typ vykreslování není ideální pro všechny projekty a jaký typ zvolíte, bude záviset na tom, co je na vašem webu nebo aplikaci nejdůležitější.
Při výběru vykreslovacího paradigmatu pro váš projekt je důležité vzít v úvahu rychlost, jak vaše publikum bude váš projekt používat a jak často se bude web měnit. Toto budou primární principy, které vám pomohou rozhodnout se, jak nejlépe strukturovat váš web nebo aplikaci.