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 do projektu přidat CSS preprocesor Tailwind. Přejdeme do složky moje-aplikace/, kde spustíme příkazový řádek a zadáme příkaz:

Instalace Tailwind
npm install -D tailwindcss@3 postcss autoprefixer

Tímto nainstalujeme balíček tailwindcss společně s dalšími nástroji, které budeme potřebovat při sestavení projektu. Následně spustíme nástroj Tailwind, kterým si vygenerujeme konfigurační soubor tailwind.config.js:

Inicializace Tailwind
npx tailwindcss init -p

Konfigurační soubor tailwind.config.js se nám tímto vytvořil v kořenovém adresáři. Soubor nyní musíme upravit tak, aby Tailwind věděl, ve kterých souborech hledat CSS třídy. Do content proto dopíšeme cesty k našim složkám pages/ a components/. Upravený soubor vypadá takto:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx}",
    "./src/components/**/*.{js,jsx}"
  ],
  theme: { extend: {} },
  plugins: [],
};

Tailwind musíme ještě dodatečně zavolat. Na začátek souboru globals.css ve složce src/styles/ přidáme tři direktivy:

@tailwind base;
@tailwind components;
@tailwind utilities;

Nyní přejdeme do souboru Characters.js a kjednotlivým HTML tagům 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 index.js ve složce /src/pages/ 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 odkaz na Read our docs 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 vedle tlačítka Read our docs:

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š.