React.js (create-react-app) vs Next.js – Ako sa rozhodnúť, ak som začiatočník?

Zhruba pred dva a pol rokmi som v práci dostal zadanie, ktoré obnášalo vytvorenie webovej stránky. V tom čase, ešte ako študent informatiky, som bol fascinovaný novými trendmi. S tvorbou webových stránok som mal nejaké skúsenosti ešte z mojich tínedžerských čias, ale tie zahŕňali tvorenie rozloženia stránky pomocou tabuliek...

React ako rytier na bielom koni

Medzi spolužiakmi, ktorí v tom čase pracovali v spoločnostiach na projektoch z oblasti webového vývoja som často počúval o rôznych technológiach ako sú React, Angular alebo Vue, ktoré vraj posúvajú tvorbu webu na úplne novú úroveň.

Po niekoľkých hodinách samoštúdia a porovnávania som sa nakoniec rozhodol pre React. Hlavnými dôvodmi v tom čase bolo, že mal najväčšiu komunitu. Dlhé predchádzajúce obdobie som v práci pracoval s technológiami, ktoré mali prevažne menšie komunity a problémy som väčšinou musel riešiť študovaním ich zdrojového kódu, čo zaberalo dosť veľa času. Komu sa však chce študovať zdrojový kód, keď je Stack Overflow zvyčajne plný odpovedí na Vaše problémy?

Vítajte vo svete Reactu – možností je mnoho

Okamžite som si začal hľadať články, návody a online kurzy pre používanie reactu. Bol som príjemne prekvapený množstvom obsahu, týkajúceho sa výučby v oblasti Reactu. Jeden z prvých internetových kurzov, na ktorý som natrafil, však začal vytvorením projektu pomocou softvérového rámca Next.js. V tom momente som ostal trochu zaskočený. Chcel som sa totižto začať učiť React a nie nejaký ďalší framework, o ktorom som dovtedy nič nepočul. Po krátkom zhodnotení situácie som sa rozhodol putovať priamo na stránku dokumentácie Reactu (ktorá je mimochodom skvelo spracovaná), kde som natrafil na oficiálne odporúčaný spôsob bootstrapovania novej aplikácie za použitia nástroja create-react-app.

Knižnica (Library) vs softvérový rámec (Framework)

Trochu sa čudujete, čo má znamenať názov tejto podkapitoly? React.js je knižnica a Next.js je softvérový rámec. Mnoho ľudí označuje React ako softvérový rámec, ale nie je tomu tak. Oproti softvérovému rámcu poskytuje knižnica jej používateľom úplnú slobodu vo väčšine aspektov jej používania.

React Vám ponúka škálu nástrojov, pomocou ktorých môžete aplikáciu zostaviť (komponenty, state-management, ošetrovanie chybových stavov, atď.) a je už len na Vás, ako budete s nimi pracovať a ktoré z nich chcete využiť. Samotná knižnica React Vám neponúkne žiadne API pre zväzovanie modulov (module bundling), minifikovanie zdrojového kódu, dokonca ani riešenie routovania (routing) medzi stránkami. Všetko je len na Vás (resp. na ďalších knižniciach, ktoré si k Reactu doinštalujete). Práve preto komunita ľudí zostavená z ľudí pracujúcich na Reacte vo Facebooku a komunity vytvorila softvérový rámec create-react-app, ktorý slúži na odbremenenie (nielen) začiatočníkov od veľkej časti týchto problémov. Create-react-app ponúka sadu skriptov a nástrojov pre jednoduché vytváranie, upravovanie a publikovanie aplikácií napísaných v Reacte.

Na druhej strane Next.js Vám ako softvérový rámec dopredu nalinajkuje spôsob, ktorým budete vytvárať jednotlivé podstránky, akú štruktúru priečinkov a súborov musíte sčasti použiť, ako musíte uložiť Váš globálny state, aby k nemu mali prístup všetky stránky a podobne.

Keďže by bolo nefér porovnávať softvérový rámec s knižnicou a create-react-app je oficiálne odporúčaný spôsob pre vytváranie React aplikácií pre začiatočníkov, tak som sa rozhodol, že zvyšok článku sa budem venovať porovnávaniu práve 2 spomenutých softvérových rámcov. Vzhľadom na tieto rozdiely môžeme uviesť prvé definície:

• Create-react-app – softvérový rámec vyvíjaný spoločnosťou Facebook slúžiaci na vytváranie dynamických client-side-rendering (CSR) a single-page aplikácií.
• Next.js – softvérový rámec, ktorý je (čo sa týka front-end časti) postavený na knižnici React. Next.js vyvíja spoločnosť Vercel (predtým Zeit) a slúži pre tvorbu dynamických server-side-rendering (SSR) aplikácií. V dnešnej dobe je už možné použiť Next.js aj ako static-site-generator (SSG).

