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.
App router seems struggling with heavy maths. I think this is the bug of nextra, while implementing the app router.

For now I am planning to stay with the page router until that issue not being solved.

[dimaMachina]

please share reproduction repo

[jeevankc17]

hey finally got solved, mathjax not working on the app router properly as it is javascript client library where as katex with cdn used on the head tag on layout.tsx work absolutely fine