Server component translations in NextJS - Performance & Optimization

Performance: Server component translations

MEDIUM IMPACT

This affects the initial page load speed by offloading translation rendering to the server, reducing client-side JavaScript and improving Largest Contentful Paint (LCP).

Rendering translated text in a Next.js app

NextJS

import { getTranslations } from '@/lib/i18n';

export default async function Greeting({ params }) {
  const t = await getTranslations(params.locale);
  return <p>{t('hello')}</p>;
}

Translations are fetched and rendered on the server, sending fully translated HTML to the client, reducing JS bundle and hydration time.

📈 Performance GainSaves 20-40kb client bundle; improves LCP by 100-200ms; reduces client CPU work.

Rendering translated text in a Next.js app

NextJS

import { useTranslation } from 'next-i18next/client';

export default function Greeting() {
  const { t } = useTranslation();
  return <p>{t('hello')}</p>;
}

Translations run on the client side, increasing JavaScript bundle size and delaying content rendering until hydration.

📉 Performance CostAdds 20-40kb to client bundle; delays LCP by 100-200ms due to hydration and translation loading.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side translation in React component	Moderate (due to hydration)	1 reflow after hydration	Higher paint cost due to delayed content	[X] Bad
Server component translation rendering	Minimal (static HTML)	0 reflows on load	Lower paint cost, faster LCP	[OK] Good

Rendering Pipeline

Server component translations run during server rendering, producing static HTML with translated content. The browser receives ready-to-display HTML, skipping client translation logic.

→Server Rendering

→Network Transfer

→First Paint

→Hydration

⚠️ BottleneckClient Hydration and JavaScript execution

Core Web Vital Affected

LCP

This affects the initial page load speed by offloading translation rendering to the server, reducing client-side JavaScript and improving Largest Contentful Paint (LCP).

Optimization Tips

1Render translations on the server to reduce client JavaScript bundle size.

2Avoid client-side translation loading to speed up hydration and LCP.

3Use async server components to fetch and render translations before sending HTML.

Performance Quiz - 3 Questions

How does rendering translations in Next.js server components affect page load?

A It increases client JavaScript bundle size.

B It reduces client JavaScript and improves Largest Contentful Paint.

C It delays translation until after hydration.

D It causes more layout shifts during page load.

DevTools: Performance

How to check: Record page load and look for time to First Contentful Paint and hydration markers; check JavaScript execution time.

What to look for: Shorter time to LCP and reduced scripting time indicate good server component translation performance.

Practice

1. What is the main benefit of using server component translations in Next.js?

easy

A. They send translated HTML directly from the server, improving performance and SEO.

B. They allow translations to be updated on the client without reloading the page.

C. They automatically translate user input in forms.

D. They enable real-time chat translations between users.

Solution

1. Step 1: Understand server component translations purpose

   Server component translations generate translated HTML on the server before sending it to the browser.

2. Step 2: Identify benefits of server-side translation

   This approach improves performance by reducing client work and boosts SEO by sending ready-to-read translated content.

3. Final Answer:

   They send translated HTML directly from the server, improving performance and SEO. -> Option A

4. Quick Check:

   Server translations = better performance and SEO [OK]

Hint: Server translations improve SEO by sending ready HTML [OK]

Common Mistakes:

• Thinking translations happen on the client side
• Confusing server translations with real-time chat features
• Assuming translations update without page reload

2. Which is the correct way to import the translation function in a Next.js server component?

easy

A. import useTranslations from 'react-intl';

B. import { getTranslations } from 'next-intl/server';

C. import { useTranslation } from 'next-i18next';

D. import { useTranslations } from 'next/router';

Solution

1. Step 1: Identify the correct package for server translations

   Next.js server component translations use the 'next-intl' package.

2. Step 2: Check the correct import syntax

   The function is named 'getTranslations' and imported with curly braces from 'next-intl/server'.

3. Final Answer:

   import { getTranslations } from 'next-intl/server'; -> Option B

4. Quick Check:

   Correct import = getTranslations from next-intl/server [OK]

Hint: Use curly braces to import getTranslations from next-intl/server [OK]

Common Mistakes:

• Using 'useTranslations' instead of 'getTranslations'
• Importing from 'react-intl' or 'next-i18next' by mistake
• Importing from 'next/router' which is unrelated

3. Given this server component code, what will be rendered if the locale is 'en' and translations contain { greeting: 'Hello' }?

import { getTranslations } from 'next-intl/server';

export default async function Greeting() {
  const t = await getTranslations();
  return <h1>{t('greeting')}</h1>;
}

medium

A. Hello

B. greeting

C. Error: Missing translation key

D. undefined

Solution

1. Step 1: Understand getTranslations usage

   The function, when awaited, returns a function 't' that looks up translation keys for the current locale.

2. Step 2: Check the translation key and locale

   For locale 'en', 'greeting' key maps to 'Hello', so t('greeting') returns 'Hello'.

3. Final Answer:

   <h1>Hello</h1> -> Option A

4. Quick Check:

   t('greeting') = 'Hello' [OK]

Hint: t('key') returns translated string for current locale [OK]

Common Mistakes:

• Expecting the key name to render instead of the value
• Assuming an error if key exists
• Thinking undefined is returned for existing keys

4. What is wrong with this server component code for translations?

import { getTranslations } from 'next-intl/server';

export default async function Welcome() {
  const t = await getTranslations('common');
  return <div>{t('welcome')}</div>;
}

Assuming translations for 'common' namespace are not loaded.

medium

A. It will throw an error because the 'common' namespace translations are missing.

B. It will silently render nothing for missing keys.

C. It will render the namespaced key 'common.welcome' as fallback text.

D. It will fallback to English translations automatically.

Solution

1. Step 1: Understand namespace usage in getTranslations

   Passing 'common' scopes the lookup to keys prefixed with 'common.'.

2. Step 2: Check behavior when namespace translations are missing

   If 'common.welcome' is missing, it falls back to rendering 'common.welcome'.

3. Final Answer:

   It will render the namespaced key 'common.welcome' as fallback text. -> Option C

4. Quick Check:

   Missing translation = fallback to namespaced id [OK]

Hint: Missing namespace translation falls back to 'common.welcome' [OK]

Common Mistakes:

• Expecting an error instead of fallback text
• Assuming silent failure with empty output
• Thinking automatic fallback to English happens

5. You want to create a server component that shows a greeting in the user's locale and falls back to English if the translation is missing. Which approach correctly handles this?

hard

A. Wrap getTranslations() with a try-catch and return English string on error.

B. Load all locales on the server and use getTranslations() without fallback logic.

C. Use client-side translation hooks to handle fallback automatically.

D. Use getTranslations() and call t('greeting', {defaultMessage: 'Hello'}).

Solution

1. Step 1: Understand fallback behavior in server translations

   Server translations fallback to the message id if key is missing.

2. Step 2: Implement fallback with defaultMessage

   Use the defaultMessage option in t() to provide a custom English fallback string.

3. Final Answer:

   Use getTranslations() and call t('greeting', {defaultMessage: 'Hello'}) -> Option D

4. Quick Check:

   t(key, {defaultMessage}) = custom fallback [OK]

Hint: t('key', {defaultMessage: 'Hello'}) handles fallback [OK]

Common Mistakes:

• Assuming automatic fallback without code
• Loading all locales unnecessarily on server
• Using client hooks in server components incorrectly