# What Is Client-Side Rendering (CSR)?

> Client-side rendering builds pages in the browser with JavaScript. Why JavaScript-only sites can look empty to AI crawlers like GPTBot, and how to fix it.

Source: https://pentaclay.com/glossary/client-side-rendering

Glossary

# What is client-side rendering (CSR)?

Client-side rendering (CSR) is a way of building web pages in which the server sends a mostly empty HTML file and the visitor’s browser runs JavaScript to fetch the content and draw the page.

Also called CSR, single-page application, SPA

## How it works

Single-page applications built with React, Vue or similar libraries often render this way. The first response contains little more than a div and a script tag. The browser downloads the script, runs it, requests data and only then shows headings, text and images.

It works well for apps people log into, such as dashboards and editors, where the page changes constantly and search engines do not need to read it.

## Why JavaScript-only sites are invisible to AI crawlers

A crawler that does not run JavaScript sees only that first, empty response. Google renders JavaScript, often with a delay, but many AI crawlers do not: a December 2024 analysis of crawler traffic by Vercel and MERJ found that the crawlers used by OpenAI, Anthropic and Perplexity did not execute JavaScript.

For a B2B company, that means ChatGPT, Claude or Perplexity may have no idea what your product does, even though the site looks fine to every human visitor.

## Where B2B sites run into it

-   Marketing sites generated by AI app builders such as Lovable or Bolt, which output client-side React apps
-   Sites built by a product team inside the app’s own front-end stack
-   Content loaded by third-party widgets, such as job boards, reviews or pricing tables
-   Tabs and accordions whose text is only fetched when clicked

## Example

Fetch a client-side rendered homepage with a plain HTTP request and you may get a title tag, a few script tags and the text “You need to enable JavaScript to run this app.” That sentence is what a non-rendering crawler learns about the company.

## How we handle it

We keep marketing pages out of client-side rendering. Pages are generated as HTML or rendered on the server, and JavaScript only adds interaction. For sites made with AI app builders, our [Lovable to Next.js](https://pentaclay.com/migrations/lovable-to-nextjs) service keeps the design and moves the content into HTML that crawlers can read.

Read next

-   [Lovable to Next.js](https://pentaclay.com/migrations/lovable-to-nextjs)
-   [AI search optimization](https://pentaclay.com/services/ai-search-optimization)

Last updated 15 November 2026

Related terms

## Terms that go with client-side rendering

-   [Server-side rendering (SSR) Server-side rendering (SSR) is a way of delivering web pages in which the server builds the complete HTML for a page when it is requested, so the browser, search engines and AI crawlers receive the full content straight away.](https://pentaclay.com/glossary/server-side-rendering)
-   [Static site generation (SSG) Static site generation (SSG) is a way of building a website in which every page is turned into a finished HTML file ahead of time, during a build step, so the server only has to send ready-made files when someone visits.](https://pentaclay.com/glossary/static-site-generation)
-   [Next.js Next.js is an open-source framework, built on React and maintained by Vercel, for building websites and web applications that can render pages on the server, at build time or in the browser.](https://pentaclay.com/glossary/nextjs)
-   [Generative engine optimization (GEO) Generative engine optimization (GEO) is the practice of making a website’s content easy for AI systems that write answers, such as ChatGPT, Perplexity, Gemini and Google’s AI Overviews, to find, understand and cite as a source.](https://pentaclay.com/glossary/generative-engine-optimization)

[All glossary terms](https://pentaclay.com/glossary)

## Questions about client-side rendering

### Can’t find your answer?

Book a call and let’s talk.

[Book a call](https://cal.com/pentaclay/discovery-call)

Or email us at [contact@pentaclay.com](mailto:contact@pentaclay.com)

How do I check if my site relies on client-side rendering?

Use View Page Source in your browser, not the inspector, and search for a sentence you can see on the page. If it is not in the source, it is drawn by JavaScript. You can also fetch the page with a command-line tool such as curl.

Does Google index client-side rendered pages?

Usually, yes. Googlebot runs JavaScript, though rendering can be delayed and errors can leave content out. Many AI crawlers and some other search engines are less reliable.

Do I have to rebuild my whole site to fix it?

Not always. Frameworks such as Next.js can render the same React components on the server, so the design and much of the code can be kept. Pre-rendering services are a stopgap.

Are Lovable and Bolt sites bad for SEO?

They are fast to build, but their default output is a client-side app. Unless they are set up to pre-render, crawlers that do not run JavaScript see little content.

## Your business grew up. Your website should too

If customers need a demo just to understand what you sell, your website isn’t doing its job.

-   We sign an NDA on request.
-   You own the site, the code and every account once it’s paid.
-   Your first call is with Erfan, the founder.

**Kazi Mohammed Erfan** Founder

Don’t want to fill in the form? [Book a call directly](https://cal.com/pentaclay/discovery-call)

## Not sure? Ask AI about Pentaclay

### Pentaclay, in short

Updated 17 Oct 2026

Pentaclay is a B2B website design agency for AI companies that sell to enterprises. We write, design and build marketing websites in Framer, Webflow and Next.js, and stay to help after launch. Pentaclay LLC is registered in New Mexico, USA; our team works from Dhaka, Bangladesh, with calls until 12:30pm US Eastern. Founded in 2023 by Kazi Mohammed Erfan, who brings 12 years of design experience.
