Domain routing for locales in NextJS - Performance & Optimization

Performance: Domain routing for locales

MEDIUM IMPACT

This affects the initial page load speed by determining which locale content is served based on the domain, impacting server response and client rendering.

Serving localized content based on user domain

NextJS

export default { i18n: { locales: ['en', 'fr'], defaultLocale: 'en', domains: [ { domain: 'example.com', defaultLocale: 'en' }, { domain: 'example.fr', defaultLocale: 'fr' } ] } } // Domain routing for locales

Locale is determined server-side by domain, serving correct content immediately without redirects.

📈 Performance GainReduces redirects and layout shifts, improving LCP and CLS

Serving localized content based on user domain

NextJS

export default { i18n: { locales: ['en', 'fr'], defaultLocale: 'en', localeDetection: true } } // No domain routing, locale chosen by browser or path

Locale is detected client-side or via path, causing extra redirects or content shifts after initial load.

📉 Performance CostTriggers additional client-side redirects and layout shifts, increasing LCP and CLS

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side locale detection with redirects	No extra DOM nodes	Multiple reflows due to content shifts	Higher paint cost from layout shifts	[X] Bad
Server-side domain routing for locales	No extra DOM nodes	Single reflow with stable layout	Lower paint cost with stable content	[OK] Good

Rendering Pipeline

Domain routing for locales affects the server response phase by selecting the correct locale content before sending HTML to the browser, reducing client-side locale detection work.

→Server Response

→HTML Delivery

→Layout

→Paint

⚠️ BottleneckServer Response time can increase slightly due to domain checks but reduces client-side reflows and repaints.

Core Web Vital Affected

LCP

This affects the initial page load speed by determining which locale content is served based on the domain, impacting server response and client rendering.

Optimization Tips

1Use domain routing to serve locale-specific content server-side for faster initial paint.

2Avoid client-side locale detection that causes redirects and layout shifts.

3Cache DNS and use edge caching to minimize domain routing overhead.

Performance Quiz - 3 Questions

How does domain routing for locales impact Largest Contentful Paint (LCP)?

A It has no impact on LCP.

B It worsens LCP by adding extra client-side locale detection.

C It improves LCP by serving locale-specific content immediately without redirects.

D It delays LCP by increasing JavaScript bundle size.

DevTools: Performance

How to check: Record page load and look for redirects and layout shifts in the waterfall and experience timeline.

What to look for: Fewer redirects and lower layout shift scores indicate better domain routing performance.