Prístupy ovplyvňujúce architektúru webových aplikácií

Všimli ste si tie múdre slovné spojenia, ale nie ste si celkom istí, čo presne znamenajú? V stručnosti Vám ich teraz skúsim popísať. Prístupy, ktoré ovplyvňujú architektúru webových aplikácií je možné rozdeliť do kategórií podľa viacerých kritérií. Prvým je delenie podľa spôsobu renderovania (rendering):

• Client side rendering (CSR) – Celý proces renderovania prebieha v prehliadači klienta. Za týmito aplikáciami nestojí žiadny server, avšak aplikácia môže komunikovať so vzdialeným serverom, napr. prostredníctvom HTTP (REST alebo GraphQL) protokolu. CSR aplikácie majú problém s implementáciou SEO optimalizácie. Crawlery (napr. Google alebo Facebook) nezachytia dynamicky pridané SEO tagy na strane klienta, čo znamená, že ich odignorujú. Ďalšie prístupy tento problém riešiť nemusia.

Obrázok zapožičaný z blogu A Closer Look at Client-Side & Server-Side Rendering.

• Server side rendering (SSR) – Základom pri SSR je server, ktorý pri požiadavke načíta, prichystá a odošle požadované HTML súbory, ktoré sú pripravené na renderovanie. CSS súbory a JavaScript sú následne odosielané asynchrónne. Prehliadač potom postupne a podľa nastavených priorít súbory sťahuje, parsuje a zobrazuje. Okrem toho vie server pracovať aj so súbormi Cookies, ktoré boli prehliadačom pre danú doménu vytvorené. Hlavným rozdielom oproti CSR je, že server sa postará o zostavenie HTML dokumentov, čo pri CSR rieši JavaScript v prehliadači. Jednoduchým príkladom môže byť známy Wordpress, Joomla (a väčšina ďalších CMS, ktoré nie sú označené ako Headless), Django a podobne.

Obrázok zapožičaný z blogu A Closer Look at Client-Side & Server-Side Rendering.

• Static site generation (SSG) - Tento prístup spája to najlepšie z CSR a SSR. Vytváranie výstupných HTML dokumentov webovej stránky prebieha počas procesu zostavenia (build) projektu. Všetky stránky sú teda pri SSG zostavené iba raz. Z toho vyplýva, že používateľ (klient) je od tejto povinnosti odbremenený. Pri SSG je server (generátor) podstatný iba v čase zostavenia a teda nemusí bežať v reálnom čase, ani na verejnej IP adrese, čo značne znižuje náklady na prevádzku stránky. Ďalšie zniženie nákladov na prevádzku prináša výstup statického generátora, ktorý je možné uložiť na jednoduchý file-hosting server. Programátor vďaka tomu môže využiť služby CDN pre jednoduché a veľmi efektívne docielenie cacheovania, čo môže vo finále ešte diametrálne zlepšiť metriky pre dosiahnutie lepšej User Experience (UX), bez nutnosti programovania. SSG so sebou prináša jedno "ALE". Ak vznikne potreba pre zmenu dát, z ktorých SSG nástroj čerpá pri zostavovaní aplikácie, developer musí nanovo zostaviť celú aplikáciu. Táto nevýhoda je najčastejším dôvodom, pre ktorý programátori použijú radšej SSR prístup. Známe SSG nástroje sú napríklad Jekyll, Hugo alebo Gatsby.

Ďalej sa v praxi často stretneme s rozdelením webových stránok na single page a multi page aplikácie:

• Single page aplikácia (SPA) – Hlavným rozpoznávacím znakom single page aplikácií je, že pri prechodoch medzi stránkami aplikácie nie je nutné obnovenie celej stránky (reload). Radšej ako načítanie novej stránky zo servera sa teda za pomoci JavaScriptu dynamicky zmení obsah súčasnej stránky. Väčšina zdrojov je pri SPA stiahnutých zo servera iba raz – pri prvom načítavaní stránky. To znamená, že úvodné načítanie môže trvať dlhšie, ale zmeny stránok sú následne vykonané s minimálnym oneskorením. Príkladom SPA aplikácií sú nová stránka Facebooku alebo Twitter.
• Multi page aplikácia (MPA) - Jedná sa o "tradičný" spôsob tvorenia webových stránok. Tieto aplikácie sú zvyčajne "väčšie" ako SPA, a to z dôvodu väčšej komplexity v pozadí. MPA vyžaduje pri každej zmene obsahu opätovné načítanie celej stránky (napr. pôvodná stránka Facebooku, eBay alebo Amazon).

