Next.js Cloudflare Showcase
Interaktívna ukážka všetkých kľúčových funkcionalít Next.js (App Router) nasadená na Cloudflare Pages.
Čo je Next.js?
Next.js je React framework, ktorý nad samotnú knižnicu React dopĺňa všetko, čo bežná webová aplikácia potrebuje: routing podľa štruktúry súborov, rendering na serveri (RSC, SSR, SSG, ISR), načítavanie dát, bundling aj deployment. Dnešným štandardom je App Router — presne ten, ktorý demonštrujú ukážky vyššie.
Na čo sa používa
Výhody
- •SEO a rýchly first paint vďaka renderingu na serveri
- •React Server Components = menší JS bundle na klientovi
- •Hybridný rendering — statické aj dynamické stránky v jednom projekte
- •File-based routing a jasné konvencie (layout, loading, error)
- •Veľký ekosystém, dobrý developer experience
- •Jednoduchý deploy — Vercel, alebo Cloudflare cez OpenNext
Nevýhody
- •Strmšia krivka učenia — hranica server/klient, caching
- •Časté breaking changes medzi major verziami
- •Ladenie cache a hydratácie býva netriviálne
- •Viazanosť na Node/edge runtime — nie je to čisté statické SPA
- •Dlhšie build časy pri veľkom počte stránok
- •Self-hosting je náročnejší než hosting na Verceli
Kedy použiť
- •Potrebujete SEO a zdieľateľné URL adresy
- •Obsah je mix statického a dynamického
- •Chcete React aj backend endpointy v jednom projekte
- •Obsah sa priebežne mení a hodí sa ISR / revalidácia
Kedy nepoužiť
- •Čisto interná SPA za prihlásením bez SEO — stačí Vite + React Router
- •Statická stránka bez interaktivity — Astro alebo plain HTML
- •Tím bez skúseností s Reactom
- •Existujúci backend už rieši rendering — stačí widget alebo embed
Legenda skratiek
- RSCReact Server Components
- Komponenty renderované na serveri — na klienta neposielajú žiadny JS.
- SSRServer-Side Rendering
- HTML sa generuje na serveri pri každej požiadavke.
- SSGStatic Site Generation
- HTML sa vygeneruje raz pri builde a servíruje sa staticky.
- ISRIncremental Static Regeneration
- Statická stránka sa na pozadí periodicky pregeneruje (revalidate).
- PPRPartial Pre-rendering
- Statický shell sa doručí okamžite, dynamické časti dotečú streamom.
- CSRClient-Side Rendering
- Renderovanie až v prehliadači cez JavaScript.
- SPASingle Page Application
- Aplikácia s jedinou HTML stránkou, navigácia beží v JS.
- SEOSearch Engine Optimization
- Optimalizácia pre vyhľadávače — vyžaduje HTML zo servera.
- DXDeveloper Experience
- Komfort práce vývojára s nástrojom.
- CRUDCreate, Read, Update, Delete
- Základné operácie nad dátami v databáze.
- D1Cloudflare D1
- SQLite databáza bežiaca na edge infraštruktúre Cloudflare.
- OpenNextOpenNext adapter
- Adaptér, ktorý zbalí Next.js app pre iný hosting než Vercel (napr. Cloudflare).
Server Components
RSC — rendering na serveri, nulový JS bundle
Client Components
useState, useEffect, interaktivita
Server Actions
Form actions, optimistic updates
Data Fetching
fetch s cache, revalidate, no-store
Caching & ISR
ISR, force-cache, unstable_cache
Route Handlers
API routes GET/POST v App Routeri
Dynamic Routes
generateStaticParams + [slug]
Catch-all Routes
[...segments] — ľubovoľná hĺbka URL
Parallel Routes
@slot — simultánne renderovanie
Intercepting Routes
Modal overlay pri navigácii
Middleware
Redirect, rewrite, custom hlavičky
Streaming
loading.tsx, async RSC s dátami
Suspense
<Suspense> boundaries s fallback
Static vs Dynamic
Rozdiel medzi SSG a SSR
Partial Pre-rendering
Statický shell + dynamické ostrovy
Image Optimization
<Image> komponent, lazy load, blur
Metadata & SEO
Static a dynamic generateMetadata
Error Handling
error.tsx, ErrorBoundary, notFound()
Loading UI
Skeleton UI cez loading.tsx
Not Found
Custom 404 stránka
Cloudflare D1
SQLite edge databáza — CRUD cez Server Actions