[system] Explain why AppRouterCacheProvider

mui · Feb 20, 2024 · e42fa23 · e42fa23
1 parent 70398b9
commit e42fa23
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md
@@ -48,6 +48,13 @@ Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elemen
  }
 ```
 
+:::info
+The `AppRouterCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is streaming chunks of the .html page to the client.
+
+While it's not required to use the `AppRouterCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `<head>` and not rendering in the `<body>`.
+See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better.
+:::
+
 #### Custom cache (optional)
 
 Use the `options` prop to override the default [cache options](https://emotion.sh/docs/@emotion/cache#options)—for example, the code snippet below shows how to change the CSS key to `css` (the default is `mui`):
@@ -218,6 +225,13 @@ Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and rende
  }
 ```
 
+:::info
+The `AppCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is rendering the .html page to the client.
+
+While it's not required to use the `AppCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `<head>` and not rendering in the `<body>`.
+See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better.
+:::
+
 #### Custom cache (optional)
 
 To use a custom [Emotion cache](https://emotion.sh/docs/@emotion/cache), pass it to the `emotionCache` property in `_document.tsx`: