Hydration Error When Dynamically Importing MDX File also after SSR Disabled when use more mathjax file

[jeevankc17]

When using dynamic imports with SSR disabled in a Next.js project to load an .mdx file containing huge math expression, a hydration error occurs. The server-rendered HTML doesn't match the client-rendered HTML, causing the component to re-render on the client. SSR Disabled also can't solving the issue

To Reproduce
Set up a Next.js project with the nextra package for MDX support.
Create an .mdx file and place it inside a content directory.
Write file with lot of Math Expressions
Dynamically import the .mdx file in a page using dynamic(() => import('../content/file.mdx'), { ssr: false }).
Run the Next.js app in development mode.
See the hydration error in the browser's console.

Expected behavior
The .mdx file should be rendered correctly without causing any hydration issues. The dynamic import should disable SSR and render the content without any mismatches between the server and client-rendered HTML.

Desktop (please complete the following information):
OS: Windows 11
Browser: Google Chrome
Version: 108.0.5359.125

The issue occurs even when using nextra for MDX support.
Tried using dynamic() import with SSR disabled, but the error persists.
The .mdx file is located in the /content directory and is correctly formatted.

[dimaMachina]

Please share a reproduction

[jeevankc17]

@dimaMachina I separated an single mdx file to multiple to solve the issue actually I have 4000+ lines of code with lot of mathjax.

[dimaMachina]

Great, so your problem is solved and issue can be closed?

[jeevankc17]

@dimaMachina hey I have a mathematical expression that is only supported by the mathjax library, I used mathjax on page router and working absolutely fine but now facing issue on app router, working fine somewhere but not everywhere.