Isomorphic (universal) JavaScript umožňuje renderovat React a další frameworky na serveru i klientu. Proč na tom záleží pro SEO, výkon a user experience.
Problém single-page aplikací¶
SPA frameworky (Angular, React, Ember) přesunuly rendering do prohlížeče. Výhoda je plynulá interakce, ale nevýhody jsou značné:
- SEO** — crawlery nevidí obsah renderovaný JavaScriptem
- Výkon** — uživatel vidí prázdnou stránku, dokud se nestáhne a nespustí JS
- Social sharing** — Facebook/Twitter boty nečtou JavaScript
Isomorphic JavaScript řeší všechny tyto problémy.
Server-side rendering s React¶
React je ideální pro isomorphic přístup — renderToString() generuje HTML na serveru:
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var App = require('./components/App');
app.get('*', function(req, res) {
var html = ReactDOMServer.renderToString(
React.createElement(App, { url: req.url })
);
res.send('<!DOCTYPE html><html><body><div id="root">'
+ html + '</div><script src="/bundle.js"></script></body></html>');
});
Klient pak „hydratuje“ serverem vygenerované HTML — přidá event listenery bez re-renderingu.
Sdílený kód a routing¶
Isomorphic přístup umožňuje sdílet mezi serverem a klientem:
- Komponenty a šablony
- Routing logiku (React Router funguje na obou stranách)
- Validační pravidla
- API klienty a datové transformace
- Utility funkce
Toto dramaticky snižuje duplicitu kódu a zajišťuje konzistenci.
Výzvy a trade-offs¶
Isomorphic JS není zadarmo:
- Složitější architektura a debugging
- Server musí zvládnout rendering zátěž
- Některé knihovny nefungují na serveru (DOM manipulace)
- Správa stavu mezi serverem a klientem vyžaduje pečlivý design
Pro content-heavy stránky s SEO požadavky je SSR téměř nutnost. Pro interní aplikace za loginem většinou není potřeba.
Závěr: nejlepší z obou světů¶
Isomorphic JavaScript kombinuje výhody server-side renderingu (SEO, rychlý first paint) s interaktivitou SPA. React a Node.js tvoří ideální stack pro tento přístup. Pro veřejné webové aplikace doporučujeme SSR jako výchozí strategii.
Potřebujete pomoc s implementací?
Naši experti vám pomohou s návrhem, implementací i provozem. Od architektury po produkci.
Kontaktujte nás