fix(gatsby): Render to pipeable stream in dev SSR

[panzacoder]

Description

Replaces the react-dom/server api renderToString with renderToPipeableStream in order to support React lazy SSR, the new bundle-splitting solution that shipped with React 18.

Inspired by this comment by @d4v1d82

Documentation

Related Issues

Fixes #36678

[LekoArts]

Since this is identical to

gatsby/packages/gatsby/cache-dir/static-entry.js

Lines 336 to 354 in e2b8488

	// If no one stepped up, we'll handle it.
	if (!bodyHtml) {
	try {
	const writableStream = new WritableAsPromise()
	const { pipe } = renderToPipeableStream(bodyComponent, {
	onAllReady() {
	pipe(writableStream)
	},
	onError(error) {
	writableStream.destroy(error)
	},
	})
	bodyHtml = await writableStream
	} catch (e) {
	// ignore @reach/router redirect errors
	if (!isRedirect(e)) throw e
	}
	}

this should be fine 👍

Thanks!

[lezan]

Hey @LekoArts with gatsby@next (and since this pull) I am not able to use DEV_SSR and Hot Reloading.
I already put an example here.

I am always getting Hydration failed because the initial UI does not match what was rendered on the server.