Ve Forrestu používáme nejen osvědčená technologická řešení, ale nebojíme se ani současných technologií, které překotně dospívají. Ve světě JavaScriptu je jednou z nejvýraznějších Next.js. Framework postavený na aktuálně nejúspěšnější javascriptové knihovně React umožňuje vytvářet efektivní, rychlé a elegantní weby. Proto jsme na Nextu postavili frontendové řešení, které jsme úspěšně využili už na několika projektech a plánujeme je dál rozvíjet.
Hlavní výhodou Nextu a důvodem, proč jeho popularita neustále roste, je jeho využívání takzvaného Server Side Renderingu (SSR). Zjednodušeně řečeno jde o “předkreslení” webové stránky používající javascriptový kód na straně webového serveru. SSR není žádná novinka - na internetu se používal už v dávné minulosti. Web byl napsaný třeba pomocí příkazů v jazyce PHP. Webový server, který ho měl na starost, pak na základě požadavku kód zpracoval a poslal uživateli už hotovou stránku. O všechnu práci se tedy staral server, jenže byla často nadbytečná: bez pomoci dalšího softwaru musel server po každém dalším požadavku sestavovat stránku znovu a znovu.
Next.js se svým SSR celý postup vylepšuje z hlediska serveru i uživatele. Je vymyšlený tak, aby uživatel nemusel po každém kliknutí čekat na odezvu serveru, ale aby zároveň celou práci neoddřel jeho počítač či mobil. Uživatel z Nextu dostane nejprve částečně vykreslenou stránku (statické HTML), která se mu zobrazí takřka okamžitě. Až během toho, co se uživatel na stránce orientuje, pošle Next uživateli potřebný JavaScript, který jeho prohlížeč zpracuje a zprovozní tak interaktivní prvky.
Vývoj Next.js je překotný a prakticky co měsíc přichází jeho vývojáři s novými funkcemi. V poslední verzi 9.4 je to třeba technologie Fast Refresh, která nám při kódování webů hodně pomáhá. Každá úprava, kterou v kódu uděláme, se v prohlížeči projeví prakticky okamžitě. Odpadá tak dlouhé čekání na to, až server znova zpracuje celou stránku a prohlížeč ji znova načte.
Aktualizace Nextu samozřejmě neocení jen vývojáři, ale taky uživatelé. Next.js se nedávno zaměřil na to, aby byly javascriptové balíky, které odesílá, rozdrobené na malé kousky, a každý uživatel tak stáhl jen to, co potřebuje. Hodí se to nejen v situacích s pomalým připojením. Samotný “povinný” balík, který Next servíruje vždy, se v poslední době zmenšil o desítky kilobajtů. Next.js se stará i o vhodné načítání dat na pozadí - když víme, že uživatel nějakou stránku webu pravděpodobně navštíví příště, můžeme nastavit, aby se před kliknutím na příslušný odkaz nachystala “do zásoby” a po kliknutí se tak načetla okamžitě.
S bleskovým vývojem Nextu se snažíme neustále držet krok. Jen za poslední rok přibyl nejen zmíněný Fast Refresh, ale celá řada dalších novinek - od efektivnějšího načítání stylů po plně serverové vykreslování statických stránek. Tam, kde to jde, je na našich webech využíváme.
Samotný Next.js je základ našeho frontendového řešení, které napojujeme na CMS platformu Edee.one, na které stavíme e-shopy, weby a intranety. Celý frontendový balík obsahuje řadu dalších komponent: populární veřejně dostupné nástroje jako Jest určený k testování, nebo GraphQL, o kterém jsme psali dříve, i součásti, které si píšeme sami, od formulářových prvků po propojení s Google Tag Managerem.
Výhodou pro nás i klienty je společný základ, na kterém můžeme nové weby stavět. Při tvorbě webu nemusíme začínat “na zelené louce”, ale vycházíme z ověřeného jádra, které můžeme doplňovat o nové prvky. Všechna technologická vylepšení, která v našem Next.js frontendu uděláme, můžeme snadno aplikovat na všechny projekty, kde je frontend nasazen.
Práci s Next.js jsme si poprvé vyzkoušeli na velkém projektu, kterým je aplikace pro správu zaměstnaneckých benefitů Můj Up. Tu neustále rozšiřujeme a novinky, se kterými Next.js přichází, do ní rádi zavádíme.
Na našem frontendovém řešení s Next.js je postavený také intranet, který jsme připravili pro společnost Arriva. Další projekty, které frontend využívají, jsou v přípravě.
Michal Zlatkovský, JavaScript Developer FG Forrest
