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).

Practice

1. What is the main purpose of a language switching UI in a Next.js app?

easy

A. To let users choose their preferred language for the app content

B. To change the app's theme colors

C. To update the user's profile picture

D. To log out the user automatically

Solution

1. Step 1: Understand the UI purpose

   A language switching UI is designed to let users pick their language preference.

2. Step 2: Match purpose to options

   Only To let users choose their preferred language for the app content describes changing language, others are unrelated to language switching.

3. Final Answer:

   To let users choose their preferred language for the app content -> Option A

4. Quick Check:

   Language switching UI = Choose language [OK]

Hint: Language switch changes content language, not appearance [OK]

Common Mistakes:

• Confusing language switch with theme or profile settings
• Thinking it logs out users automatically

2. Which of the following is the correct way to declare a React state hook for language selection in Next.js?

easy

A. const [language, setLanguage] = useState('en')

B. const language = useState('en')

C. useState = const [language, setLanguage]('en')

D. const [language, setLanguage] = useState()

Solution

1. Step 1: Recall React useState syntax

   The correct syntax is: const [state, setState] = useState(initialValue).

2. Step 2: Check each option

   const [language, setLanguage] = useState('en') matches correct syntax with initial value 'en'. Others have syntax errors or missing initial value.

3. Final Answer:

   const [language, setLanguage] = useState('en') -> Option A

4. Quick Check:

   useState syntax = const [var, setVar] = useState(value) [OK]

Hint: useState returns array destructured into state and setter [OK]

Common Mistakes:

• Not destructuring the array returned by useState
• Missing initial state value
• Incorrect assignment order

3. Given this Next.js component snippet:
<pre>const LanguageSwitcher = () => { const [lang, setLang] = useState('en'); return ( <button onClick={() => setLang('fr')} aria-label="Switch to French">FR</button> ); }; What will be the value of lang after clicking the button once?

medium

A. null

B. 'en'

C. undefined

D. 'fr'

Solution

1. Step 1: Understand initial state

   The state variable lang starts as 'en'.

2. Step 2: Analyze button click effect

   Clicking the button calls setLang('fr'), updating lang to 'fr'.

3. Final Answer:

   'fr' -> Option D

4. Quick Check:

   Click sets lang to 'fr' [OK]

Hint: Click triggers setLang with new language [OK]

Common Mistakes:

• Thinking state stays the same after click
• Confusing initial value with updated value

4. Consider this Next.js language switcher code:
<pre>const LanguageSwitcher = () => { const [lang, setLang] = useState('en'); return ( <button onClick={() => setLang('es')}>Switch to Spanish</button> ); }; Why might this code cause an accessibility issue?

medium

A. The state variable is not initialized

B. The button lacks an aria-label describing its purpose

C. The onClick handler syntax is incorrect

D. The component does not import React

Solution

1. Step 1: Check accessibility features

   The button has no aria-label or descriptive text for screen readers.

2. Step 2: Evaluate other options

   State is initialized, onClick syntax is correct, React import is assumed; only missing aria-label is an accessibility issue.

3. Final Answer:

   The button lacks an aria-label describing its purpose -> Option B

4. Quick Check:

   Missing aria-label = accessibility problem [OK]

Hint: Always add aria-label for buttons with unclear text [OK]

Common Mistakes:

• Ignoring accessibility attributes
• Assuming syntax errors without checking
• Overlooking React import necessity

5. You want to build a language switcher in Next.js that updates the URL locale and changes the displayed language without a full page reload. Which approach is best?

hard

A. Reload the page manually after setting a cookie for language

B. Use window.location.href to change URL and reload page

C. Use Next.js <Link> with locale prop and React state to track language

D. Store language in localStorage and ignore URL changes

Solution

1. Step 1: Understand Next.js locale routing

   Next.js supports locale routing with to change language without full reload.

2. Step 2: Combine URL update and React state

   Using <Link> with locale prop updates URL and React state tracks current language for UI updates.

3. Step 3: Evaluate other options

   Reloading page or using window.location causes full reload, losing SPA benefits. Ignoring URL breaks routing consistency.

4. Final Answer:

   Use Next.js <Link> with locale prop and React state to track language -> Option C

5. Quick Check:

   Next.js locale routing + state = smooth language switch [OK]

Hint: Use Next.js for smooth language changes [OK]

Common Mistakes:

• Reloading page loses SPA benefits
• Ignoring URL locale causes routing issues
• Using localStorage alone misses URL sync