Improving Web Page Performance Server-Side Rendering with Next.JS
- March 29, 2022
- JavaScript SEO
AI Summary
Moving from client side rendering to server side rendering with Next.js puts real HTML in the first response, which speeds up the largest contentful paint and gives crawlers content without waiting on JavaScript. The tradeoff is server work per request, so pair SSR with caching or incremental static regeneration to keep time to first byte low.
- Client side rendering ships an almost empty HTML shell, delaying paint and complicating crawling.
- Server side rendering returns full HTML per request, improving LCP and crawl reliability.
- Static generation and incremental static regeneration are fastest when pages are cacheable.
- Content in the initial HTML also helps AI crawlers that do not execute JavaScript.
This SEO case study documents a successful optimization initiative, providing actionable insights for practitioners. The documented approach demonstrates how strategic SEO implementation drives measurable results.
Initial Situation
Understanding the starting point is essential context for evaluating any case study. This documentation covers the initial challenges, competitive position, and business objectives that shaped the SEO strategy.
Strategy and Approach
The strategic approach combined multiple SEO disciplines to address identified opportunities. Key decisions around prioritization and resource allocation provide a template for similar initiatives.
Implementation
Moving from strategy to execution required specific technical implementations, content development, and process changes. This case study documents the practical steps that translated strategy into action.
Results and Learnings
The outcomes demonstrate effectiveness through measurable improvements in rankings, traffic, and business metrics. Analysis of successes and challenges provides learning value for practitioners.
Case studies like this contribute to the SEO knowledge base, helping practitioners learn from documented real-world experiences.
Why rendering strategy affects performance and SEO
Where a page is rendered decides what arrives in the first response. With client side rendering the server sends an almost empty HTML shell plus a JavaScript bundle, and the browser builds the page after the bundle loads and runs. That delays the largest contentful paint, and it makes crawling dependent on a second rendering pass. With server side rendering the server builds the full HTML for each request, so meaningful content is present in the first response, which typically improves the largest contentful paint and gives search and AI crawlers content without waiting on scripts.
Reading the DoorDash approach
The linked DoorDash Engineering write up describes moving pages to server side rendering with Next.js to improve web page performance. The goal is a faster first paint and a more reliable initial render, achieved by producing HTML on the server and then hydrating it in the browser so the page becomes interactive. Read it for the pattern rather than for a single metric, and note the tradeoffs the team had to manage, especially server load and time to first byte, which are the usual costs of rendering on every request.
How to implement it in Next.js
In the Pages Router you opt into server rendering with getServerSideProps, which runs on each request and passes data into the page before the HTML is sent. In the App Router, introduced in Next.js 13, React Server Components render on the server by default, and you mark interactive parts with a client boundary. Guard time to first byte by caching responses at a CDN, and prefer static generation or incremental static regeneration for pages that do not need per request data, so you serve prebuilt HTML and revalidate on a schedule. When diagnosing what Google actually receives, our guide to rendering JavaScript for SEO shows how to compare the raw and rendered HTML, and prerendering as a stopgap covers the case where a full SSR migration is not yet feasible.
What this means for SEO and AI search
Content that is present in the initial HTML is cheaper for Google to process, because it does not have to queue the page for a second rendering pass, and it is the only content that many AI crawlers see at all, since a number of them do not execute JavaScript. That makes server rendering or static generation a practical requirement for content you want cited in AI answers, a point our research on JavaScript and AI search develops, and our JavaScript SEO FAQ answers the common follow up questions.
What has changed since this write up
The Next.js App Router made React Server Components the default, shifting more work to the server without shipping that component code to the browser, and newer features such as streaming and partial prerendering let a page send a fast static shell while dynamic parts fill in. The direction of travel is clear: put meaningful HTML in the first response, and reserve client rendering for the interactive pieces that genuinely need it.
Rendering strategies compared
| Strategy | HTML in first response | LCP tendency | Best for |
|---|---|---|---|
| Client side rendering | Minimal shell | Slower | App like pages behind a login |
| Server side rendering | Full, built per request | Faster | Dynamic pages that need fresh data |
| Static generation | Full, prebuilt | Fastest | Stable content pages |
| Incremental static regeneration | Full, prebuilt then revalidated | Fastest when cached | Large sites that update on a schedule |
Frequently asked questions
Does server side rendering improve SEO?
It helps by placing real content in the first HTML response, which Google can process without a second rendering pass and which AI crawlers can read even when they do not run JavaScript. It also tends to improve the largest contentful paint.
What is the difference between SSR and SSG in Next.js?
Server side rendering builds the HTML on each request, so it suits pages that need fresh data. Static generation builds the HTML at deploy time, so it is faster to serve and best for stable content.
Is client side rendering bad for SEO?
It is riskier, because the initial HTML is nearly empty and content depends on scripts running. Google can render JavaScript, but it adds delay and cost, and many AI crawlers see only the empty shell.
How does SSR affect Core Web Vitals?
By delivering content in the first response, server rendering usually improves the largest contentful paint. Watch time to first byte, since rendering on every request adds server work that caching or static generation can offset.
Should I use the App Router or the Pages Router?
New projects usually start with the App Router, where server components render on the server by default. The Pages Router with getServerSideProps remains valid and is well understood for existing sites.
Do AI crawlers execute JavaScript?
Many do not, or do so inconsistently. Content you want available to AI answer engines should be present in the server rendered HTML rather than injected by client side scripts.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
Recent Posts
- Can AI Crawlers Actually Read Your Site? I Measured 400 of the Biggest September 5, 2026
- The Pre-Publish Quality Gate for AI-Assisted Content August 6, 2026
- AGENTS.md vs llms.txt vs llms-full.txt: Which Agent File Does What July 18, 2026