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

Written in front: Today I learned something that "blew my mind" — Next.js. In the past when we did frontend, SPA single-page applications had a great experience, but in the eyes of search engines they were "invisible" — crawlers followed the URL in, saw only an empty #root node, and turned right around. The teacher said that Next.js moves React components to server-side rendering (SSR), SEO is ridiculously good, and many AI product official websites are using it! This issue has a lot of content, so I split it into two parts: Part 1 first explains the "why" thoroughly — SEO, CSR/SSR, GEO; Part 2 will cover the "how" — App Router, server/client components, and a full-stack Todos demo. Ready? Let's begin!

---

1. SEO: The "Lifeline" of Frontend Websites

1.1 The Benefits of SPA: The Experience Ceiling

The teacher said:

"The experience is great. Components are mounted on the frontend (useEffect to asynchronously request data), no need to refresh the page. Frontend routing support makes page transitions fast and good."

From the user's perspective, the advantages of SPA (Single Page Application) are indeed the ceiling:

Advantage	Explanation
Great experience	Components mount on the frontend, use useEffect to asynchronously request data, no page refresh
Fast transitions	Frontend routing support, page transitions are fast and good
Like a native App	SPA copied the native APP experience, making it exactly like an APP

1.2 The Shortcoming of SPA: "Invisible" to Crawlers

But! The teacher said a brutally honest truth:

"It's simply not made for SEO, not meant to be opened via browser search engines (baidu, google)" "SEO is very poor, no SEO #root node"

Why? Because the HTML of an SPA looks like this:

<div id="root"></div>
<script src="main.js"></script>

The crawler follows the URL in, #root is empty, and all the content relies on main.js to be "cooked up on the spot" in the browser. The crawler doesn't order; it only looks at the display window — if the window is empty, it leaves.

1.3 The Mobile Era: 20% Native, 80% SPA

So why does the frontend world still love SPA so much? Because the logic changed in the mobile era:

The teacher said:

"Mobile era (Super Apps, 20% native, 80% are SPA)" "80% of pages in Apps are made with SPA. Native requires writing two sets. The WebView component is used to display web pages, done by the frontend." "HTML only needs to be written once, no need to write two sets."

In super apps like WeChat and Douyin, 20% are native pages (requiring writing both Android and iOS versions), and 80% are SPA (one HTML works for all). But the PC era is different:

"In the PC era, the traffic entry point is the search engine, SEO is life"

In the PC era, the traffic entry point is the search engine, SEO is life. The traffic for established content sites (Juejin, CSDN) is basically all brought in by SEO. Therefore, beyond mainstream SPA development, a full-stack, SEO-friendly framework like Next.js is needed.

---

2. The Basics of SEO: Three Layers

So how exactly is SEO done? The teacher said there are three layers:

"First layer: Who are you? title What do you do? description What value do you provide? keywords" "Second layer: Create content, the reason users come" "Third layer: ssr server-side rendering"

First layer, decorate the storefront:

<title>My Website</title>
<meta name="description" content="This is a description" />
<meta name="keywords" content="This is a keyword" />

Second layer, create content — why should users come? You need real substance.

Third layer, SSR server-side rendering — this is the root cure:

"/post/:id one page, tens of millions of articles, ssr, the entire site gets weighted by SEO indexed content"

As a content-based website gets its articles indexed one by one, the SEO weighting increases more and more. This is the underlying logic that keeps established content sites (Juejin, CSDN) alive.

---

3. CSR and SSR: Where Exactly the Component Renders

3.1 CSR: Client-Side Rendering

The SPA model is CSR (Client Side Rendering):

Stage	Who is working
Server	The server where the frontend project resides, only returns index.html
Client	The user's browser, runs main.js, App.jsx, Todos.jsx to render the page

When a crawler fetches via URL, it only sees #root + script. The content is generated on the client side — SEO is naturally zero.

3.2 SSR: Server-Side Rendering

Next.js's killer feature is SSR (Server Side Rendering):

"jsx + todos(data) = server-side UI html"

React components can actually run on the backend — as long as the component doesn't do event listening or use useEffect, it is just a function + template that can be compiled into an HTML string in a Node environment. What the server returns is a complete HTML with content, which the crawler can read directly.

3.3 Frontend-Backend Separation vs. Full-Stack

In the past with Java full-stack, frontend and backend were separated: server, 3000 port, /todos was a backend route, the controller handled the request, queried MySQL for data, and returned a JSON array. The frontend got the JSON and rendered it itself.

But a full-stack project is different: what the /todos URL returns is directly the HTML compiled from the React component. The fundamental difference between CSR and SSR is — where exactly the component renders:

	CSR	SSR
Rendering location	Client (Browser)	Server (Node)
What the crawler sees	Empty #root	Complete HTML
Representative	Pure SPA	Next.js

---

4. GEO: Generative Engine Optimization

Before SEO is even fully understood, a new term arrives: GEO (Generative Engine Optimization).

The teacher said:

"User entry point: Doubao" "When generating, include our content, purchase links"

User entry points have changed now. Many people don't search Baidu anymore; they directly ask AI like Doubao. When the AI generates an answer, it includes relevant content and purchase links. Moreover:

"AI is super powerful, OPC products are a dime a dozen, AI Agent product sites, use SEO to promote"

AI products are a dime a dozen, and official websites still need SEO for promotion. So you not only have to serve search engine crawlers, but also please AI generative engines.

---

Written at the End (Part 1)

Today we thoroughly explained the "why": SPA has a great experience but SEO is its shortcoming; among the three layers of SEO, the most powerful is SSR — moving React components to the server for rendering so crawlers can read the complete content; now you also have to serve GEO, making sure even AI entry points like Doubao can find you.

In the next part (Part 2), we'll look at the "how": creating a full-stack project with a single create-next-app command, the App Router where convention is greater than everything, how to organize layout.tsx / page.tsx / route.ts, and we'll walk through a full-stack Todos demo step-by-step.

Next time an interviewer asks you: "What are the shortcomings of SPA? What's the difference between CSR and SSR?"

You can calmly say:

"SPA is client-side rendering (CSR). Components mount on the frontend, using useEffect to asynchronously request data. The experience is good and transitions are fast, but the HTML only has an empty #root node. Crawlers can't grab the content, so SEO is very poor. SSR is server-side rendering. React components are compiled into HTML on the server and then returned. As long as the component doesn't do event listening or use useEffect, it can render into a string in a Node environment, and crawlers can directly read the complete content. In the PC era, the traffic entry point was the search engine, SEO was life, so beyond mainstream SPA, a full-stack, SEO-friendly framework like Next.js is needed. Now there's also GEO — Generative Engine Optimization, where even AI entry points like Doubao need to be able to find your content."

Then watch the interviewer's satisfied expression, and silently think to yourself: This round, secured again.

---

All code examples in this article come from classroom learning materials and are real and runnable.