Frontend · JavaScript

SPA Sites Are Invisible to Crawlers. SSR and GEO Are Changing the Rules.

By 默_笙 · Aug 25, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

A site built as a pure client-rendered SPA is invisible to Google, Bing, and now AI answer engines — no matter how good the UX feels. SSR and the emerging practice of GEO determine whether a product's pages get surfaced at all, which directly affects traffic, acquisition cost, and revenue for any content or commerce site.

Summary

SPAs mount components in the browser with useEffect and client-side routing, which feels fast and native-like. But the HTML a crawler sees is just an empty #root div and a script tag — content is invisible until JavaScript runs. That makes SEO effectively zero, a fatal flaw in the PC era where search engines were the main traffic gateway. Mobile super-apps changed the calculus: 80% of in-app pages are SPAs rendered in a WebView, written once instead of twice for Android and iOS. Still, any content site that depends on organic search needs a different approach.

Server-side rendering moves React component rendering to a Node server. As long as a component avoids event handlers and useEffect, it's just a function that can compile to an HTML string. The server returns a complete, content-filled page that crawlers can read immediately. This is the engine behind Next.js and the reason established content platforms like Juejin and CSDN survive on SEO weight accumulated across millions of indexed pages.

A newer layer is Generative Engine Optimization. Users increasingly skip traditional search and ask AI tools like ByteDance's Doubao directly. Those AI engines pull in content and purchase links when generating answers, so sites now need to be legible to both classic crawlers and generative models. The same SSR techniques that serve Google also serve the AI entry points replacing it.

Takeaways

— SPAs return an HTML shell with an empty #root node; all content is generated client-side, so crawlers see nothing and SEO is near zero.

— Mobile super-apps use SPAs extensively — roughly 80% of in-app pages — because one HTML codebase serves both Android and iOS via WebView.

— SEO has three layers: meta tags (title, description, keywords), substantive content, and server-side rendering that delivers complete HTML to crawlers.

— SSR works because React components that avoid event handlers and useEffect are pure functions that can compile to HTML strings in a Node environment.

— CSR renders components in the browser; SSR renders them on the server. The difference is where the component runs, not what the user ultimately sees.

— Generative Engine Optimization targets AI answer engines like Doubao, which now serve as user entry points and pull content and links into generated responses.

— Content sites accumulate SEO weight over time as individual article pages get indexed, which is the core moat for platforms like Juejin and CSDN.

Conclusions

The shift from search-engine crawlers to AI answer engines doesn't change the underlying technical requirement — both need server-rendered, structured content to ingest. SSR solves for both simultaneously, which makes the investment pay off twice.

Mobile super-apps created a generation of frontend developers who never had to care about SEO because traffic came from in-app feeds, not Google. That gap is now closing as AI agents and web surfaces converge.

The three-layer SEO model (meta tags, content, SSR) maps cleanly onto GEO: the same complete HTML that feeds a crawler also feeds an AI model's retrieval pipeline. The optimization target changed, but the technique didn't.

Concepts & terms

CSR (Client-Side Rendering)

The browser downloads a minimal HTML shell and a JavaScript bundle, then executes the JS to build the DOM and fetch data. Crawlers see only the empty shell before JS runs, so content is not indexed.

SSR (Server-Side Rendering)

React components are executed on a Node server and compiled into a complete HTML string before being sent to the browser. Crawlers receive fully populated markup, making all content indexable immediately.

GEO (Generative Engine Optimization)

Optimizing web content so that AI answer engines (like Doubao, ChatGPT, or Perplexity) can retrieve and surface it in generated responses, including links and product references.

WebView

A native app component that embeds a browser engine to display web pages inside a mobile application, allowing SPAs written once in HTML/JS to run on both Android and iOS.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