Lekce 4 - Serverové renderování podruhé - Stylování v Tailwind CSS

V předchozí lekci, Serverové renderování s Next.js, jsme se zabývali frameworkem Next.js a serverovým renderováním.

V následujícím tutoriálu pokročilého Reactu navážeme na úspěšné zprovoznění serverového renderování s Next.js a implementaci API. Základní funkcionalitu našeho projektu máme hotovou. Avšak dobrý web neznamená jenom funkčnost, ale také poutavý design a příjemnou uživatelskou zkušenost. V dnešní lekci se proto zaměříme na vizuální stránku naší aplikace. Využijeme k tomu Tailwind CSS, který jako utility-first CSS framework nabízí rychlé a flexibilní nástroje pro dosažení moderního vzhledu. Přidáme tedy našemu seznamu postav ze Star Wars stylový nádech a naučíme se, jak efektivně pracovat s tímto oblíbeným frameworkem.

Stylování v Tailwind CSS

Naše API funguje a Next.js jej správně volá na serveru před tím, než nám do prohlížeče vůbec přistane odpověď. V rámci vizuální podoby stránky se tedy můžeme pustit do vylepšení Pojďme si vyzkoušet náš importovaný CSS preprocesor Tailwind. Next.js nám při generování počáteční šablony již vytvořil konfigurační soubor tailwind.config.js umístěný v kořenovém adresáři. V něm je nastaveno, že se styly aplikují na veškeré soubory i v adresářích components/ a pages/. Tailwind se sice musí dodatečně zavolat, to však generátor šablony už také zařídil. Konkrétně v souboru app/globals.css, kde se Tailwind importuje. Nám tedy stačí v horní části souboru Characters.js importovat globals.css následujícím způsobem:

import '../app/globals.css'

K jednotlivým HTML tagům pak přidáme následující styly, po jejichž aplikaci bude mít naše stránka alespoň nějaký vizuální základ:

<div className="p-5 bg-gray-100" style={{ color: 'black' }}>>
    <h1 className="text-3xl font-bold mb-4">Postavy ze Star Wars</h1>
    {characters.map((character) => (
      <div key={character.name} className="mb-4 p-4 bg-white rounded shadow">
        <h2 className="text-2xl font-semibold">{character.name}</h2>
        <p className="mt-2">This character is {character.height} centimeters tall, weighs {character.mass} kilos and has {character.skin_color} skin color.</p>
      </div>
    ))}
</div>

Změny v souboru Characters.js uložíme a podíváme se, jak náš seznam postav ze Star Wars vypadá po úpravě:

Přidání odkazu na hlavní stránku

Nyní zbývá poslední krok, kterým je propojení s titulní stránkou. Next.js, stejně jako React, v tomto směru používá vlastní interní komponentu <Link />, což je optimalizovaná reference pro interní prolinkování.

Přejděme tedy do souboru page.js ve složce /src/app/ a naimportujme si komponentu <Link /> z Next.js následujícím způsobem:

import Link from 'next/link'

Pak vložme do stránky za třetí tag div (<div className="relative flex place-items-center...) následující kód:

<Link href="/postavy">
   Star Wars postavy
</Link>

Tento kód vytvoří nový odkaz s textem Star Wars postavy na titulní stránku. Při kliknutí na text budeme přemístěni na stránku /postavy. Pro jednoduchost jsme kód vložili na vhodné místo do jinak netknuté titulní stránky Next.js, přímo pod hlavní obrázek s logem frameworku:

V případě problému s knihovnou Link ji lze v kódu nahradit nativním HTML odkazem <a href="/postavy">Star Wars postavy</a>.

Kdy se vyplatí serverové renderování?

V tutoriálu jsme navázali na lekci Serverové renderování s Next.js. Dozvěděli jsme se o knihovně Next.js a prozkoumali jsme, jak funguje serverové renderování. Prošli jsme skrze proces vytváření aplikace a ukázali jsme si, jak načítat data na serverové straně pomocí funkce getServerSideProps().

Nyní se podívejme na některé situace, kdy upřednostníme použití serverového renderování a kdy je naopak vhodnější použít renderování na straně klienta.

Serverové renderování

Serverové renderování upřednostníme pro:

• SEO citlivé stránky: Serverové renderování bývá prospěšné pro SEO, protože vyhledávače mohou snadněji analyzovat a indexovat plně vykreslenou stránku přijatou ze serveru.
• Stránky, které potřebují okamžitě zobrazovat dynamická data: Pokud naše stránka potřebuje zobrazovat data, která se často mění, a tato data je třeba uživateli zobrazit hned po načtení stránky, serverové renderování může být dobrou volbou. Příkladem může být zpravodajský web, který potřebuje zobrazovat nejnovější články hned po načtení stránky.
• Zařízení s nižším výkonem nebo pomalejší sítě: Protože stránka je plně vyrenderována na serveru, na straně klienta je vyžadováno méně zpracování. To vede k lepšímu výkonu pro uživatele s méně výkonnými zařízeními nebo pomalejšími síťovými podmínkami.

Klientské renderování

Klientské renderování upřednostníme pro:

• Vysoce interaktivní stránky: Klientské renderování bude prospěšné pro stránky, které vyžadují hodně interakce uživatele a nepotřebují zobrazovat různá data hned po každém načtení stránky. Příkladem může být aplikace, která vyžaduje vstup uživatele předtím, než může zobrazit jakákoli užitečná data.
• Stránky, které nejsou silně závislé na SEO: Pokud naše stránka nemusí být indexována vyhledávači (například uživatelský dashboard), je klientské renderování vhodnou volbou.
• Menší zátěž serveru: Při klientském renderování server poskytuje pouze statické soubory, což snižuje jeho zátěž. Toto nabývá na významu, pokud provozujeme aplikaci s velkým množstvím uživatelů.

V mnoha moderních webových aplikacích nacházíme kombinaci obou typů renderování – serverového i klientského. Toto se někdy označuje jako univerzální nebo také izomorfní renderování. Serverové renderování použijeme pro rychlé servírování kostry naší aplikace a nějakých počátečních dat a klientské renderování dále pro následné interakce uživatele a aktualizace dat. Next.js je pro tento druh hybridního přístupu vynikajícím frameworkem.

Soubory se zdrojovým kódem jsou přiloženy v archivu pod lekcí.

V následující lekci, Hooky v Reactu - useState(), useEffect() a useRef(), si blíže představíme hooky useState(), useEffect() a useRef().

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.