Foundgrove
← All posts

Web Design · 10 min read

Static Generation vs SSR: Which for a Marketing Site?

Summary

SSG, SSR, ISR, edge — Next.js gives you four rendering strategies. For 95% of marketing pages, the answer is SSG. Here is the decision tree.

By Hyder Shah, Founder & CEO · Published June 12, 2026 · Updated July 26, 2026

Pick the wrong rendering strategy and you either pay too much for hosting, ship slow pages, or stop being able to update content without a deploy. Next.js gives you four options — SSG, SSR, ISR, and edge — and most teams reach for SSR by default because it feels safer. It is not. For a marketing site, SSR is usually the wrong call.

This guide lays out a decision tree you can apply on any project. It is opinionated because the wrong defaults compound. For the broader Next.js context, see the marketing sites pillar.

What does each rendering strategy actually mean?

Next.js 15's App Router exposes four rendering modes. They are not mutually exclusive — different pages in the same app can use different modes. The choice is made per route, usually with a single line of configuration.

  • Static Site Generation (SSG) — HTML rendered at build time, served from CDN, zero per-request server work, response time <100ms
  • Server-Side Rendering (SSR) — HTML rendered on every request, response time 200-800ms, lets you personalize per user
  • Incremental Static Regeneration (ISR) — SSG but the HTML revalidates on a schedule (e.g. every 60 seconds) or on demand
  • Edge runtime — code runs at the CDN edge (Vercel Edge, Cloudflare Workers), 10-50ms cold start, useful for geo/auth middleware

Why is SSG the default answer for marketing pages?

A marketing page — your home page, services pages, industry landing pages, blog posts — has the same HTML for every visitor on every request. Rendering that HTML on every request (SSR) is pure waste. Render it once at build time, push it to a CDN, and serve it in 50ms from a city near the visitor.

Concretely: a Next.js services page rendered via SSG and served from Vercel's CDN responds in 30-80ms globally. The same page on SSR with a database lookup responds in 250-600ms, depending on origin region and database latency. The SSG version also costs nothing at scale because CDN egress is essentially free, while SSR scales with serverless function invocations.

That few hundred milliseconds is not an abstraction — it comes straight out of your LCP budget. Google's Core Web Vitals thresholds allow an LCP of 2.5 seconds or less at the 75th percentile of real page loads. Every millisecond your server spends rendering HTML is a millisecond the browser has not started downloading the hero image. Going SSR on a page that did not need it can quietly eat 400ms of a 2,500ms budget before the visitor's browser does any work at all.

And the money follows the milliseconds. The Deloitte and Google 'Milliseconds Make Millions' study, covering 37 brand sites and over 30 million sessions, found that a 0.1-second improvement in mobile site speed came with a 21.6% improvement in the number of users who progressed to the form-submission page on lead-generation sites. It is 2020 data and it is correlational, not a controlled experiment — but if a tenth of a second sits near a lift like that, choosing SSR by reflex on a page that is identical for every visitor is an expensive shrug.

Worth keeping honest, though: Google's own page experience documentation confirms that 'Core Web Vitals are used by our ranking systems' while stating there is 'no single signal' and that good scores do not guarantee top rankings. Picking SSG over SSR is not a ranking hack. It is removing a self-inflicted handicap on a page that had no reason to carry one.

When should you use ISR instead of plain SSG?

Incremental Static Regeneration is the right call when content updates more often than you deploy. Three common cases on marketing sites: the blog index that needs a new post to appear without redeploying, a case-studies page where new entries land from a CMS, and a pricing page that the founder edits in production.

  • Blog index page — revalidate: 300 (5 minutes), new posts from CMS show up automatically
  • Case studies index — revalidate: 600 (10 minutes), or on-demand revalidation via webhook from CMS
  • Pricing page — revalidate: 60 (1 minute) if pricing is fluid; or use on-demand revalidation when the CMS publishes
  • Author/team pages — revalidate: 3600 (1 hour), bios change but rarely
  • Stats or counter pages — revalidate: 86400 (1 day) if numbers come from analytics