Ako sa teda predchádzajúce definície vzťahujú na porovnávané softvérové rámce?

• Create-react-app – pri tomto softvérovom rámci pracujeme s client side renderingom (CSR) a vytvárame Single page aplikáciu (SPA).
• Next.js - Pôvodnou myšlienkou a zameraním Nextu bolo vytváranie aplikácií pomocou server side renderingu (SSR). Keďže sa však stále jedná o React, tak je možné využiť taktiež client side rendering (CSR) a v poslednom rade (last but not least!) je možné od verzie 9.3 využiť aj static site generation (SSG) prístup. Next.js využíva kombináciu Multi page a Single page prístupu.
  Používateľ má možnosť zaobaliť obsah stránok využitím súboru _app.js, a následne pomocou modulu next/link je možné prechádzať medzi stránkami SPA štýlom.

Obidva softvérové rámce sú založené na využití Reactu pre tvorbu používateľských prostredí. Prečo by ste teda mali zvážiť použitie Nextu namiesto oficiálnou dokumentáciou odporúčaného create-react-app? Aké sú jeho výhody oproti create-react-app a prečo sa v súčasnosti teší veľkej popularite ako medzi jednotlivými programátormi, tak aj medzi veľkými korporáciami? O tom všetkom sa Vám budem snažiť povedať niečo viac v nasledujúcich riadkoch.

Výhody a nevýhody obidvoch technológií

Pri porovnávaní výhod aj nevýhod obidvoch softvérových rámcov sa pokúsim vyberať iba tie, ktoré sú čiastočne alebo úplne v rozpore s druhou porovnávanou možnosťou. Nebudem teda spomínať skutočnosti ako veľká a aktívna komunita, keďže túto vlastnosť by sme mohli považovať za výhodu obidvoch rámcov. V porovnávaní sa budú často objavovať referencie na architektúry spomínané vyššie.

Výhody create-react-app:

• Ponúka o niečo lepšiu developer experience (DX) ako Next.js – najmä spoľahlivejší fast-refresh.
• Najlepšia možnosť pre začiatočníkov, ktorí sa chcú naučiť React.
• Vytvorenie projektu jedným príkazom – rýchle prototypovanie.
• Jednoduchší deploying – Možnosť nahrať produkčnú verziu aplikácie na jednoduchý file-hosting server.
• Umožňuje vysokú mieru cacheovania pri dobrom nastavení servera alebo nahratí na CDN.

Nevýhody create-react-app:

Framework create-react-app podporuje iba client side rendering (CSR), z čoho vznikajú najmä nasledovné nevýhody:

• Možnosti pre implementovanie SEO optimalizácie značne obmedzené.
• Celý kód sa vykonáva priamo v prehliadači u klienta, čo znamená, že programátor musí dávať pozor na citlivé informácie uložené v premenných prostredia, premenných priamo v kóde alebo prichádzajúcich zo vzdialeného servera.
• Pomalšie počítače a iné zariadenia môžu zaznamenať performance problémy súvisiace s vykonávaním u klienta. Je vhodné využívať code-splitting techniky.

Výhody Next.js:

