[BUG] LDE: Dev server fails to re-render a page after stopping

[bandantonio]

Describe the bug.

When working with documentation locally, the dev server refuses to render a page opened in the browser (except for the home page) after the server has been stopped and then restarted (via Ctrl + C).

When dev server fails, there are 3 errors showed (see screenshots below in the corresponding section)

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

The tricky thing is that the error "window" can be closed by clicking the X in the upper right corner and the requested page will be shown in the browser. The error window will be minimized to the bottom left.

After that, you can navigate through the pages. But if you refresh a page, the error "window" will be back fullscreen.

Expected behavior

After being restarted, dev server renders any local page that is currently opened in the browser. No errors shown in the browser.

Screenshots

1st error (the same as in the full screenshot above):

2nd error:

3rd error:

How to Reproduce

1. npm i
2. npm run dev
3. After the server is running, navigate to any documentation page. For example, http://localhost:3000/docs/concepts. The page should be rendered properly.
4. Stop the dev server (Ctrl +C)
5. Refresh the browser page (the browser should show "Safari can't connect to the server")
6. npm run dev
7. Refresh the browser page and observe the error

7a. Close the error "window". Check that the page is shown and the error "window" gets minimized to the bottom left.
7b. Navigate through pages. Navigation should work properly.
7c. Refresh a page. The error "window" should be displayed in fullscreen again.

My setup:

• MacBook Pro (M1 Pro)
• macOS: Sequoia 15.0 (24A335)
• Safari Version 18.0 (20619.1.26.31.6)

🥦 Browser

Safari

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[sambhavgupta0705]

@bandantonio what npm and node version are you using?

[bandantonio]

@bandantonio what npm and node version are you using?

@sambhavgupta0705 Currently, I'm on the following versions:

• npm - 10.7.0
• node - 20.15.0

Since I'm using nvm, switching between versions is not a problem at all.

[anshgoyalevil]

@bandantonio This issue was resolved by the PR #3262
Can you please check with the latest master branch and confirm if its working.

[bandantonio]

@anshgoyalevil Thank you for mentioning the fix. The hydration errors gone but another intermittent error related to rendering Mermaid diagrams is still here (see below). So, my fix from #3323 needs to be merged as well.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at MermaidDiagram (webpack-internal:///./components/MDX/MDX.tsx:113:31)
    at pre (webpack-internal:///./components/MDX/MDX.tsx:360:39)
    at MDXContent
    at article
    at div
    at div
    at main
    at div
    at div
    at div
    at DocsLayout (webpack-internal:///./components/layout/DocsLayout.tsx:96:27)
    at div
    at Layout (webpack-internal:///./components/layout/Layout.tsx:30:23)
    at div
    at AlgoliaSearch (webpack-internal:///./components/AlgoliaSearch.tsx:192:30)
    at MyApp (webpack-internal:///./pages/_app.tsx:41:22)
    at AppWithTranslation (/asyncapi-website/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:73:22)
    at StyleRegistry (/asyncapi-website/node_modules/styled-jsx/dist/index/index.js:449:36)
    at eU (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:8:20468)
    at eH (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:1788)
    at eJ (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:3091)
    at div
    at e9 (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:26:761)
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at MermaidDiagram (webpack-internal:///./components/MDX/MDX.tsx:113:31)
    at pre (webpack-internal:///./components/MDX/MDX.tsx:360:39)
    at MDXContent
    at article
    at div
    at div
    at main
    at div
    at div
    at div
    at DocsLayout (webpack-internal:///./components/layout/DocsLayout.tsx:96:27)
    at div
    at Layout (webpack-internal:///./components/layout/Layout.tsx:30:23)
    at div
    at AlgoliaSearch (webpack-internal:///./components/AlgoliaSearch.tsx:192:30)
    at MyApp (webpack-internal:///./pages/_app.tsx:41:22)
    at AppWithTranslation (/asyncapi-website/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:73:22)
    at StyleRegistry (/asyncapi-website/node_modules/styled-jsx/dist/index/index.js:449:36)
    at eU (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:8:20468)
    at eH (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:1788)
    at eJ (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:3091)
    at div
    at e9 (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:26:761)