docs: Move section about performance of client messages

Author: amannn

docs/pages/docs/environments/server-client-components.mdx

@@ -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
@@ -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" />
@@ -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]