Why custom components are not in the initial HTML
Custom components run only in the browser. The server-rendered HTML leaves out components you define withexport in an MDX file and components you import by name from a snippet, such as import { MyComponent } from "/snippets/my-component.jsx". After the page loads, the browser renders those components in place.
MDX snippets that you import as content, such as import MySnippet from "/snippets/my-snippet.mdx", render on the server like the rest of the page.
As a result:
- The page source and the initial HTML do not include the component’s content.
- Visitors may see the component pop in or shift the layout after the rest of the page appears.
- Search engines may not fully index the component’s content.
Use built-in components for content that must render on the server
Most built-in components, including the ones below, render on the server and appear in the initial HTML. If you use a custom component for layout or static content, replace it with a built-in component or an MDX snippet. For example:- Use cards and columns for grids of links or features.
- Use tabs, accordions, and steps to organize content.
- Use callouts to highlight information.