Zpracovávají AI crawleři JavaScript? Náš web je v Reactu a mám obavy

Krátká odpověď: AI crawlery většinou JavaScript dobře nevykreslují. Tady je rozbor.

Schopnosti crawlerů ve vykreslování JavaScriptu:

Praktická realita:

Pokud je váš obsah závislý na JavaScriptu:

• Pravděpodobně je pro většinu AI crawlerů neviditelný
• V ChatGPT vás nezacituji
• Perplexity část obsahu získá, ale nekonzistentně
• Přicházíte o AI viditelnost

Hierarchie řešení:

Nejlepší: Server-side rendering (SSR)

• Next.js s getServerSideProps
• Nuxt.js v SSR režimu
• Obsah v počáteční HTML odpovědi

Dobré: Statická generace webu (SSG)

• Předrenderované HTML pro všechny stránky
• Generace při buildu
• Funguje pro obsah, který se často nemění

Přijatelné: Předrenderovací služby

• Prerender.io, podobné služby
• Detekuje boty, servíruje předrenderované HTML
• Vyšší složitost a náklady

Nedoporučeno pro AI viditelnost:

• Čistě client-side rendering
• Načítání obsahu přes API až po načtení stránky
• Dynamický obsah bez zálohy

Vaše situace:

Plné React SPA = pravděpodobně neviditelné pro AI. Migrace na SSR je téměř jistě nutná pro AI viditelnost.

Tímto jsme si prošli. Tady je naše zkušenost.

Naše původní řešení:

• Create React App (CRA)
• Veškerý obsah renderovaný na klientovi
• Načítání obsahu přes API

Migrace na Next.js:

Časový rámec: 6 týdnů na 50 stránek

Klíčové kroky:

1. Spustit Next.js projekt
2. Migrovat komponenty (většinou fungovaly beze změn)
3. Implementovat getServerSideProps pro načítání dat
4. Převést routování na Next.js konvence
5. Testovat s vypnutým JS
6. Nasadit a ověřit

Výzvy:

• Výrazně se změnily způsoby načítání dat
• Některé knihovny určené pouze pro klienta jsme museli nahradit
• Doba buildu se prodloužila (SSR má režii)
• Museli jsme přepracovat strategii cachování

Výsledky:

AI viditelnost:

• Předtím: 5% citací na naše témata
• Poté: 28% citací
• Perplexity nás začal konzistentně citovat

SEO:

• Zrychlilo se načítání první významné části stránky
• Google pozice se mírně zlepšily
• Core Web Vitals lepší

Vyplatilo se to?

Rozhodně. Investice se nám vrátila do 3 měsíců díky lepší viditelnosti.

Jak ověřit, co skutečně AI crawlery vidí.

Testovací metody:

Metoda 1: Vypnout JavaScript

V DevTools prohlížeče:

• Nastavení → Předvolby → Vypnout JavaScript
• Zobrazte stránku
• Co vidíte = co většina AI crawlerů vidí

Metoda 2: Curl/Wget

curl https://yoursite.com/page

Stáhne čisté HTML. Pokud tam váš obsah není, AI crawlery ho neuvidí.

Metoda 3: Zkontrolujte serverové logy

Hledejte požadavky od:

• GPTBot
• ClaudeBot
• PerplexityBot

Zkontrolujte návratové kódy. 200 s prázdným tělem = problém.

Metoda 4: Google Search Console

Použijte funkci “Zobrazit vykreslenou stránku”. I když je to Google (který JS renderuje), ukáže vám ideální stav pro crawlery.

Metoda 5: Sledujte AI viditelnost

Použijte Am I Cited pro sledování, zda jste citováni. Pokud jste neviditelní i přes kvalitní obsah, problém je nejspíš v JS renderování.

Rychlý test:

Pokud váš hlavní obsah není vidět ve výstupu curl, máte problém.

Specifika implementace Next.js pro AI viditelnost.

Klíčové vzory:

Pro obsahové stránky:

export async function getServerSideProps() {
  const data = await fetchContent();
  return { props: { data } };
}

Obsah se načte na serveru, je součástí počátečního HTML.

Pro statický obsah:

export async function getStaticProps() {
  const data = await fetchContent();
  return {
    props: { data },
    revalidate: 3600 // ISR, rebuild každou hodinu
  };
}

Ještě lepší – předrenderováno při buildu.

Časté chyby:

1. Použití useEffect pro klíčový obsah

// ŠPATNĚ – obsah načtený až na klientovi
useEffect(() => {
  fetch('/api/content').then(setContent);
}, []);

