Every few hours I am reminded of just how cool it is that we can generate code based on a few prompts. More than anything, it’s given me so much time back. Things that would have taken hours of research, tinkering, and frankly failing, now don’t need my in-depth focus. They kind of just happen.

And then, a few moments later, I am reminded they kind of DON’T just happen.

Scrolling through Reddit, X, and LinkedIn is like walking through a modern art museum filled with micro animations, scrolling that takes me into a new world, and art made from binary. This is great. I want you to keep bringing life to their designs. However, you need to do so in a way that allows your work to be seen and discovered.

What is Client Side Rendering (CSR)?

Client-side rendering sends an almost empty HTML file with JavaScript to the browser. When your website loads, it runs that JavaScript in real time on the visitor’s machine.

What the browser actually receives first:

<!DOCTYPE html>
<html>
  <head>
    <title>My Cool Site</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/static/js/main.abc123.js"></script>
  </body>
</html>

Common Frameworks

Vite + React

When CSR is the right call

SaaS dashboards and account pages
Highly interactive UI and complex animations
Apps behind a login where SEO doesn’t matter

When CSR will hurt you

SEO-focused landing pages
Pages benefited by being searched by AI
Content-heavy sites (blogs, docs, marketing)
Any situation where fast first-load is critical

The Problem Often Overlooked

Here’s what’s actually happening when Google or ChatGPT crawlers visit your CSR landing page:

Google’s web crawler arrives. It downloads an empty HTML shell. It sees one <div id="root"> and a script tag. It has no idea what your product does, who it’s for, or why anyone should care.

This is becoming increasingly important. New research indicates that ChatGPT referral traffic is converting at 31% better than regular organic traffic. AI-referred visitors have strong intent, but only if they can actually be matched with information about your site.

You can try this on your own. If you have a website that is client-side rendered, try clicking “temporary chat” on ChatGPT, enabling the web browser tool, and asking ChatGPT what your site does. It will struggle.

What is Server Side Rendering (SSR)?

Server-side rendering does the work before the page ever reaches the visitor. When someone requests your page, the server builds the full HTML with content, headlines, copy, and structure.

What the browser actually receives:

<!DOCTYPE html>
<html>
  <head>
    <title>My Cool Site</title>
  </head>
  <body>
    <div id="root">
      <h1>Welcome to My Cool Site</h1>
      <p>This content was rendered on the server.</p>
    </div>
    <script src="/static/js/main.abc123.js"></script>
  </body>
</html>

Google and ChatGPT crawlers can now see the full content immediately and can start to index your page.

Common Frameworks

Next.js
Nuxt
Astro
Remix

When SSR is the right call

SEO-focused landing pages
Content sites (blogs, docs, marketing pages)

When SSR may not be ideal

Highly interactive apps with frequent state updates
When added server complexity or hosting cost is a concern
If every route requires a round-trip, page transitions can feel slower

Next.js Lets You Mix Both

Use SSR for the parts of the website that matter for SEO—both traditional and AI based. Then use CSR for animations or interactive pieces. The flow:

Server sends full HTML that is content rich
Browser loads with relevant content immediately
JavaScript runs animations, interactions, and dynamic elements

The Tools You’re Using and What They Default To

If you’re using AI tools to scaffold your projects, here’s what’s happening under the hood:

Tool	Default Rendering	Best For
v0 + Vercel	SSR (Next.js)	Landing pages
Bolt	CSR (Vite + React)	Apps, dashboards
Lovable	CSR (React)	Apps, dashboards
Cursor + Vite	CSR (Vite + React)	Apps, dashboards
Cursor + Next.js	SSR	Landing pages

What to Actually Ask Your Cursor, Codex, or Claude

When you’re starting a landing page project, be explicit. Drop this into your initial prompt:

“Use Next.js App Router project. The landing page should be server-side rendered. Only use client components where interactivity or animation is specifically needed.”

That one instruction will save you from rebuilding later.

The Takeaway

There’s constant debates on how CSR pages actually work in a SEO context. I’ve seen people argue that CSR is totally fine for Google but just takes some extra time to index. Others say that no matter how long, it never does as good of a job.

From my own testing, it seems to really matter for AI web search from ChatGPT or Claude. For most basic use cases, I would suggest to start with Next.js until you find a reason to do something else.

Resources

If you’re building with a CSR tool like Lovable and want to improve your SEO without migrating frameworks, Lovable has published a thorough guide covering sitemaps, meta tags, structured data, Open Graph images, GEO for AI crawlers, and performance tuning:

Implement SEO and GEO Best Practices

docs.lovable.dev