Slovník vývoja webu

Kompletný prehľad pojmov z React a Next.js ekosystému

Každý pojem obsahuje slovenský význam, praktické vysvetlenie a konkrétny príklad použitia. Sekcia vznikla pre podnikateľov aj junior developerov, aby rozumeli slovám, ktoré denne používame pri návrhu moderných digitálnych produktov.

24najdôležitejších termínov s popisom, ako ich aplikujeme v projektoch Upgrade-Web.
9kategórie: architektúra komponentov, dátové toky a optimalizácia výkonnosti.
Filtrovanie podľa kategórií a náročnosti

Kategória pojmu

Použitie v ekosystéme

Úroveň náročnosti

Client ComponentKlientsky komponentZákladná

Komponent s direktívou 'use client'.

Klientsky komponent používa hooky, stav a prehliadačové API, preto sa hydruje v prehliadači.

Praktické využitie

  • Vyhľadávací panel slovníka je klientsky komponent.
Kategórie
Použitie
Súvisiace výrazy
Server ComponentHydratáciaHook
Code SplittingDelenie kóduPokročilá

Rozdelenie balíka na menšie časti načítané podľa potreby.

Next.js vytvára samostatné chunks a dynamické importy, čím zrýchľuje prvé načítanie stránky.

Praktické využitie

  • Chatbot sa načíta dynamicky až po kliknutí na tlačidlo.
Kategórie
Použitie
Súvisiace výrazy
Lazy LoadingOptimalizáciaBundle
ComponentKomponentZákladná

Základný diel používateľského rozhrania.

Komponent vytvára izolovanú časť UI so vzhľadom, logikou a stavom v Reacte aj Next.js.

Praktické využitie

  • Hero sekcia alebo karta projektu ako samostatný komponent.
Kategórie
Použitie
Súvisiace výrazy
PropsStateServer Component
Context APIKontextStredná

Zdieľanie dát naprieč stromom komponentov.

Kontext poskytuje globálne hodnoty ako téma či používateľ bez nutnosti reťaziť props.

Praktické využitie

  • Téma rozhrania a jazykové nastavenia spravuje Context provider.
Kategórie
Použitie
Súvisiace výrazy
StateProviderHook
Error BoundaryZáchytná hranica chýbPokročilá

Komponent zachytávajúci runtime chyby detí.

Záchytná hranica zobrazí náhradný obsah a zabráni pádu aplikácie pri chybe v konkrétnej sekcii.

Praktické využitie

  • Sekcia chatu má vlastnú error boundary pre prípad zlyhania API.
Kategórie
Použitie
Súvisiace výrazy
SuspenseLogovanieMonitoring
HookHáčikZákladná

Funkcia s prefixom use rozširujúca komponent.

Hooky ako useEffect, useMemo či useRef pridávajú stav, efekty aj optimalizácie bez tried.

Praktické využitie

  • useEffect spúšťa načítanie dát po vykreslení klientskej sekcie.
Kategórie
Použitie
Súvisiace výrazy
StateLifecycleCustom Hook
HydrationHydratáciaStredná

Oživenie serverom vykresleného HTML na klientovi.

Hydratácia pripája udalosti ku statickému HTML a synchronizuje stav s klientskym Reactom.

Praktické využitie

  • Interaktívny graf sa aktivuje po hydratácii klienta.
Kategórie
Použitie
Súvisiace výrazy
Client ComponentStreamingSSR
Incremental Static RegenerationPriebežné statické obnovovanieStredná

Statika s automatickým prepočítaním obsahu.

ISR kombinuje SSG a SSR, po intervale potichu pregeneruje stránku a doručí čerstvé dáta.

Praktické využitie

  • Cenník sa obnovuje raz denne bez výpadku stránky.
Kategórie
Použitie
Súvisiace výrazy
SSGCacheRevalidate
JSXJSX zápisZákladná

Syntax kombinujúca HTML a JavaScript.

JSX zapisuje komponenty ako HTML s výrazmi a pri build-e sa prekladá na React volania.

Praktické využitie

  • Mapovanie zoznamu pojmov na karty cez JSX výraz.
Kategórie
Použitie
Súvisiace výrazy
KomponentRenderovanieTypeScript
MetadataMeta údajeStredná

Konfigurácia titulkov, popisov a OG informácií.

Next.js generateMetadata vytvára SEO dáta, kanonické odkazy aj Open Graph obrázky pre stránky.

Praktické využitie

  • Slovník má samostatný titulok a popis pre vyhľadávače.
Kategórie
Použitie
Súvisiace výrazy
SEOOpen GraphSitemap
MiddlewareMedzivrstvaPokročilá

Kód bežiaci pred obsluhou požiadavky.

Middleware v Edge runtime presmeruje, overí prístup alebo doplní hlavičky ešte pred odpoveďou.

Praktické využitie

  • Kontrola prihlásenia pri vstupe do administrácie.
Kategórie
Použitie
Súvisiace výrazy
AuthRouteCache
next/imageOptimalizovaný obrázkový komponentZákladná

Komponent pre automaticky optimalizované obrázky.

next/image generuje viaceré veľkosti, lazy loaduje a používa moderné formáty pre lepší výkon.

Praktické využitie

  • Ilustrácie slovníka sa zobrazujú cez next/image s responzívnym nastavením.