• Obsahuje takmer všetko, čo budete potrebovať pre vývoj webových aplikácií ľubovoľnej zložitosti.
• Používateľ si môže v závislosti od požiadaviek zvoliť, či požadovaná stránka bude používať server side rendering (SSR, client side rendering (CSR), static site generation (SSG), ba dokonca umožňuje aj inkrementálne statické re-generovanie webových stránok.
  Nepočuli ste ešte o inkrementálnom statickom regenerovaní webových stránok? Určite Vám odporúčam si o tom niečo prečítať.
• Next.js ponúka širokú sadu nástrojov pre meranie a optimalizovanie všetkých dôležitých metrík vitality webových stránok.
  Napríklad nové API pre automatickú optimalizáciu obrázkov, ktoré optimalizuje kvalitu, veľkosť a formát obrázkov podľa potrieb programátorov.
• Jednoduché implementovanie vlastných API endpointov pre komunikáciu s databázou alebo inými vzdialenými službami.
• Pomocou Next.js je možné jednoducho implementovať návrhový vzor Proxy pre "skrývanie" citlivých údajov serverom pred tým, ako sa dostanú do prehliadača Vášho používateľa, čo značne zjednodušuje implementovanie zabezpečenia Vašej aplikácie.
  Tento bod sa stáva výhodou najmä v prípade, ak nemáte prístup k vzdialenému serveru a neviete ošetriť dáta priamo na strane servera.
  Vhodné využitie je napríklad implementovanie funkcionality kontaktného formulára. Pri použití servera nebudú informácie ako API kľúč od emailovej služby alebo súkromný kľúč Recaptcha viditeľné v prehliadači zákazníka.
• Efektívne implementovanie optimalizácie SEO (pri použití SSR alebo SSG).
• Možnosť používať väčšinu balíkov z ekosystému Reactu bez nutnosti dolpnkovej konfigurácie.

Nevýhody Next.js:

• Používateľ si môže pre každú stránku osobitne zvoliť použitie prístupov ako CSR, SSR alebo SSG, Hlavná výhoda "Nextu" je z pohľadu začiatočníka zároveň aj kameňom úrazu, ktorý môže viesť k nesprávnym architektonickým rozhodnutiam.
• Isté implementačné rozhodnutia sú fixne dané a Vy ako programátor s tým nemôžete nič spraviť. Napríklad všetky stránky Vašej aplikácie sa musia nachádzať v priečinku pages/.
• Server, na ktorom má produkčná verzia aplikácie existovať, musí podporovať nodejs. Takéto "hostingy" sú zvyčajne drahšie ako obyčajný file-hosting server, na ktorý je možné nahrať aplikáciu vytvorenú prostredníctvom create-react-app.
  Pokiaľ však vytvárate iba statické stránky alebo používate CSR prístup, tak je možné vytvoriť produkčnú verziu aplikácie pomocou príkazu next export, ktorý Vám umožní nahrať aplikáciu na file-hosting server.
  V tomto prípade však už nebude možné využiť hlavné lákadlá Next-u ako inkrementálne statické re-generovanie alebo server side rendering.
• Nie úplne všetky balíky určené pre React.js budú kompatibilné s Nextom. V praxi som sa však ešte nestretol s prípadom, pri ktorom by neexistovala žiadna alternatíva k balíku, ktorá by podporovala SSR.
• O niečo slabšia developer experience (DX) v porovnaní z create-react-app – najmä fast-refresh nie je vždy práve najrýchlejší.

Ešte stále neviete ako sa rozhodnúť?

V predchádzajúcej sekcii článku boli popísané výhody aj nevýhody obidvoch softvérových rámcov. Túto poslednú sekciu článku by som chcel venovať tým z Vás, ktorí sa dostali až sem, ale ešte stále si nie sú istí, ktorú cestu zvoliť. Poďme si teraz skúsiť zhrnúť prípady, v ktorých si je podľa môjho názoru rozumnejšie zvoliť create-react-app a v ktorých by som siahol po Next.js. Rozhodovanie by som rozdelil do dvoch základných kategórií:

1. Je Vaším cieľom "iba" naučiť sa React?

Pokiaľ je dôvodom, pre ktorý sa chcete naučiť React obohatenie Vášho portfólia skúseností a lepšie uplatnenie sa na pracovnom trhu, tak by som dal určite prednosť softvérovému rámcu create-react-app. Základom bude pre Vás zvyknúť si na koncept vytvárania komponentov, objasniť si state-management a nemusíte sa trápiť ďalšími konceptmi a obmedzeniami Nextu. Ak sa tieto základy naučíte dôsledne, nebude pre Vás prechod na Next.js v prípade potreby žiadnym problémom!

2. Plánujete vlastný projekt?

Dôležité je položiť si tie správne otázky. Jedná sa o interný projekt spoločnosti? Tvoríte administračný panel k nejakému systému? Ak bola Vaša odpoveď áno, tak podľa mňa nie sú výhody, ktoré prináša Next.js pre Vás relevantné a Váš klient aj Vy budete spokojní s create-react-app.

Ak však bude pre Vás dôležitá SEO a získavanie nových zákazníkov prostredníctvom vyhľadávačov, napríklad pri Vašom blogu, personálnej stránke alebo máte za úlohu vytvoriť e-shop, tak bude pre Vás vo väčšine prípadov lepšou voľbou určite Next.js! Pre Next.js by som sa rozhodol aj v prípade, ak bude performance Vašej aplikácie kritickým parametrom. Next.js ponúka širokú sadu nástrojov na meranie a optimalizáciu všetkých dôležitých metrík.

Záver

Vo finále ste to iba Vy, kto rozhodne, ktorou cestou sa vybrať. Obidve softvérové rámce prinášajú svoje pre a proti, ale myslím si, že akokoľvek sa rozhodnete, nemôžete urobiť chybu. Ak ste začiatočník, tak Vám na učenie sa Reactu vrelo odporúčam jej naozaj skvelú dokumentáciu, ktorá mi v mojich začiatkoch umožnila porozumieť základným konceptom knižnice React.

Ja dúfam, že sa Vám tento článok páčil. Ak áno, tak ho prosím nezabudnite zdielať a ak Vás zaujíma niečo viac alebo sa chcete niečo opýtať, tak poďme spolu diskutovať dole do komentárov.