Suspense rendering problems with Next.js

• Check if updating to the latest Preact version resolves the issue

Using Next.js (SSR) -> package.json:

"next": "12.1.2",
"next-plugin-preact": "3.0.6",
"preact": "10.7.0",
"preact-render-to-string": "5.1.20",
"react": "npm:@preact/compat@17.0.3",
"react-dom": "npm:@preact/compat@17.0.3",

Describe the bug

Note the different html elements, styles applied on them and how they get rendered. The Content component just does a SWR api call with 2s sleep so suspense can get triggered.

isClient is used to use suspense once on the client since (afaik) Suspense does not work on the server.

1. Same html element:

Let’s say I have the following content on the page:

{isClient() ? (
	<Suspense fallback={<h1 style={{ color: 'red' }}>Fallback</h1>}>
		<Content>
			<h1 style={{ color: 'blue' }}>Content</h1>
		</Content>
	</Suspense>
) : (
	<h1 style={{ color: 'green' }}>Else</h1>
)}

• retrieved from the server: “Else” colored green (as expected)
• rendered while loading: “Else” colored in green (???)
• rendered when suspense done: “Content” colored in green (???)

1. Different html elements:

{isClient() ? (
	<Suspense fallback={<h1 style={{ color: 'red' }}>Fallback</h1>}>
		<Content>
			<h2 style={{ color: 'blue' }}>Content</h2>
		</Content>
	</Suspense>
) : (
	<h3 style={{ color: 'green' }}>Else</h3>
)}

• retrieved from the server: “Else” colored green, h3 tag (as expected)
• rendered while loading: “Else” colored green, h3 tag (???)
• rendered when suspense done: “Content” colored blue, h2 element (as expected), but there is also “Else” colored green, h3 tag (???) in the DO

Bugs

• if the same html element is used as content, preact suspense just patches the existing html element (from the else part) which applies wrong html properties (style, classname,…)
• if different html elements are used, the “else” part persists in the DOM
• suspense fallback never renders

Expected behavior Suspense should work as expected: should render the fallback & should re-render(?) the consuming component once the suspended request is finished.

[JoviDeCroock]

I think this issue presents itself because we stay in hydration mode where we don’t patch missmatches in DOM-attributes as this is commonly seen as a bug between Server and Client.

So DOM arrives from server as

<h3 style={{ color: 'green' }}>Else</h3>

then we switch to hydrate() and enter the isClient() branch, this suspends which makes us get

<h1 style={{ color: 'red' }}>Fallback</h1>

We hydrate but don’t patch the innerText nor the style, nor the nodeType. When the Suspense resolves we see that the DOM still remains the same on

<h2 style={{ color: 'blue' }}>Content</h2>

We yet again haven’t patched any of the needed things, I think this is because of our deferred hydration tricks we use when we are revolving around Suspending boundaries because we stay in hydration mode even though we will have to patch the nodeType, … ideally

WDYT @marvinhagemeister @developit

[marvinhagemeister]

@Alex289 can you open a new issue for that? It seems like the error you’re seeing is not related to the issue here.