Server-side rendering vs SPA: prečo váš React/Next.js web nevidia AI roboty (technický audit + náprava 2026)

Posledná aktualizácia: máj 2026

Stručná odpoveď: Väčšina indexovacích robotov, ktoré kŕmia veľké jazykové modely, JavaScript nespúšťa. Common Crawl, z ktorého sa trénovala drvivá väčšina GPT modelov, podľa vlastnej dokumentácie JavaScript nevykonáva. Oficiálne dokumentácie GPTBota, ClaudeBota a PerplexityBota vykresľovanie cez Chromium ani inú prehliadačovú vrstvu nespomínajú. Praktický dôsledok: ak je váš web postavený ako klasická jednostránková aplikácia (SPA) v React, Vue alebo Angular bez vykresľovania na strane servera, AI vyhľadávače vidia prázdnu HTML kostru a obsah necitujú. Tento článok ukazuje, ako rozdiel medzi SSR a SPA presne funguje, ako za päť minút overíte vlastný web, a ako problém napraviť bez kompletného prepisu.

Prečo na tom v roku 2026 záleží viac ako kedykoľvek predtým

Klasické SEO bolo zhovievavé. Googlebot používa „evergreen" verziu Chromia a v druhej fáze indexovania JavaScript spúšťa — síce s oneskorením, ale spúšťa. Vďaka tomu jednostránkové aplikácie postavené na React, Vue či Angular dokázali v Google vyhľadávaní fungovať, aj keď bez ideálneho výsledku.

AI vyhľadávače menia pravidlá. Veľká časť obsahu, na ktorom sú LLM modely trénované, pochádza z otvoreného archívu Common Crawl — repozitára s viac ako 300 miliardami stránok. V jeho oficiálnom FAQ stojí jediná veta, ktorá by mala visieť nad stolom každého frontend vývojára:

„Currently, JavaScript is not executed and Cookies are not used." — Common Crawl FAQ

Pri live vyhľadávaní (Perplexity, ChatGPT search, Claude search) ide o samostatných robotov, ktorí stránku načítajú v reálnom čase — ale ich oficiálne dokumentácie vykresľovanie JavaScriptu neuvádzajú. Konzervatívny predpoklad: pracujú podobne, ako keby ste si stránku stiahli cez curl. To, čo neuvidíte v zdrojovom kóde stránky pri pravom kliknutí a „Zobraziť zdrojový kód", je pre nich neviditeľné.

Ako presne funguje SSR, CSR, SSG a ďalšie typy vykresľovania

Tu sa najčastejšie zamotávajú aj skúsení vývojári, pretože každý framework si pomenovania mierne ohýba. V kontexte indexovacích robotov sú dôležité štyri typy.

Vykresľovanie v prehliadači (CSR — Client-Side Rendering)

Server pošle takmer prázdny HTML, ktorý obsahuje len kostru, odkaz na JavaScript zväzok a prázdny <div id="root">. Až keď prehliadač stiahne, spustí a vykoná JavaScript, vznikne reálny obsah. Toto je správanie typickej Create React App, Vite + React/Vue projektu bez nadstavby, alebo Angular aplikácie bez SSR.

Pre robota bez prehliadačovej vrstvy je výsledok presne taký, aký vidíte vo View Source — kostra bez textu, bez nadpisov, bez obsahu článku.

Vykresľovanie na strane servera (SSR — Server-Side Rendering)

Server pri každej požiadavke vyrenderuje hotové HTML s obsahom a pošle ho prehliadaču. Prehliadač zobrazí stránku okamžite, potom „hydratuje" JavaScript pre interaktivitu. Pre robota je SSR ideálne — celý obsah je v zdrojovom kóde od prvej milisekundy.

Tento prístup používa Next.js v Pages Router cez getServerSideProps, Nuxt.js, SvelteKit v predvolenom režime alebo Remix.

Statické generovanie (SSG — Static Site Generation)

HTML vznikne pri zostavovaní webu (build time) a server ho už len posiela ako statický súbor. Ideálne pre obsahové weby — blogy, dokumentáciu, marketingové stránky. Pre roboty je správanie identické s SSR, pre používateľa je odpoveď ešte rýchlejšia. Astro, Gatsby, Hugo, Eleventy alebo Next.js cez generateStaticParams v App Router.

Priebežná regenerácia (ISR — Incremental Static Regeneration)

Hybrid medzi SSG a SSR. Stránka sa zostaví pri prvej požiadavke a uloží do vyrovnávacej pamäte, ďalšie požiadavky dostávajú už hotovú verziu. Po určenom čase sa v pozadí prerobí. Pre roboty správanie SSG, pre tím obsahu pohodlie SSR.

Server Components a App Router (Next.js 13+)

Najnovšia generácia. Podľa oficiálnej dokumentácie Next.js sú „layouty a stránky predvolene Server Components, ktoré umožňujú načítať dáta a vyrenderovať časti rozhrania na serveri, voliteľne výsledok uložiť do vyrovnávacej pamäte a streamovať klientovi". HTML sa posiela hotové. Prepnutie do klientskeho komponentu sa robí direktívou 'use client' — a tu vzniká najčastejšia chyba, ktorú v audite vidíme u našich klientov.

Ako za päť minút overím, či ma AI roboty „vidia"

Bez nástrojov, bez registrácie, len terminál a prehliadač.

Test 1 — surová odpoveď servera cez curl

Otvorte terminál a stiahnite si svoj web tak, ako ho uvidí robot bez JavaScriptu:

curl -A "Mozilla/5.0 (compatible; GPTBot/1.2; +https://openai.com/gptbot)" \
     -s https://vasweb.sk | head -200

Ak vo výstupe vidíte úvodný nadpis (<h1>), kľúčové odseky, meta značky a štruktúrované údaje (<script type="application/ld+json">), ste v poriadku. Ak vidíte len <div id="__next"></div> alebo <div id="root"></div> a žiadny text, máte problém.

Pre rýchle vizuálne porovnanie:

curl -s https://vasweb.sk | grep -c "<p"
vráti počet odsekov v surovom HTML

ak je 0, robot nevidí žiaden text

Test 2 — View Source vs. Inspect Element

Otvorte stránku v prehliadači. Pravé tlačidlo → Zobraziť zdrojový kód stránky (alebo Ctrl+U). Toto je presne to, čo vidí robot. Ak medzi tagmi nie je text vášho článku, robot ho neuvidí — bez ohľadu na to, ako pekne vyzerá v Inspect Element (ten ukazuje DOM po spustení JavaScriptu).

Test 3 — Bing Webmaster Tools „URL Inspection"

Bing v rámci nástrojov pre webmasterov ponúka funkciu, ktorá zobrazí, ako ich robot stránku zachytil. Je to bližší pohľad na to, čo môže vidieť AI vyhľadávač, než ktorýkoľvek iný verejne dostupný nástroj.

Test 4 — Google Rich Results Test

Vložte URL do Google Rich Results Test. Po vyhodnotení kliknite na „Zobraziť testovanú stránku". Záložka HTML ukáže to, čo Googlebot videl po spustení JavaScriptu. Ak je vyrenderované HTML kratšie alebo chudobnejšie ako produkčná stránka, niečo sa nestihlo vykresliť v časovom limite — a presne to sa stane aj robotom, ktorí JS vôbec nespúšťajú.

Test 5 — porovnanie cez „Disable JavaScript"

V Chrome DevTools otvorte Command Palette (Ctrl+Shift+P), napíšte „Disable JavaScript" a obnovte stránku. Toto je verný obraz toho, čo vidí GPTBot a ClaudeBot. Ak je stránka biela alebo má len kostru navigácie, máte istotu, že vás AI vyhľadávače necitujú.

Identifikátory najznámejších AI robotov

Pre robots.txt, server log analýzu a CDN pravidlá je užitočné poznať presné identifikátory:

• GPTBot (OpenAI, tréning) — Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.2; +https://openai.com/gptbot) — viď oficiálna OpenAI dokumentácia
• ChatGPT-User (OpenAI, live požiadavky používateľov) — robot, ktorý reálne načítava stránky pri vyhľadávaní v ChatGPT
• OAI-SearchBot (OpenAI, ChatGPT Search) — používaný pre indexáciu v ChatGPT Search
• ClaudeBot (Anthropic) — dokumentácia Anthropic
• Claude-SearchBot a Claude-User — varianty pre vyhľadávanie a používateľské požiadavky
• PerplexityBot a Perplexity-User — viď oficiálna dokumentácia Perplexity. Druhý menovaný „generally ignores robots.txt rules", pretože ide o akciu vyvolanú používateľom
• Google-Extended — pozor, podľa Googlu „nemá samostatný HTTP user agent reťazec. Prehľadávanie robí cez existujúce Google user agenty; token v robots.txt slúži na ovládanie použitia dát." Inými slovami: nie je to nový robot, ale prepínač opt-outu z tréningu Gemini modelov
• Applebot-Extended — analogicky podľa dokumentácie Apple, „Applebot-Extended nestiahne webové stránky… používa sa len na rozhodnutie, ako využiť dáta stiahnuté Applebotom" pre tréning Apple Intelligence
• Googlebot — používa headless Chromium, spúšťa JavaScript v druhej fáze indexovania s oneskorením
• Bingbot — Microsoft prešiel na renderovanie cez Microsoft Edge (na báze Chromia)

Najčastejšie chyby v reálnych Next.js a React projektoch

Z auditov, ktoré robíme na slovenskom trhu, sa opakuje rovnakých päť scenárov. Ak ste v ktoromkoľvek z nich, AI roboty pravdepodobne vidia z vášho webu menej, než si myslíte.

Chyba 1 — direktíva use client na celej stránke

V Next.js App Router je predvolene všetko Server Component. Stačí ale do page.tsx alebo vrchného layoutu pridať 'use client' a celý strom komponentov sa zmení na klientsky. Server stále pošle HTML kostru, ale obsah, ktorý záleží od dát načítaných cez useEffect alebo SWR, sa naplní až v prehliadači.

Riešenie: 'use client' dávajte čo najhlbšie v strome — len na komponenty, ktoré reálne potrebujú stav, efekty alebo prehliadačové API (formuláre, akordeóny, modálne okná). Hlavný obsah stránky (článok, popis produktu, FAQ) udržiavajte v Server Components.

Chyba 2 — obsah načítaný cez useEffect

Klasika:

'use client'
export default function Article({ slug }) {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetch(`/api/articles/${slug}`).then(r => r.json()).then(setData)
  }, [slug])
  if (!data) return <Skeleton />
  return <article>{data.body}</article>
}

Funguje pre používateľa. Pre robota bez JavaScriptu zostane v HTML iba <Skeleton />. Riešenie: presunúť načítanie do Server Componentu alebo serverového route handlera a vyrenderovať obsah do prvého HTML.

Chyba 3 — JSON-LD pridaný cez JavaScript

Verím, že každý dobre myslený návod hovorí: „štruktúrované údaje sú dôležité". Lenže ich pridanie cez react-helmet-async alebo cez ručne vytvorený document.createElement('script') znamená, že JSON-LD vznikne až po spustení JavaScriptu — pre robotov bez JS vrstvy je neviditeľný.

Riešenie pre Next.js App Router: použiť priamo <script type="application/ld+json"> v Server Component, alebo nakonfigurovať cez metadata API. JSON-LD musí byť v surovom HTML, ktoré server posiela ako odpoveď.

Chyba 4 — meta značky cez next/dynamic alebo client komponent

Podobný princíp: <title>, <meta name="description"> a Open Graph značky musia byť v hlavičke HTML, ktoré server vráti. Ak ich generujete v klientskom komponente, robot dostane fallback alebo prázdne pole.

V Next.js 14/15 cez App Router používajte generateMetadata v page.tsx alebo layout.tsx. Pre Pages Router cez next/head v komponente vrátenom z getServerSideProps / getStaticProps.

Chyba 5 — lazy loaded sekcie nad fold

Ak hlavný obsah stránky (článok, popis služby) načítavate cez next/dynamic s { ssr: false }, robot nedostane nič. Tento prepínač zakazuje vykresľovanie na strane servera úplne. Používajte ho len pre komponenty pod prvým zobrazením, ktoré nemajú SEO hodnotu (chatovacie widgety, kalkulačky, integrácie tretích strán).

Náprava krok za krokom — od auditu po produkciu

Krok 1 — Audit aktuálneho stavu

Spustite si curl test na desiatich kľúčových URL (domovská stránka, dva-tri produkty, dva články, dve servisné stránky). Pre každú URL zaznamenajte: počet <p> tagov, prítomnosť <h1>, prítomnosť JSON-LD, prítomnosť meta description a Open Graph. Ak je čokoľvek nulové, máte mapu problému.

Krok 2 — Rozhodnutie o architektúre

Tri scenáre podľa veľkosti webu:

• Marketingový web do 100 stránok — choďte rovno na statické generovanie. Astro alebo Next.js so generateStaticParams. Najrýchlejšie pre návštevníka, najistejšie pre robota.
• E-shop alebo katalógový web (100–10 000 stránok) — kombinácia SSG pre statické sekcie + ISR pre produktové stránky. Next.js v App Router robí toto natívne.
• Aplikácia s prihlásením a dynamickými dátami — verejné stránky (landing, pricing, blog, dokumentácia) musia mať SSR/SSG. Prihlásená časť môže ostať klientska, robotov tam aj tak nepustíte.

Krok 3 — Migrácia existujúceho SPA na SSR

Ak máte React aplikáciu vytvorenú cez Create React App alebo Vite, sú dve cesty:

1. Migrácia na Next.js — najistejšia, najuniverzálnejšia. Tím sa potrebuje naučiť rozdiel medzi Server a Client Components, ale väčšina logiky sa dá preniesť bez prepisu. Plánujte 2–6 týždňov podľa veľkosti.
2. Prerendering vrstva pred SPA — externý nástroj (napr. Prerender.io alebo vlastný headless Chromium na serveri) zachytí HTML pre identifikovaných robotov a vráti im hotovú statickú snímku. Rýchlejšie nasadenie, dlhodobo drahšie a krehkejšie riešenie.

Krok 4 — Štruktúrované údaje priamo do HTML

Pre AI vyhľadávače sú JSON-LD dáta zlato. Article, FAQPage, Product, Organization a BreadcrumbList vám pomáhajú nielen v Google Rich Results, ale podľa našich meraní (od mája 2026) výrazne zlepšujú citačnú mieru v Perplexity a ChatGPT Search. Podmienka — musia byť v odpovedi servera, nie pridané po hydratácii.

Krok 5 — Overenie po nasadení

Po deployi prebehnite tých istých 10 URL z auditu znova. Ak curl teraz vracia kompletný HTML s nadpismi, odsekmi a JSON-LD, máte hotovo. Posledný krok — počkať 7–14 dní a sledovať, či sa zvyšuje citačná frekvencia v AI vyhľadávačoch. Tu je užitočný nástroj na priebežné meranie viditeľnosti.

Audit checklist — 10 bodov, ktoré sami vykonáte za pol hodinu

#	Test	Ako overiť	Ako má vyzerať dobrý výsledok
1	HTML obsahuje H1	curl -s URL | grep -c "<h1"	≥ 1
2	HTML obsahuje hlavný text	curl -s URL | grep -c "<p"	≥ 5 pre článok, ≥ 3 pre produkt
3	Meta description je v HTML	curl -s URL | grep "meta name=\"description\""	1 záznam s textom
4	Open Graph značky	curl -s URL | grep "og:"	title, description, image, url
5	JSON-LD štruktúrované údaje	curl -s URL | grep "application/ld+json"	1+ schém (Article/Product/FAQPage)
6	Canonical URL	curl -s URL | grep "rel=\"canonical\""	1 záznam smerujúci na seba
7	robots.txt nezakazuje GPTBot/ClaudeBot/PerplexityBot	curl -s URL/robots.txt	žiadne Disallow: / pre tieto identifikátory
8	Sitemap je dostupná a aktuálna	curl -s URL/sitemap.xml | head	obsahuje aktuálne URL
9	Rýchlosť odpovede servera	browser DevTools → Network → TTFB	do 800 ms
10	Vykreslená stránka = surová stránka	porovnanie View Source vs. Inspect	kľúčový obsah identický

Špecifický prípad — Slovak market a SPA weby

Pri auditoch na slovenskom trhu (e-shopy, B2B SaaS, agentúrne weby) opakovane narážame na rovnakú konšteláciu: marketingový web v React/Next bez SSR + krásna dokumentácia, ktorú nikto necituje. Dôvod nie je v kvalite obsahu — texty bývajú výborné. Dôvod je, že obsah nikdy nedorazí do AI tréningových dát ani do live AI vyhľadávačov, pretože je za JavaScript stenou.

Najčastejší dopad, ktorý vidíme:

• Brand sa v Perplexity dopytoch necituje, hoci konkurencia s WordPress alebo statickými webmi áno.
• ChatGPT Search vracia odkaz na profil firmy v katalógu (Zoznam, Heureka, Firmy.sk) — nikdy nie na vlastný web.
• Google AI Overviews pre dopyt „najlepšie nástroje na X" uvádza zahraničných hráčov, hoci slovenský produkt by patril do top 5.

Náprava nemusí znamenať kompletný prepis. Vo väčšine prípadov stačí migrovať len verejné marketingové stránky a blog na Next.js App Router so Server Components, ostatok aplikácie ponechať tak, ako je. Časová investícia pre stredne veľký web — zhruba tri až štyri týždne práce jedného vývojára vrátane testov.

Ako overiť dopad meraním

Po nasadení SSR ide najťažšia časť — dokázať, že to fungovalo. Klasický Google Search Console ukáže postupné zvyšovanie zobrazení a kliknutí. AI vyhľadávače takúto konzolu nemajú. Na meranie citačnej frekvencie v ChatGPT, Perplexity, Claude, Google AI Overviews a Gemini sa používa visibility tracking — pravidelné dotazy na sady kľúčových promptov a sledovanie, či a v akom kontexte sa vaša doména objavuje.

Náš produkt Optimalizácia pre AI robí presne toto pre slovenský a český trh — definujete prompty, on ich denne spúšťa proti piatim AI engineom a meria Visibility Score a Share of Voice. Pre overenie dopadu migrácie z SPA na SSR stačí desať promptov denne počas štyroch týždňov — krivka pred a po nasadení odpovie na otázku jednoznačne.

Často kladené otázky

Spúšťa GPTBot JavaScript?

OpenAI vo svojej oficiálnej dokumentácii vykresľovanie JavaScriptu pre GPTBot explicitne neuvádza. Konzervatívny predpoklad pre účely SEO a GEO auditu je, že nespúšťa, podobne ako Common Crawl, ktorý explicitne potvrdzuje, že JavaScript nevykonáva. Bezpečnou stratégiou je nespoliehať sa na JS vykresľovanie pri obsahu určenom pre AI vyhľadávače.

Aký je rozdiel medzi Google-Extended a Googlebotom?

Google-Extended nie je samostatný indexovací robot. Podľa oficiálnej dokumentácie Googlu ide o token v súbore robots.txt, ktorým ovládate, či sa obsah stiahnutý štandardným Googlebotom môže použiť na tréning Gemini modelov. Crawling fyzicky robí Googlebot, Google-Extended určuje len ďalšie využitie dát. Blokovanie Google-Extended teda neovplyvní zobrazovanie webu v Google vyhľadávaní.

Pomôže Server Components v Next.js App Router?

Áno, výrazne. Server Components sú predvolené v App Router a generujú HTML na strane servera. Stránka, ktorá využíva Server Components na vykreslenie hlavného obsahu, bude pre AI roboty viditeľná. Problém vzniká, ak na celú stránku použijete direktívu use client, čím prepnete celý strom komponentov do prehliadačového režimu.

Čo so SPA aplikáciou postavenou na Create React App?

Pre verejne dostupné stránky určené na vyhľadávanie sú dva praktické postupy. Prvý je migrácia na Next.js alebo Remix, ktorá poskytne vykresľovanie na strane servera natívne. Druhý je nasadenie prerendering vrstvy pred existujúcu aplikáciu, ktorá pre identifikovaných robotov vráti vopred pripravené statické HTML. Prvý postup je dlhodobo udržateľnejší.

Stačí len pridať robots.txt s povolením pre AI roboty?

Nestačí. robots.txt rieši, či robot smie vašu stránku stiahnuť. Nerieši, či po stiahnutí uvidí obsah. Ak vaša stránka servuje len HTML kostru a obsah generuje JavaScript, povolenie v robots.txt nepomôže — robot dostane prázdnu stránku a nemá z nej čo extrahovať.

Sú statické stránky cez SSG lepšie ako SSR?

Pre obsah, ktorý sa nemení často (články, kategórie, popisy produktov, dokumentácia), je statické generovanie ideálne. Stránka je predprerendrovaná pri zostavovaní a servuje sa ako súbor — rýchlejšie pre používateľa, robustnejšie pre robotov, lacnejšie na hosting. SSR má zmysel, keď sa obsah personalizuje pre používateľa alebo dáta menia v reálnom čase.

Ako merať dopad migrácie z SPA na SSR?

Klasické nástroje ako Google Search Console ukážu postupné zvyšovanie zobrazení a kliknutí. Pre meranie citačnej frekvencie v AI vyhľadávačoch (ChatGPT, Perplexity, Claude, Gemini, Google AI Overviews) sa používa visibility tracking — pravidelné dotazy na sady promptov a meranie, či a v akom kontexte sa doména objavuje. Optimálne sledovacie obdobie pre vyhodnotenie efektu migrácie je štyri až osem týždňov.

Aký je rozdiel medzi hydratáciou a vykresľovaním na serveri?

Vykresľovanie na serveri (SSR) znamená, že server vygeneruje hotové HTML. Hydratácia je proces, pri ktorom React v prehliadači prevezme už vyrenderovanú stránku a „oživí" ju — naviaže event handlery, obnoví stav, sprístupní interaktivitu. Pre robotov je dôležité len SSR výstupné HTML. Hydratácia bola spustená alebo nie ich nezaujíma, lebo bez JavaScriptu sa k nej nedostanú.

Zhrnutie

Indexovacie roboty AI vyhľadávačov v drvivej väčšine prípadov pracujú bez JavaScriptu. Common Crawl, z ktorého pochádza významná časť tréningových dát LLM modelov, JavaScript nevykonáva — a oficiálne dokumentácie GPTBota, ClaudeBota a PerplexityBota vykresľovanie cez Chromium ani inú prehliadačovú vrstvu nespomínajú. Praktický dôsledok je jednoznačný: ak váš web v zdrojovom kóde (View Source) neobsahuje hlavný obsah, AI vyhľadávače ho neuvidia.

Náprava nie je raketová veda. Migrácia z čistého CSR na Server Components v Next.js App Router je dnes priamočiara, pre statické weby je ideálne SSG cez Astro alebo Next.js, pre existujúce SPA bez plánovanej rekonštrukcie zafunguje prerendering vrstva. Investícia troch až štyroch týždňov vývojára vie pri stredne veľkom webe vrátiť doménu na citačnú mapu AI vyhľadávačov, kde dnes nie je.

Audit cez curl trvá pol hodiny a stojí nulu. Začnite tým.