2. Lazy loading hlavního obsahu

// ŠPATNĚ pro AI – obsah načten až po prvním renderu
const Content = lazy(() => import('./Content'));

3. Chybějící fallback u dynamických rout

// SPRÁVNĚ – fallback pro stránky generované za běhu
export async function getStaticPaths() {
  return { paths: [...], fallback: 'blocking' };
}

Zlaté pravidlo:

Pokud je obsah důležitý pro AI viditelnost, musí být v počáteční HTML odpovědi. Bez výjimek.

Pohled Nuxt.js pro uživatele Vue.

Platí stejné principy:

SSR režim (výchozí v Nuxt 3):

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Načítání dat s useAsyncData:

const { data } = await useAsyncData('content',
  () => $fetch('/api/content')
);

Běží na serveru, obsah je v počátečním HTML.

Statická generace:

npx nuxi generate

Předrenderuje všechny stránky do statického HTML.

Výhody Nuxtu:

• SSR je výchozí
• Hybridní režim (některé stránky statické, jiné SSR)
• Snadná migrace z Vue SPA

Ověření:

Platí stejné testy – vypněte JS, ověřte, že se obsah zobrazí.

Pro Vue SPA: migrace na Nuxt je cesta k AI viditelnosti.

Výkonnostní hlediska SSR.

Kompromisy:

SSR zvyšuje zátěž serveru:

• Každý požadavek renderuje stránku
• Vyšší využití CPU
• Potřebujete správné cachování

Možnosti zmírnění:

CDN s edge cachováním:

Cache-Control: public, max-age=3600, stale-while-revalidate=86400

Cacheujte vykreslené HTML pro boty i uživatele.

Incremental Static Regeneration (ISR):

Nejlepší z obou světů:

• Statické stránky pro rychlost
• Pozadí regenerace pro aktuálnost
• Skvělé pro obsahové weby

Edge rendering:

Vercel Edge Functions, Cloudflare Workers:

• Renderování na okraji sítě
• Nižší latence
• Blíže uživatelům i botům

Poznámka pro AI boty:

AI crawlery nepotřebují personalizovaný obsah. Můžete cacheovat agresivně:

• Detekovat uživatelský agent bota
• Servírovat cacheované HTML
• Dostatečně čerstvé pro viditelnost

Výkon + AI viditelnost lze skloubit:

SSR nemusí znamenat pomalost. Se správným cachováním získáte AI viditelnost I dobrý výkon.

Architektura CMS pro AI viditelnost.

Výzva headless řešení:

Mnoho headless řešení:

• CMS ukládá obsah
• Frontend načítá přes API
• Obsah se načítá na klientovi

To je pro AI crawlery neviditelné.

Řešení architektury:

CMS → Build/SSR vrstva → CDN → Uživatelé/Boti
         ↓
    Předrenderované HTML

Možnosti implementace:

Statická generace při buildu:

• Tahání z CMS při buildu
• Generování statického HTML
• Spouštění rebuildu při změně obsahu

SSR s cachováním:

• Načítání z CMS při požadavku
• Renderování na serveru
• Cacheování na CDN

Běžné CMS vzory:

Contentful/Sanity + Next.js:

export async function getStaticProps() {
  const content = await cmsClient.getContent();
  return { props: { content }, revalidate: 60 };
}

WordPress + Gatsby:

• Tahání při buildu
• Statická generace webu
• Webhook rebuild při publikaci

Klíčové:

Obsah se musí z CMS dostat do HTML dřív, než stránku dostane AI crawler.

Tato diskuze mi odpověděla na všechny otázky.

Co jsem zjistil:

1. AI crawlery nevykreslují JS – Naše SPA je pro ně neviditelné
2. SSR je řešení – Migrace na Next.js je cesta vpřed
3. Testování je snadné – Vypnout JS, curlnout stránku, zkontrolovat logy
4. Migrace je proveditelná – 6týdenní harmonogram je realistický
5. Výkon je zvládnutelný – Cachování a ISR řeší obavy

Náš plán:

1. Otestovat současný stav – Potvrdit problém s AI viditelností pomocí curl
2. Návrh týmu – Předložit případ migrace na Next.js
3. Začít s klíčovými stránkami – Nejprve blog, produktové stránky
4. Ověřit AI viditelnost – Sledovat přes Am I Cited po migraci
5. Dokončit migraci – Nasadit na celý web

Obchodní argument:

Jsme neviditelní pro 70%+ Američanů používajících AI vyhledávání. To za 6týdenní migraci stojí.

Díky za technickou hloubku!