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.