From e42fa231b24e097002dc6ff2832e6e5647ed10f9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 3 Feb 2024 16:54:02 +0100 Subject: [PATCH] [system] Explain why AppRouterCacheProvider --- docs/data/material/integrations/nextjs/nextjs.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 329b68dccacd6e..044877d094ce95 100644 --- 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 `` and not rendering in the ``. +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 `` and not rendering in the ``. +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`: