4. diel - Serverové renderovanie druhýkrát - Štýlovanie v Tailwind CSS

V predchádzajúcej lekcii, Vykresľovanie v React a jeho optimalizácia , sme sa zoznámili s tým, ako v Reactu prebieha vykresľovanie. Popísali sme si stručne niektoré z možností ďalšej optimalizácie, konkrétne memoizáciu, lazy loading a virtualizáciu.

V nasledujúcom tutoriále pokročilého Reactu nadviažeme na úspešné sprevádzkovanie serverového renderovania s Next.js a implementáciu API. Základnú funkcionalitu nášho projektu máme hotovú. Avšak dobrý web neznamená iba funkčnosť, ale aj pútavý dizajn a príjemnú užívateľskú skúsenosť. V dnešnej lekcii sa preto zameriame na vizuálnu stránku našej aplikácie. Využijeme k tomu Tailwind CSS, ktorý ako utility-first CSS framework ponúka rýchle a flexibilné nástroje na dosiahnutie moderného vzhľadu. Pridáme teda nášmu zoznamu postáv zo Star Wars štýlový nádych a naučíme sa, ako efektívne pracovať s týmto obľúbeným frameworkom.

Štylovanie v Tailwind CSS

Naše API funguje a Next.s ho správne volá na serveri pred tým, než nám do prehliadača vôbec pristane odpoveď. V rámci vizuálnej podoby stránky sa teda môžeme pustiť do vylepšenia:-) Poďme si vyskúšať náš importovaný CSS preprocesor Tailwind. Next.js nám pri generovaní počiatočnej šablóny už vytvoril konfiguračný súbor tailwind.config.js umiestnený v koreňovom adresári. V ňom je nastavené, že sa štýly aplikujú na všetky súbory aj v adresároch components/ a pages/. Tailwind sa síce musí dodatočne zavolať, to však generátor šablóny už aj zariadil. Konkrétne v súbore app/globals.css, kde sa Tailwind importuje. Nám teda stačí v hornej časti súboru Characters.js importovať globals.css nasledujúcim spôsobom:

K jednotlivým HTML tagom potom pridáme nasledujúce štýly, po ktorých aplikácii bude mať naša stránka aspoň nejaký vizuálny základ:

Zmeny v súbore Characters.js uložíme a pozrieme sa, ako náš zoznam postáv zo Star Wars vyzerá po úprave:

Pridanie odkazu na hlavnú stránku

Teraz zostáva posledný krok, ktorým je prepojenie s titulnou stránkou. Next.js, rovnako ako React, v tomto smere používa vlastný interný komponent <Link />, čo je optimalizovaná referencie pre interné prelinkovanie.

Prejdime teda do súboru page.js v priečinku /src/app/ a naimportujme si komponent <Link /> z Next.js nasledujúcim spôsobom:

Potom vložme do stránky za tretí tag div (<div className="relative flex place-items-center...) nasledujúci kód:

Tento kód vytvorí nový odkaz s textom Star Wars postavy na titulnú stránku. Pri kliknutí na text budeme premiestnení na stránku /postavy. Pre jednoduchosť sme kód vložili na vhodné miesto do inak nedotknutej titulnej stránky Next.js, priamo pod hlavný obrázok s logom frameworku:

V prípade problému s knižnicou Link ju možno v kóde nahradiť natívnym HTML odkazom <a href="/postavy">Star Wars postavy</a>.

Kedy sa oplatí serverové renderovanie?

V tutoriále sme nadviazali na lekciu Serverové renderovanie s Next.js. Dozvedeli sme sa o knižnici Next.js a preskúmali sme ako funguje serverové renderovanie. Prešli sme cez proces vytvárania aplikácie a ukázali sme si, ako načítať dáta na serverovej strane pomocou funkcie getServerSideProps().

Teraz sa pozrime na niektoré situácie, kedy uprednostníme použitie serverového renderovania a kedy je naopak vhodnejšie použiť renderovanie na strane klienta.

Serverové renderovanie

Serverové renderovanie uprednostníme pre:

• SEO citlivé stránky: Serverové renderovanie býva prospešné pre SEO, pretože vyhľadávače môžu ľahšie analyzovať a indexovať plne vykreslenú stránku prijatú zo servera.
• Stránky, ktoré potrebujú okamžite zobrazovať dynamické dáta: Ak naša stránka potrebuje zobrazovať dáta, ktoré sa často menia, a tieto dáta je potrebné užívateľovi zobraziť hneď po načítaní stránky, serverové renderovanie môže byť dobrou voľbou. Príkladom môže byť spravodajský web, ktorý potrebuje zobrazovať najnovšie články hneď po načítaní stránky.
• Zariadenia s nižším výkonom alebo pomalšie siete: Pretože stránka je plne vyrenderovaná na serveri, na strane klienta je vyžadované menej spracovania. To vedie k lepšiemu výkonu pre používateľov s menej výkonnými zariadeniami alebo pomalšími sieťovými podmienkami.

Klientske renderovanie

Klientske renderovanie uprednostníme pre:

• Vysoko interaktívne stránky: Klientske renderovanie bude prospešné pre stránky, ktoré vyžadujú veľa interakcie používateľa a nepotrebujú zobrazovať rôzne dáta hneď po každom načítaní stránky. Príkladom môže byť aplikácia, ktorá vyžaduje vstup používateľa predtým, než môže zobraziť akékoľvek užitočné dáta.
• Stránky, ktoré nie sú silne závislé na SEO: Ak naša stránka nemusí byť indexovaná vyhľadávačmi (napríklad užívateľský dashboard), je klientske renderovanie vhodnou voľbou.
• Menšia záťaž servera: Pri klientskom renderovaní server poskytuje iba statické súbory, čo znižuje jeho záťaž. Toto nadobúda na význame, pokiaľ prevádzkujeme aplikáciu s veľkým množstvom užívateľov.

V mnohých moderných webových aplikáciách nachádzame kombináciu oboch - serverového aj klientskeho renderovania. Toto sa niekedy označuje ako univerzálne alebo aj izomorfné renderovanie. Serverové renderovanie použijeme na rýchle servírovanie kostry našej aplikácie a nejakých počiatočných dát a klientske renderovanie ďalej pre následné interakcie užívateľa a aktualizácie dát. Next.js je pre tento druh hybridného prístupu vynikajúcim frameworkom.

Súbory so zdrojovým kódom sú priložené v archíve pod lekciou.

V nasledujúcej lekcii, Hooky v React - useState(), useEffect() a useRef() , si bližšie si predstavíme hooky useState(), useEffect() a useRef().

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.