ISR's killer feature is on-demand revalidation via res.revalidate() or revalidatePath(). When your CMS publishes a new blog post, it can hit a Next.js webhook that revalidates the affected pages in seconds — you get the freshness of SSR with the speed of SSG.

When does SSR actually win?

SSR earns its keep when the HTML genuinely differs per request. On a marketing site this is rare. The honest list is short: pages that show user-specific data (account dashboards, gated content), pages with personalized content based on cookies/geo (only when the personalization cannot be done client-side), and pages with content that changes faster than ISR's minimum revalidate window.

  • Customer portal or dashboard — SSR with auth, every render is per-user
  • Personalized landing pages by ad campaign — SSR or middleware-based variant routing
  • Real-time inventory or availability pages — SSR if the data changes minute-by-minute
  • Geo-personalized homepages — middleware + edge runtime is usually a better choice than SSR
  • A/B testing experiments — middleware + cookie at the edge, not full SSR

Note that several common 'SSR use cases' are actually solvable with client-side fetching after the initial static render. A 'logged-in welcome banner' on an otherwise-static homepage should be a client component that fetches the user — not a reason to SSR the whole page. SSR the small thing, not the wrapper.

What does the decision tree look like?

Here is a flow you can apply on any Next.js project. Answer the questions in order and you land on the right rendering mode in under a minute.

  • 1. Does the page show different content per user (auth, personalization)? → SSR or middleware
  • 2. Does the page need to update faster than your deploy cadence? → ISR with appropriate revalidate or on-demand revalidation
  • 3. Does the page depend on real-time data (inventory, availability)? → SSR (or fetch client-side after SSG render)
  • 4. Does the page need geo-routing or A/B testing? → Edge middleware, keep the rendered page SSG
  • 5. None of the above? → SSG (the default, and the right answer for most marketing pages)

What does the cost difference look like at scale?

Cost is the unsexy reason SSG wins. On Vercel's pricing as of 2026: SSG pages cost ~$0.40 per million CDN requests. SSR pages cost ~$2 per million function invocations plus compute time (a 200ms function call at 1024MB is ~$0.0000008, so 10M SSR requests is ~$8 in compute on top of bandwidth).

For a site doing 500,000 monthly visitors averaging 2 pages each (1M page views), the bill difference is small in absolute terms — maybe $5-$15/month — but the SSR version also gets slower as it scales (origin region constraints) while the SSG version stays at 50ms forever. Multiply the differential by 10x traffic and the gap matters.

How does Next.js 15 default behavior affect this?

Next.js 15 made SSG the default for App Router pages. A page is automatically static unless it uses dynamic functions (cookies(), headers(), searchParams) or fetches with no-store. This is the right default — it means new pages start fast and you have to opt into SSR.

The gotcha: it is easy to accidentally opt out of static rendering. Reading cookies() in a layout file makes every page under that layout SSR. Calling headers() inside a shared component does the same. We run a build-time check that prints the rendering mode of every route — if a page that should be static showed up as 'dynamic,' we hunt down the source. Partial Prerendering (PPR) in Next.js 15 helps by letting you stream the dynamic shell separately, but you still want most of the page static.

What does this look like in code?

The configuration is intentionally minimal. Three lines control the rendering mode for any App Router page.

  • Default (SSG) — no configuration, just export the page
  • Force static — `export const dynamic = 'force-static'`
  • ISR — `export const revalidate = 60` (seconds)
  • SSR — `export const dynamic = 'force-dynamic'` or use cookies()/headers()
  • On-demand revalidation — call `revalidatePath('/blog')` from a webhook handler

How do you ship this in production?

The rendering strategy decision is part of the broader Next.js production checklist. For a typical 25-30 page marketing site, expect ~24 SSG pages, ~5 ISR pages (blog index, case studies index, pricing, locations, services index), and 0-2 SSR pages (only if you have a gated section). That distribution is what 95/4/1 looks like in practice.

If you are stuck on whether a specific page needs SSR or ISR, book a strategy call and we will walk through your routes, or grab a free site-speed audit of your current site. For the full production setup, see our website design service.

Where does this fit in your stack?

If you're running a US service business, the playbook in this post pairs with our full services lineup and applies cleanly across our supported industries and US locations. If you want help implementing it, book a free strategy call — we'll review your current setup and prioritize the next three moves.

