Performance, SSR, and SEO overlap because they all depend on what the browser (and crawler) sees and how fast it sees it.

Rendering modes

The pattern: render closer to the user = faster first paint + better SEO. CDN-cached pre-rendered HTML is the gold standard. Personalization pushes you toward SSR; pure interactivity (logged-in app) toward CSR.

Why SEO needs server rendering

Googlebot does run JS, but with a budget — heavy JS pages can be deferred, partially indexed, or have stale snapshots. Other crawlers (Bing, Baidu, social previews, LinkedIn, link unfurlers in Slack/iMessage) don't run JS. If you care about discoverability or shareable links, server-rendered HTML is non-negotiable.

For social previews specifically:

• <meta property="og:title">, <meta property="og:image">, <meta property="og:description"> must be in the initial HTML response.
• Twitter cards: <meta name="twitter:card">.
• These are read by crawlers that pull the HTML once and don't run JS.

SEO checklist

1. Server-rendered (or static) HTML for any indexable page.
2. Unique <title> and <meta name="description"> per page.
3. Open Graph + Twitter Card metadata.
4. Canonical URL (<link rel="canonical">) to prevent duplicate content penalties.
5. Sitemap.xml + robots.txt with the sitemap URL.
6. Structured data (JSON-LD) for rich results: Article, Product, FAQPage, BreadcrumbList.
7. Semantic HTML — headings hierarchy, real <a href> links (crawlers follow).
8. Internal linking structure (sidebar, related links).
9. Fast LCP — speed is a ranking signal.
10. Mobile-friendly — Google's primary index is mobile.

Why performance also matters for SEO

Google uses Core Web Vitals as a ranking factor (Page Experience). LCP, INP, CLS in the good range = ranking boost (small but real). Slow LCP increases bounce rate, which is a user signal Google sees indirectly.

How to pick per page

Marketing pages (homepage, about, pricing, blog posts): SSG. Pre-rendered, cached on CDN, sub-second TTFB worldwide. Maximum SEO + speed.

Product detail pages (e-commerce catalog): ISR. Pre-rendered but revalidates so inventory/price updates flow within minutes.

Search results / category pages: ISR with short revalidate, or SSR with edge caching.

Personalized feeds (logged-in homepage): SSR with per-user cookies. SEO not relevant; LCP still matters for repeat visitors.

App / dashboard (logged-in): CSR is fine. SEO doesn't apply; speed comes from cached API + responsive UI.

Concrete Next.js example

// app/products/[slug]/page.tsx — ISR with on-demand revalidation
export const revalidate = 3600;  // 1h fallback
export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { slug: true } });
  return products.map(({ slug }) => ({ slug }));
}
export default async function ProductPage({ params }) {
  const product = await db.product.findUnique({ where: { slug: params.slug } });
  return (
    <>
      <h1>{product.name}</h1>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Product',
        name: product.name,
        image: product.image,
        offers: { '@type': 'Offer', price: product.price, priceCurrency: 'USD' },
      })}} />
      …
    </>
  );
}

export async function generateMetadata({ params }) {
  const product = await db.product.findUnique({ where: { slug: params.slug } });
  return {
    title: `${product.name} | My Store`,
    description: product.summary,
    openGraph: { images: [product.image] },
    alternates: { canonical: `https://example.com/products/${params.slug}` },
  };
}

Tradeoffs

• SSR is slower TTFB than SSG (runs per request). Mitigate with edge runtime + caching.
• SSG has stale content if data changes between builds. ISR / revalidateTag fixes this.
• CSR has fast TTFB (static shell) but slow LCP (waits for JS). Worst of both for SEO.
• Edge rendering trades some compute flexibility (limited Node APIs) for global low latency.

Lighthouse SEO audit + Real-user

Lighthouse SEO catches the basic checklist (meta, semantic HTML, link contrast). Real SEO success needs Search Console — it tells you what Google is actually indexing, crawl errors, Core Web Vitals from CrUX, mobile usability issues.

Mental model

Speed + structure + discoverability. SSR/SSG win because they put real content in the initial HTML, which crawlers read and users see fast. CSR loses on both. Pick the rendering mode per page based on who needs to see what and when.