Kategórie
Použitie
Súvisiace výrazy
ResponsiveLazy LoadingCDN
PropsVstupné vlastnostiZákladná

Dáta alebo funkcie od rodičovského komponentu.

Props definujú rozhranie komponentu, prenášajú texty, čísla aj callbacky a kontrolujú sa typmi.

Praktické využitie

  • Tlačidlo prijíma titulok, ikonu a obsluhu kliknutia cez props.
Kategórie
Použitie
Súvisiace výrazy
KomponentTypovanieState
Search Engine OptimizationOptimalizácia pre vyhľadávačeStredná

Metódy zvyšujúce organickú návštevnosť webu.

SEO kombinuje technický výkon, obsah a odkazy; Next.js pomáha rýchlosťou, metadata aj sitemapami.

Praktické využitie

  • Slovník generuje cenný obsah pre dlhé kľúčové frázy.
Kategórie
Použitie
Súvisiace výrazy
MetadataCore Web VitalsSitemap
Server ActionServerová akciaPokročilá

Funkcia označená 'use server' volaná z klienta.

Serverová akcia bezpečne spracuje formulár, vykoná databázovú operáciu a vráti výsledok.

Praktické využitie

  • Odoslanie kontaktného formulára priamo do Supabase.
Kategórie
Použitie
Súvisiace výrazy
Server ComponentMutáciaBezpečnosť
Server ComponentServerový komponentStredná

Komponent vykreslený len na serveri.

Serverové komponenty získajú dáta bez JavaScriptu na klientovi, čím šetria prenos a výkon.

Praktické využitie

  • Layout stránky načítava dáta zo Supabase na serveri.
Kategórie
Použitie
Súvisiace výrazy
Client ComponentServer ActionStreaming
Server-Side RenderingServerové renderovanieStredná

Generovanie HTML pri každej požiadavke.

SSR obsluhuje dynamické dáta na serveri, prináša čerstvý obsah a posilňuje SEO stránok.

Praktické využitie

  • Dashboard zobrazí osobné údaje cez serverové renderovanie.
Kategórie
Použitie
Súvisiace výrazy
SSRCacheDynamic
StateStavZákladná

Meniteľné údaje riadiace správanie komponentu.

Stav uchováva aktuálne hodnoty pomocou useState alebo databázy a mení vzhľad či logiku.

Praktické využitie

  • Filtrovanie slovníka podľa zadanej frázy ukladá hodnotu do stavu.
Kategórie
Použitie
Súvisiace výrazy
useStateContextServer Action
SupabaseOpen-source backend platformaPokročilá

PostgreSQL s API, autentifikáciou a realtime službami.

Supabase ponúka databázu, bezpečné RLS politiky aj klienta, ktorý sa hodí k serverovým akciám.

Praktické využitie

  • Ukladanie definícií pojmov do tabuliek so zabezpečením RLS.
Kategórie
Použitie
Súvisiace výrazy
PostgreSQLAuthStorage
SuspensePozastavenie vykresľovaniaPokročilá

Zobrazuje zástupný obsah počas načítania.

Suspense spolupracuje so streamingom a lazy loadingom a zobrazuje skeletony do príchodu dát.

Praktické využitie

  • Skeleton karty slovníka počas načítania serverových komponentov.
Kategórie
Použitie
Súvisiace výrazy
StreamingFallbackLazy
Tailwind CSSUtility CSS frameworkZákladná

Sada tried na rýchle responzívne štýly.

Tailwind poskytuje utilitné triedy, JIT engine odstráni nepoužité štýly a udrží konzistentný dizajn.

Praktické využitie

  • Mriežka slovníka sa skladá z Tailwind tried podľa breakpointov.
Kategórie
Použitie
Súvisiace výrazy
Design SystemResponsiveshadcn/ui
TypeScriptTypovo rozšírený JavaScriptZákladná

Jazyk pridávajúci statickú typovú kontrolu.

TypeScript umožňuje definovať rozhrania, generiká a zabraňuje chybám ešte pred spustením kódu.

Praktické využitie

  • Rozhranie SlovnikPolozka popisuje štruktúru dát v tomto module.
Kategórie
Použitie
Súvisiace výrazy
InterfaceGenericstsc
useEffectEfektový háčikStredná

Reaguje na zmeny stavu alebo props po renderi.

useEffect vykoná vedľajší efekt, napríklad fetch dát, a vie upratať zdroje v cleanup funkcii.

Praktické využitie

  • Vyhľadávanie pojmov sa spúšťa v useEffect po zmene vstupu.
Kategórie
Použitie
Súvisiace výrazy
HookStateCleanup
Virtual DOMVirtuálny DOMStredná

Pamäťová kópia DOMu na porovnávanie zmien.

React diffuje virtuálny strom s predchádzajúcim stavom a do prehliadača posiela len rozdiely.

Praktické využitie

  • Správne kľúče pri zoznamoch pomáhajú efektívnemu diffovaniu.
Kategórie
Použitie
Súvisiace výrazy
RenderovanieKeyMemoizácia

Preložené pojmy

24

Zahrnuté anglické výrazy z Reactu, Next.js aj nástrojov vývoja.

Tematické okruhy

21

Architektúra komponentov, správa dát, optimalizácia a marketing.

Pokryté technológie

9

Frameworky, knižnice a služby používané v projektoch Upgrade-Web.