For the deeper engagement details, see our website design service. New to the terminology here? Our SEO & marketing glossary defines every acronym in this post.

What are the most common questions about this topic?

Common questions readers send us about this topic.

Is SSG always faster than SSR?

For the first byte, yes — SSG serves pre-rendered HTML from a CDN edge (30-100ms TTFB), while SSR has to execute server code per request (200-800ms TTFB). For total page weight, they are identical because both ship the same HTML. SSG also costs less to host because there are no per-request function invocations. For marketing pages with the same content for every visitor, SSG is always the better choice.

Can I mix SSG and SSR in the same Next.js site?

Yes — Next.js App Router decides rendering mode per route. Most production sites do this: static for marketing pages (home, services, blog), ISR for content that updates frequently (blog index), and SSR for auth-gated routes (dashboard, account). The configuration is one line per page, so the mix is easy to manage.

What is ISR and when should I use it?

Incremental Static Regeneration is SSG with an expiration timer. The page is statically generated, served from CDN, and re-generated either after a time window (revalidate: 60 seconds) or on demand via a webhook. Use ISR for content that changes between deploys — blog indexes, case study listings, pricing pages, or anything edited through a CMS in production.

How does edge runtime fit into the SSG/SSR choice?

Edge runtime is not a fourth rendering mode — it is where the code runs. Middleware running at the edge (geo-routing, A/B variants, auth checks) sits in front of any rendering mode. You typically use edge middleware to decide which static page to serve, not to render new HTML. The page itself stays SSG; the edge function just routes traffic.

Will SSG work for a site with 10,000 blog posts?

Yes, but the build time will be long. A 10,000-page site might take 15-45 minutes to build. The fix is generateStaticParams returning only the most-trafficked posts (say, the top 500), then using fallback: 'blocking' or ISR for the rest. The first request to a new post triggers a server render and caches the result. Vercel and Netlify both handle this gracefully.

Is server-side rendering bad for SEO?

No. Both SSG and SSR produce HTML that search engines can crawl identically. SSR is fine for SEO; it just costs more and is slower than SSG for content that does not need to be per-request. The SEO disadvantage only kicks in if SSR makes your TTFB so slow that Core Web Vitals drops below thresholds.

How do I know if a page is statically rendered or server-rendered?

After a Next.js build, the build output shows a tree of every route with a marker: a circle for static (○), a lambda for dynamic (λ), or a dash for ISR (●). Grep the output for 'dynamic' to find any route that accidentally opted into SSR. The Next.js dev tools and Vercel dashboard also surface this per route.

What is partial prerendering (PPR)?

Partial Prerendering, introduced in Next.js 14 and stabilized in 15, lets a single page be partially static and partially dynamic. The static shell renders at build time and streams immediately; dynamic holes (like a personalized banner) render on the server and stream in. PPR is the answer when 95% of a page is static but a small part needs SSR — you get SSG speed for the bulk of the page.

Is SSG better than SSR?

For marketing pages, usually yes. SSG renders HTML once at build time and serves it from a CDN, so it is faster and cheaper than SSR, which re-renders on every request. SSR only wins when a page must be personalized per user or per request — dashboards, account pages, or auth-gated content. A public services or blog page has the same HTML for everyone, so SSG is the better default.

What is the difference between server-side rendering (SSR) and client-side rendering (CSR)?

SSR builds the full HTML on the server for each request, so search engines and users get a complete page immediately. CSR ships a near-empty HTML shell and lets JavaScript render the content in the browser, which can hurt first paint and, in some cases, crawlability. SSG sits alongside both: it pre-renders the HTML at build time. For marketing sites, pre-rendered HTML (SSG) is the safest for speed and SEO.

About the author

Hyder Shah

Founder & CEO, Foundgrove

Hyder Shah is the founder of Foundgrove, an SEO and GEO agency for US service businesses. See our editorial policy for how these guides are researched and reviewed.

Want help applying this to your business?

Book a free 30-minute call. We'll review your current acquisition stack and show you the three highest-leverage moves for your industry and state. Or read how our website design service works.

Free SEO & AI visibility auditGet my free audit