Language switching UI in NextJS - Performance & Optimization

Performance: Language switching UI

MEDIUM IMPACT

This affects page load speed and interaction responsiveness when switching languages on a website.

Implementing language switching that reloads the entire page on each change

NextJS

import { useRouter } from 'next/router';
import { useTransition } from 'react';

export default function LanguageSwitcher() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const changeLanguage = (lang) => {
    startTransition(() => {
      router.push(router.pathname, router.asPath, { locale: lang, shallow: true });
    });
  };

  return (
    <select onChange={e => changeLanguage(e.target.value)} aria-label="Select language" disabled={isPending}>
      <option value="en">English</option>
      <option value="fr">French</option>
      <option value="es">Spanish</option>
    </select>
  );
}

Uses React's startTransition and Next.js shallow routing to avoid full navigation, improving responsiveness and reducing blocking.

📈 Performance GainReduces blocking time by 50-80%, avoids full page navigation, improves INP and LCP.

Implementing language switching that reloads the entire page on each change

NextJS

import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const router = useRouter();
  const changeLanguage = (lang) => {
    router.push(router.pathname, router.asPath, { locale: lang });
  };
  return (
    <select onChange={e => changeLanguage(e.target.value)} aria-label="Select language">
      <option value="en">English</option>
      <option value="fr">French</option>
      <option value="es">Spanish</option>
    </select>
  );
}

This triggers a full page navigation on each language change, causing slower LCP and blocking user interaction.

📉 Performance CostBlocks rendering for 200-500ms depending on network, triggers full page navigation and reflow.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page navigation on language change	High (full DOM rebuild)	Multiple reflows	High paint cost	[X] Bad
Shallow routing with React startTransition	Low (partial DOM update)	Single reflow	Low paint cost	[OK] Good
Loading all languages upfront	N/A	N/A	High JS bundle size	[X] Bad
Dynamic import of language data	N/A	N/A	Reduced JS bundle size	[OK] Good

Rendering Pipeline

Language switching affects the browser's rendering pipeline by triggering style recalculations and layout changes when text content updates. Full page navigations cause the entire pipeline to restart, while shallow routing or dynamic loading limits reflows and repaints.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to content changes and reflows on language switch.

Core Web Vital Affected

LCP, INP

This affects page load speed and interaction responsiveness when switching languages on a website.

Optimization Tips

1Avoid full page navigations on language switch to improve LCP and INP.

2Use shallow routing and React startTransition to keep UI responsive.

3Load language data dynamically to reduce initial bundle size and speed up page load.

Performance Quiz - 3 Questions

What is the main performance drawback of full page navigation when switching languages?

A It reduces bundle size.

B It blocks rendering and increases Largest Contentful Paint (LCP).

C It improves interaction responsiveness.

D It avoids layout recalculations.

DevTools: Performance

How to check: Record a session while switching languages. Look for long tasks and full page navigations in the flame chart.

What to look for: Check if language switch triggers full page navigation (long task with network activity) or a fast partial update (short task, no navigation).