tl;dr
V dnešní době se o vykreslování na straně serveru vede obrovská diskuse. Všichni říkají, že je těžké implementovat a udržovat. Vytvořil jsem Reagovat Zpravodajská webová aplikace se 3 různými přístupy abyste byli schopni porozumět rozdílům ve výkonu a implementaci mezi sebou. Chtěl jsem tuto aplikaci co nejvíce přiblížit případu použití v reálném světě. Použil jsem; React, React-Router, Redux, Node.js a Expresní . Každou aplikaci můžete zkontrolovat z níže uvedených odkazů;
- Jednostránková aplikace bit.ly/spa-react
- Vykreslování na straně serveru (univerzální) bit.ly/ssr-react
- Vykreslování na straně serveru pomocí Redis bit.ly/ssr-cached
PROČ?
Viděl jsem spoustu diskuzí online, zejména na Twitteru, také na konferencích o vykreslování na straně serveru. Vím, že pro React existuje spousta univerzálních vykreslovacích frameworků, ale chtěl jsem si to postavit sám od začátku bez jakéhokoli řešení černé skříňky. Nejprve je však dobré porozumět tomu, co je vykreslování na straně serveru a na straně klienta.
Javascriptová revoluce
Prohlížeče jsou výkonnější než před 5–10 lety. Začali jsme vytvářet celé weby a webové aplikace pomocí JavaScriptu na straně klienta. Tuto metodu jsme začali nazývat „Jednostránková aplikace“ . To nás vede k vytváření více interaktivních webových aplikací aktualizovaných v reálném čase.
S tímto přístupem je však problém, naše původní HTML již neobsahuje všechna data související s touto adresou URL.
Klient-Side Rendering (CSR)
Co je vykreslování na straně klienta? (CSR)
Počáteční kód HTML vykreslený serverem je zástupný symbol a celé uživatelské rozhraní a data se vykreslí v prohlížeči, jakmile se načtou všechny vaše skripty.
Jak funguje vykreslování na straně klienta?
Obecný přehled toho, jak funguje vykreslování na straně klienta
PROS
- Bohaté interakce s webem
- Rychlé vykreslování po počátečním načtení
- Částečné aktualizace v reálném čase
- Levnější hostování a škálování
PROTI
- Problémy se SEO a indexy
- Většinou počáteční trvání načítání bundle.js
- Problémy s výkonem na starých mobilních zařízeních/pomalých sítích
- Prohledávače sociálních médií a problémy se sdílením (SMO)
Server-Side Rendering (SSR)
Co je vykreslování na straně serveru? (SSR)
Pro náš případ použití s Reactem nebo s jakoukoli jinou knihovnou/rámcem Javascriptu; Vykreslování na straně serveru je technika pro vykreslení obvykle pouze jedné stránky aplikace na straně klienta (SPA) na serveru a následné odeslání plně vykreslené stránky do prohlížeče.
Jak funguje vykreslování na straně serveru?
Obecný přehled toho, jak funguje vykreslování na straně serveru
PROS
- Konzistentní SEO
- Výkon, počáteční načtení stránky
- Funguje dobře s prohledávači a platformami sociálních médií (SMO)
PROTI
- Časté požadavky
- Pomalé vykreslování stránky (TTFB — Čas do prvního bajtu)
- Komplexní architektura (pro univerzální přístup)
Jak Google indexuje?
Zmínili jsme se o problémech SEO jednostránkových Javascriptových aplikací. K vyřešení tohoto problému s vykreslováním na straně serveru je důležité pochopit, jak funguje indexový systém Google.
Na relaci JavaScriptu Google I/O 2018 John Mueller a Tom Greenaway trochu objasnili, jak vyhledávač indexuje JavaScript. Dozvěděli jsme se, že existují dvě vlny indexování a takto fungují:
2 vlnový indexovací systém Google
Jak na SSR?
Probrali jsme téměř všechny teoretické části. Zaměřme se na implementační část a na to, jak dosáhneme vykreslování na straně serveru pomocí React.
Metodika
- Počáteční vykreslení na serveru
- Zobrazit plně vytvořený HTML
- Spuštění JS
- React převezme / znovu vykreslí
Výzvy
- JSX na Node.js
- Redux na serveru
- Směrování
- Rehydratace
Zdroj obrázku rehydratace
Webová aplikace Zprávy s React
Vytvořil jsem aplikaci News s React založenou na News API se 3 různými přístupy. Vytvořil jsem svou vlastní implementaci, abych pochopil, jak to funguje pod kapotou. Vlastní konfigurace webpacků mohou být s Create-React-App složité.
Jednostránková aplikace (žlutá)
Klasická jednostránková aplikace.
Ukázka: bit.ly/spa-react
Úložiště: bit.ly/spa-repo
Vykreslování na straně serveru — Univerzální (červená)
Počáteční vykreslení proběhne na serveru (Node.js / Express). Po prvním vykreslení a načtení bundle.js se React rehydratuje a převezme aplikaci. To znamená, že každé kliknutí po prvním načtení bude řešeno React-Routerem a bude fungovat jako jednostránková aplikace. Pokud zkontrolujete zdrojový kód, uvidíte kompletní dom-strom se všemi daty v něm. Pokud obnovíte stejnou stránku nebo stisknete Enter na řádku URL, aktuální stránku zpracuje server.
Ukázka: bit.ly/ssr-react
Úložiště: bit.ly/ssr-repo
Vykreslování na straně serveru pomocí Redis (modrá)
Funguje téměř stejně s verzí na straně serveru. Pokusil jsem se uložit výsledek HTML do mezipaměti těsně před odesláním do prohlížeče, abych viděl zlepšení výkonu. Takže první odpověď ze serveru bude uložena v mezipaměti na Redis pro určitou URL, druhá odpověď přijde z paměti. Chcete-li to skutečně vyzkoušet, můžete zadat adresu URL, zkopírovat tuto adresu URL a navštívit ji znovu v anonymním režimu nebo v jiném prohlížeči.
Ukázka: bit.ly/ssr-cached
Srovnání výkonu
Nejprve jsem si chtěl ověřit, zda bude Google schopen indexovat mou univerzální aplikaci. Jak můžete vidět níže, bylo to vidět veškerý obsah stránky bez problémů. To také znamená, že prohledávače sociálních médií také může bez problémů procházet obsah mé stránky.
Kontrola indexu Google Search Console pro vykreslování na straně serveru
Můj druhý test byl o výkonu. Provedl jsem několik výkonnostních testů pomocí nástroje Lighthouse a WepageTest.
Porovnání zatížení počítače
Jak SSR svítí v podmínkách pomalé sítě, můžeme vidět ve videu níže.
Porovnání mobilních zařízení Moto G4 — Chrome — Pomalá síť
Testy majáku
Jednostránková aplikace — Výsledek Lighthouse
Aplikace vykreslování na straně serveru — Výsledek Lighthouse
Porovnání výsledků
Mějte na paměti, že všechny tyto testy proběhly bez velkého zatížení. Takže v podmínkách reálného světa se výsledky mohou změnit.
Závěr
Při vývoji těchto aplikací jsem si opravdu užil a hodně se naučil. O části kódu jsem toho moc nezmínil, ale vše, co můžete zkontrolovat implementace na úložištích GitHub. Měl bych zmínit, že tyto implementace jsou pouze pro ověření konceptu tak daleko od kvality výroby.
Zatím mohu říci, že vykreslování na straně serveru není kouzelná implementace. Je důležité zkontrolovat, zda to vaše firma skutečně potřebuje nebo ne. Níže se můžete podívat na můj názorný seznam rozhodnutí.
Kdy používat jednostránkové aplikace?
- Bohaté interakce s webem
- Síť je rychlá
- Minimální náklady na server
- Hlavní skripty jsou malé nebo líně načítané/rozdělené
- Aktualizace v reálném čase / částečné aktualizace
Kdy použít vykreslování na straně serveru (univerzální)?
- SEO je důležité
- Síť je pomalá
- Dostatek prostředků serveru
- Hlavní skripty jsou velké a načítají se pomalu
- Sdílení na sociálních sítích je důležité
Další čtení
Vykreslování na webu | Web | Google Developers
Případová studie výkonu webu Netflix
https://github.com/brillout/awesome-universal-rendering