Migrare React SPA către SSG: cum să rezolvi indexarea Google

Ai livrat o aplicație React rapidă, fluidă, îngrijită. Lighthouse Performance afișează 95. Și totuși, trei săptămâni mai târziu, Google Search Console semnalează Soft 404 pe jumătate din rutele tale. Paginile tale de produs, articolele, serviciile: indexate cu picătura, uneori deloc. Problema nu este codul tău, ci randarea. Un SPA clasic servește un HTML aproape gol pe care Googlebot trebuie să-l hidrateze singur, cu un buget JavaScript limitat și imprevizibil.

Vestea bună: trecerea la Static Site Generation (SSG) nu necesită refacerea întregii aplicații. Pe trei proiecte de client migrate la începutul anului 2026, am păstrat aceeași bază Vite + React, adăugând doar o etapă de pre-randare rută cu rută. Iată metoda și capcanele.

De ce Googlebot ignoră SPA-ul tău React

Un SPA livrează un fișier index.html care conține în mare <div id="root"></div> și un bundle JS. Conținutul real este injectat pe client după hidratare. Googlebot știe să execute JS, dar cu un buget constrâns și asincron: pagina trece mai întâi printr-o coadă de randare, uneori mai multe zile. Dacă TTFB-ul sau bundle-ul tău depășesc anumite praguri, Google indexează HTML-ul brut, deci nimic. Rezultat: Soft 404, snippets goale în rezultate, distribuiri OpenGraph stricate pe LinkedIn și iMessage.

SSG inversează logica. Fiecare rută este pre-randată în HTML complet în momentul build-ului. Googlebot, Bingbot, crawler-ele sociale și cititoarele RSS primesc un document imediat lizibil, fără să execute o linie de JavaScript. Hidratarea pe client rămâne, pentru a păstra interactivitatea React obișnuită.

SSG fără a reface întreaga aplicație

Pentru un proiect Vite + React existent, vite-react-ssg este opțiunea cea mai directă. Păstrăm router-ul, componentele, hook-urile, apelurile Supabase. Înlocuim pur și simplu punctul de intrare main.tsx cu un export ViteReactSSG care listează rutele de pre-randat și înlocuim în package.json scriptul vite build cu vite-react-ssg build. Restul codului aplicativ nu se mișcă.

La build, fiecare rută generează un folder cu propriul index.html: dist/contact/index.html, dist/portfolio/z-depannage/index.html etc. Pe partea de Vercel, setăm cleanUrls: true în vercel.json și eliminăm orice regulă de rewrite SPA care ar redirecționa totul către index.html, altfel pre-randarea este mascată.

vite-react-ssg vs Next.js vs Astro: ce alegem?

vite-react-ssg este alegerea potrivită atunci când baza există deja în Vite + React și vrem doar etapa de pre-randare. Migrare într-o zi pe un proiect de dimensiune medie, zero refacere a codului de business.

Next.js este un framework complet cu propriul router, propriile convenții, App Router-ul propriu. Excelent pentru un proiect nou, dar o migrare de la Vite implică rescrierea routing-ului, a layout-urilor, a convențiilor de fișiere și adesea a autentificării. De la câteva zile la câteva săptămâni, în funcție de mărime.

Astro strălucește pe site-urile pur editoriale (bloguri, documentații, landing). Pe o aplicație bogată în interacțiuni React, modelul său de islands obligă la fragmentarea interfeței în componente izolate, hidratate la cerere, ceea ce complică partajarea stării globale.

Checklist de validare post-migrare

Trei verificări nenegociabile după fiecare build. În primul rând, folderul dist/ trebuie să conțină un index.html per rută, iar fiecare fișier trebuie să aibă mai mulți kiloocteți, nu doar coaja SPA. În al doilea rând, deschizi unul dintre aceste HTML-uri și confirmi prezența data-server-rendered="true" pe rădăcină, precum și a secțiunilor semantice pline (main, article, section) care conțin textul real. În al treilea rând, validezi prin curl sau prin inspectorul Google Search Console că versiunea servită în producție corespunde efectiv HTML-ului pre-randat.

Trei capcane recurente. Bug-ul manifest-undefined din vite-react-ssg strică paginile 404 din punct de vedere SEO: workaround simplu, creezi un fișier gol public/static-loader-data-manifest-undefined.json care conține {}. Directiva CSP script-src trebuie să păstreze 'unsafe-inline' deoarece hidratarea injectează script-uri inline obligatorii. În final, verifică faptul că scriptul build din package.json este într-adevăr vite-react-ssg build și nu vite build, altfel Vercel desfășoară o versiune CSR fără să își dea seama.

Rezultate pe 3 site-uri

Trei migrări livrate: Z-Dépannage și Milena Glow Up, plus un portofoliu personal. Scoruri Lighthouse trecute de la 60-70 la 95-100 pe cele patru categorii. Timp de indexare Google împărțit la cinci: de la 1-4 săptămâni la 3-7 zile în medie, măsurat în Search Console. OpenGraph fiabil pe toate distribuirile sociale, snippets corecte în rezultate, niciun Soft 404 semnalat.

Dacă proiectul tău React începe să primească trafic organic și metricile tale de indexare stagnează, SSG-ul prin vite-react-ssg este probabil pârghia cu cel mai bun raport efort/impact. Câteva ore de integrare, câștiguri durabile pe referențiere și pe performanța percepută. Pentru un audit sau o însoțire de migrare, pagina contact rămâne punctul de intrare cel mai direct.