Server-Side Rendering for International SEO: Technical Implementation Guide

Server-side rendering (SSR) is critical for international SEO performance. This technical guide covers SSR strategies for multilingual sites and performance optimization.

Why SSR Matters for International SEO

Next.js International SSR

// next.config.js
const nextConfig = {
  i18n: {
    locales: ["en-US", "de-DE", "fr-FR", "ja-JP", "zh-CN"],
    defaultLocale: "en-US",
    localeDetection: true,
  },
  trailingSlash: true,
};
module.exports = nextConfig;

// pages/[locale]/articles/[slug].js
export async function getServerSideProps({ params, locale }) {
  const { slug } = params;
  const article = await fetchArticle(slug, locale);
  if (!article) return { notFound: true };
  const locales = ["en-US", "de-DE", "fr-FR", "ja-JP", "zh-CN"];
  const hreflangTags = locales.map((loc) => ({
    hreflang: loc,
    href: "https://example.com/" + loc + "/articles/" + slug,
  }));
  return { props: { article, locale, hreflangTags } };
}

Dynamic Rendering Based on User Location

Cloudflare Worker

export default {
  async fetch(request) {
    const country = request.cf.country;
    const url = new URL(request.url);
    const countryLocaleMap = {
      US: "en-US", GB: "en-GB", DE: "de-DE",
      FR: "fr-FR", JP: "ja-JP", CN: "zh-CN",
    };
    const preferredLocale = countryLocaleMap[country] || "en-US";
    if (url.pathname === "/" && !request.headers.get("cookie")?.includes("locale=")) {
      return Response.redirect(url.origin + "/" + preferredLocale + "/", 302);
    }
    return fetch(request);
  },
};

CDN Strategy for International Sites

cdn:
  provider: cloudflare
  caching:
    rules:
      - path: "/en/*"
        edge_ttl: 86400
      - path: "/de/*"
        edge_ttl: 86400
  geo_routing:
    - country: [DE, AT, CH]
      origin: eu-west-1
    - country: [JP, KR]
      origin: ap-northeast-1
    - default: us-east-1

Monitoring International SSR Performance

import { onLCP, onINP, onCLS } from "web-vitals";
function sendToAnalytics(metric) {
  const locale = document.documentElement.lang || "unknown";
  const body = JSON.stringify({ name: metric.name, value: metric.value, locale: locale });
  navigator.sendBeacon("/api/vitals", body);
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Conclusion

Server-side rendering is essential for international SEO. It ensures search engines can crawl all language versions and users get fast, localized content.