2

I want to pass a flag prop to Suspense component, telling it to behave like a normal div, hence being loaded immediately when renderToPipeableStream on the server.

import React, { Suspense } from 'react';

function ConditionalSuspense(): React.ReactElement {
  return (
    <Suspense enabled={false}>
      <div>
        <div>When enabled is false, this will be loaded sync on server</div>
        <Suspense>This will be loaded async on client, because by default suspense is enabled</Suspense>
      </div>
    </Suspense>
  );
}

On the server I will have

import { renderToPipeableStream } from 'react-dom/server';
import { ConditionalSuspense } from './ui';

const stream = renderToPipeableStream(ConditionalSuspense, ...);
Mateusz
  • 69
  • 1
  • 5
  • 1
    What about something like `let ConditionalSuspense = enabled ? Suspense : 'div'` then instead of `` it will be ``. – User 28 Nov 11 '22 at 06:33
  • oh my it is that simple yes! Thank you. – Mateusz Nov 13 '22 at 19:55
  • This didn't work for me, I'm getting the error `Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.` – jscul Aug 23 '23 at 03:02

0 Answers0