React Server Components 2024

Co to są React Server Components (RSC) i jak różnią się od Client Components?

React Server Components (RSC): komponenty renderowane wyłącznie na serwerze (React 18+, stabilne w Next.js App Router). Kluczowe różnice: Server Components — renderowane na serwerze, brak hydratacji, brak JS wysyłanego do klienta, dostęp do bazy danych/fs/secrets bezpośrednio, async/await natywnie. Client Components — 'use client' dyrektywa, hydratowane w przeglądarce, interaktywność (useState, useEffect, event handlers), dostęp do browser APIs (localStorage, window). RSC streaming: HTML streamowany z serwera zanim wszystkie dane gotowe. React Suspense boundary dla loading states. Waterfall requests eliminowane (parallel fetching na serwerze). Next.js App Router domyślnie: wszystkie komponenty Server Components. Dodaj 'use client' dla interaktywności. Kompozycja: Server Component może renderować Client Component. Client Component nie może renderować Server Component bezpośrednio (ale może przez slot/children). Zalety RSC: mniejszy bundle JS (logika na serwerze). Brak client-side waterfalls. Bezpieczny dostęp do DB i secrets. Lepszy SEO (HTML z serwera). Wady RSC: nowy mental model. Nie wszystkie biblioteki kompatybilne. Debugging trudniejszy. Vendor lock-in (Vercel/Next.js).

Server Actions — co to jest i jak zastępują API routes?

Server Actions (Next.js 14+, stabilne): asynchroniczne funkcje uruchamiane na serwerze wywoływane z klienta. 'use server' dyrektywa — oznacza funkcję lub cały plik jako Server Action. Jak działają: Next.js generuje endpoint automatycznie. Klient wysyła POST request. Serwer uruchamia funkcję. Revalidacja cache. Podstawowy use case — formularz bez API route: async function createPost(formData: FormData) {'use server'. const title = formData.get('title'). await db.post.create({data: {title}}). revalidatePath('/posts')}. Wywołanie z Server Component: form action={createPost}. Wywołanie z Client Component: const [state, action] = useActionState(createPost, initialState). Zalety Server Actions: brak osobnego API route dla prostych mutacji. Type-safe (TypeScript end-to-end). Progressive enhancement (działa bez JS). Revalidation wbudowana (revalidatePath, revalidateTag). Dostęp do cookies, headers, auth. Wady Server Actions: tylko dla prostych mutacji. Brak streaming response. Trudniejsze testowanie. useOptimistic: optymistyczne aktualizacje UI przed zakończeniem Action. const [optimisticList, addOptimistic] = useOptimistic(list). startTransition(() => addOptimistic(newItem), action(newItem)). Server Actions + Zod: walidacja input na serwerze. safe-action lub next-safe-action — type-safe Server Actions wrapper.

Partial Prerendering (PPR) — nowe podejście do rendering w Next.js 15?

Partial Prerendering (PPR): eksperymentalna funkcja Next.js 15 łącząca static i dynamic rendering w jednej stronie. Strona ma statyczną powłokę (shell) prerendered + dynamiczne 'dziury' (holes) wypełniane streaming. Przykład: shell (nav, header, static content) — prerendered natychmiast. Dynamic parts (feed, recommendations) — streamowane gdy gotowe. Jak włączyć: experimental.ppr: true w next.config.ts. export const experimental_ppr = true per page. Suspense boundaries określają dynamic boundaries. Porównanie rendering strategies Next.js: Static Generation (SSG) — build time, cache forever, najszybszy. ISR (Incremental Static Regeneration) — regeneracja per request po TTL. SSR — per request, zawsze fresh. PPR — static shell + dynamic streaming. Streaming SSR: React.Suspense + Server Components. Waterfall eliminated. First Byte szybki (shell). Data fetching parallel. Dynamic IO (Next.js 15+): unstable_noStore() — opt-out of caching. use cache — eksperymetnalne nowe caching API. cacheTag(), cacheLife(). fetch() caching: {cache: 'force-cache'} — static. {cache: 'no-store'} — dynamic. {next: {revalidate: 60}} — ISR. {next: {tags: ['posts']}} — tag-based invalidation. revalidateTag('posts') — server action revalidation.

React 19 — co nowego i jak wpływa na Server Components?

React 19 (stabilne 2024): Actions — async functions jako form actions. useOptimistic — optymistyczne UI updates. useFormStatus — stan formularza. useFormState (przemianowane na useActionState). use() — nowy hook do czytania Promise i Context. Nowe: ref jako prop (nie forwarded). Document metadata (title, meta w komponentach). Stylesheet management. Resource preloading (preload, prefetchDNS). Error recovery improvements. Actions w React 19 (nie Server Actions): async transitions. isPending z useTransition. Automatyczne error handling. Pełna integracja z Suspense. use() hook: const data = use(fetchDataPromise). W render — suspenduje komponent jeśli Promise pending. use(Context) zamiast useContext. Server Components w React 19: ulepszone error messages. Better devtools support. Concurrent features improvements. React Compiler (Project Saturn): automatyczna memoizacja (zastępuje useMemo/useCallback). Kompilator analizuje kod i optymalizuje. Stabilny w React 19. Opt-in: 'use memo' dyrkytywa (podobna do 'use client'). Co NIE jest w React 19: Server Components nie są oficjalnie w React (są w bundlerze/frameworku). Signals — React nie implementuje (alternatywy: Solid, Vue, Angular Signals). Resumability (XState, Qwik mają). React 18 concurrent mode nadal podstawą.

Next.js App Router vs Pages Router — kiedy migrować?

Pages Router (legacy, nadal wspierany): pages/ directory. getServerSideProps, getStaticProps, getStaticPaths. API routes w pages/api/. _app.tsx, _document.tsx. Dobrze znany, stabilny. App Router (Next.js 13+, stabilny od 14): app/ directory. Server Components domyślnie. Server Actions. Layouts zagnieżdżone. Loading, Error, Not-found boundaries. Parallel routes ((@folder)). Intercepting routes. Metadata API. Nowe caching behaviour. Kiedy migrować na App Router: nowe projekty -> App Router domyślnie. Istniejące projekty: stopniowa migracja (można mieć app/ i pages/ razem). Kiedy NIE migrować: masz dużo getServerSideProps logiki. Biblioteki niekompatybilne (sprawdź). Skomplikowany projekt bez budżetu na migrację. Pułapki App Router: caching agresywny (zmiany w Next.js 15 — domyślnie no-cache). Nie wszystkie React hooks w Server Components. Kontekst (Context API) tylko w Client Components. Provider patterns muszą być w Client Components. useRouter z 'next/navigation' (nie 'next/router'). Turbopack (Next.js 14+): szybszy HMR. Rust-based bundler. --turbo flag. Produkcja: w trakcie stabilizacji. Next.js 15 zmiany: React 19. Partial Prerendering stabilniejszy. Async Request APIs (cookies, headers jako Promise). Dynamic IO. Improved caching defaults.

Wyślij zapytanie