Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into canary
Browse files Browse the repository at this point in the history
  • Loading branch information
amannn committed Oct 16, 2024
2 parents cf8f95a + 9c84314 commit a3f0b1b
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions docs/pages/docs/environments/server-client-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -114,19 +114,6 @@ Regarding performance, async functions and hooks can be used interchangeably. Th

Depending on your situation, you may need to handle internationalization in Client Components. While providing all messages to the client side is typically the easiest way to [get started](/docs/getting-started/app-router#layout) and a reasonable approach for many apps, you can be more selective about which messages are passed to the client side if you're interested in optimizing the performance of your app.

<Details id="client-messages-performance">
<summary>How does loading messages on the client side relate to performance?</summary>

Depending on the requirements for your app, you might want to monitor your [Core Web Vitals](https://web.dev/articles/vitals) to ensure your app meets your performance goals.

If you pass messages to `NextIntlClientProvider`, Next.js will emit them during the streaming render to the markup of the page so that they can be used by Client Components. This can contribute to the [total blocking time](https://web.dev/articles/tbt), which in turn can relate to the [interaction to next paint](https://web.dev/articles/inp) metric. If you're seeking to improve these metrics in your app, you can be more selective about which messages are passed to the client side.

However, as the general rule for optimization goes: Always measure before you optimize. If your app already performs well, there's no need for optimization.

Note that an automatic, compiler-driven approach for automatically splitting messages is being evaluated in [`next-intl#1`](https://github.com/amannn/next-intl/issues/1).

</Details>

There are several options for using translations from `next-intl` in Client Components, listed here in order of enabling the best performance:

### Option 1: Passing translations to Client Components
Expand Down Expand Up @@ -240,13 +227,13 @@ import FormSubmitButton from './FormSubmitButton';
export default function RegisterPage() {
const t = useTranslations('RegisterPage');

function registerUser() {
function registerAction() {
'use server';
// ...
}

return (
<RegisterForm action={registerUser}>
<RegisterForm action={registerAction}>
<FormField label={t('firstName')} name="firstName" />
<FormField label={t('lastName')} name="lastName" />
<FormField label={t('email')} name="email" />
Expand Down Expand Up @@ -347,6 +334,19 @@ export default async function RootLayout(/* ... */) {
}
```

<Details id="client-messages-performance">
<summary>How does loading messages on the client side relate to performance?</summary>

Depending on the requirements for your app, you might want to monitor your [Core Web Vitals](https://web.dev/articles/vitals) to ensure your app meets your performance goals.

If you pass messages to `NextIntlClientProvider`, Next.js will emit them during the streaming render to the markup of the page so that they can be used by Client Components. This can contribute to the [total blocking time](https://web.dev/articles/tbt), which in turn can relate to the [interaction to next paint](https://web.dev/articles/inp) metric. If you're seeking to improve these metrics in your app, you can be more selective about which messages are passed to the client side.

However, as the general rule for optimization goes: Always measure before you optimize. If your app already performs well, there's no need for optimization.

Note that an automatic, compiler-driven approach for automatically splitting messages is being evaluated in [`next-intl#1`](https://github.com/amannn/next-intl/issues/1).

</Details>

## Troubleshooting

### "Failed to call `useTranslations` because the context from `NextIntlClientProvider` was not found." [#missing-context]
Expand Down

0 comments on commit a3f0b1b

Please sign in to comment.