Tanstack Router a NextJS 🚀
V této části se podíváme na moderní řešení, která nabízejí pokročilé funkce jako type-safe routing, server-side rendering a další optimalizace.
🎯 Moderní řešení
Problémy s React Router:
❌ Minimální možnost typování - chyby při běhu aplikace (runtime)
❌ Žádná optimalizace - automaticky načte všechny komponenty, pokud to nezařídíme jinak (lazy loading, code splitting)
❌ Složitá konfigurace - mnoho boilerplate kódu
❌ Žádný SSR - pouze client-side rendering, což může negativně ovlivnit SEO (Search Engine Optimization)
Výhody moderních řešení:
✅ File-based routing - jednodušší a přehlednější struktura souborů na základě souborového systému - složek a souborů
✅ Type-safe routing - TypeScript podpora (typování parametrů a search)
✅ Automatická optimalizace - lazy loading, code splitting (načítání komponenty až v okamžiku, kdy je potřeba)
✅ Lepší UX - rychlejší načítání stránek (díky optimalizaci)
✅ SSR/SSG - server-side rendering a generování statických stránek (pro lepší SEO)
🚀 Tanstack Router
Tanstack Router je moderní, type-safe routing knihovna pro React aplikace.
File based routing nám umožňuje používat složky a soubory jako adresy stránek (komponenty, které nazveme stránkami).
Tím zjednodušuje vývojářům práci s routingem a adresací stránek.
pages/
├── index.tsx # / route
├── employees/
│ ├── index.tsx # /employees route
│ ├── [id].tsx # /employees/[id] route
│ └── add.tsx # /employees/add route
└── api/
└── employees/
├── index.ts # /api/employees
└── [id].ts # /api/employees/[id]🎨 NextJS
NextJS je React framework s vestavěným file-based routingem, SSR (Server-Side Rendering) a SSG (Static Site Generation) a dalšími zjednodušeními.
Instalace:
npx create-next-app@latest employee-manager --typescript --tailwind --eslint
cd employee-managerFile-based routing:
Každá složka v adresáři je jedna stránka.
Ve složce jsou pak jednotlivé soubory podle funkce.
layout.tsx- Obsahuje layout stránky, což je komponenta, která obklopuje obsah stránky. Jednotlivé layouty se pak mohou vkládat do sebe podle hiearchie složek.page.tsx- Obsahuje komponentu stránky.not-found.tsx- Obsahuje komponentu, která se zobrazí při chybě (404).loading.tsx- Obsahuje komponentu, která se zobrazí při načítání (asynchronní) komponenty stránky.error.tsx- Obsahuje komponentu, která se zobrazí při chybě (500).[...slug].tsx- Obsahuje komponentu, která umožní hodnoty z adresy využívat jako parametry (např.[id]).(quiet)- Umožňuje vytvářet složky a shlukovat tak logicky související stránky, aniž by to znamenalo přidání adresy do aplikace. Např. použijeme různýlayoutpro různé skupiny stránek se stejnou cestou.- Další soubory jsou připraveny zpříjemňovat Ti život při vývoji aplikace. Více o nich si můžeš přečíst v dokumentaci NextJS.
app/
├── index.tsx # / route
├── employees/
│ ├── index.tsx # /employees route
│ ├── [id].tsx # /employees/[id] route
│ └── add.tsx # /employees/add route
└── api/
└── employees/
├── index.ts # /api/employees
└── [id].ts # /api/employees/[id]SSR a SSG:
SSR (Server-Side Rendering)je technika, která na požádání ze strany uživatele vyrenderuje stránku na serveru a pošle ji uživateli.
SSG (Static Site Generation)je technika, která generuje statické stránky předem během buildu a uživateli posílá již hotové statické stránky.Tyto metody je v NextJS možné téměř libovolně kombinovat a využívat jejich výhody podle potřeby.
Pro více informací o SSR a SSG si přečti např.