A suspension that knows where it is

React useId() doesn't return a stable ID when used inside <Suspense>. This is a huge problem that slows down the development of libraries for concurrent mode in React. Read related issue.

Another problem is the synchronization state of the client and server when streaming html. This package also helps to analyze suspense chunks.

Getting started

The package is distributed using npm, the node package manager.

npm i --save @lomray/consistent-suspense

How to use

import { ConsistentSuspenseProvider, Suspense, useId } from '@lomray/consistent-suspense';

/**
 * 1. Wrap your root component in ConsistentSuspenseProvider
 * 2. Use <Suspense> component from lib
 */
const App: FC = () => {
    const [state] = useState();

    return (
        <ConsistentSuspenseProvider>
          <Suspense fallback={<div>Loading...</div>}>
            <SomeComponent />
          </Suspense>

          { 
              /** in case when we have more then 1 async component inside suspense, 
                we have to use 'NS' wrapper **/ 
          }
          <Suspense fallback={<div>Loading...</div>}>
            <Suspense.NS> { /** this wrapper only for async component **/ }
                <SomeComponent />
            </Suspense.NS>

            <Suspense.NS>
                <SomeComponent />
            </Suspense.NS>
          </Suspense>
        </ConsistentSuspenseProvider>
    )
}

/**
 * 3. Now any components inside ConsistentSuspenseProvider can generate consistent id's
 */
const SomeComponent: FC = () => {
    // this id will be the same between client and server
    const id = useId();
    
    return (
        <div>I'm have the same id on server and client: {id}</div>
    )
}

Analyze suspense html chunks (streaming)

import { Transform } from 'node:stream';
import { StringDecoder } from 'node:string_decoder';
import { renderToPipeableStream } from 'react-dom/server';
import { StreamSuspense } from '@lomray/consistent-suspense/server';

app.use('*', (req, res, next) => {
    const suspenseStream = StreamSuspense.create((suspenseId) => {
      const anyState = anyStateManager
        .getStateForSuspense(suspenseId)
        .toJSON();

      return `<script>var managerState = ${anyState};</script>`;
    });
    const decoder = new StringDecoder('utf8');
    const responseTransform = new Transform({
      transform(data, encoding, done) {
        // Decode bytes incrementally, including characters split between writes.
        const html = decoder.write(data);
        const rewrittenHtml = suspenseStream.analyze(html);

        // An empty string means the parser is waiting for the rest of a token.
        done(null, rewrittenHtml ?? html);
      },
      flush(done) {
        const html = decoder.end();
        const rewrittenHtml = suspenseStream.analyze(html);

        done(null, (rewrittenHtml ?? html) + suspenseStream.end());
      },
    });

    responseTransform.on('error', next);
    responseTransform.pipe(res);

    const stream = renderToPipeableStream(<App />, {
      onShellReady() {
        stream.pipe(responseTransform);
      },
      onShellError: next,
    });
});

Investigate demo app to more understand how it works.

Bugs and feature requests

Bug or a feature request, please open a new issue.

License

Made with 💚

Published under MIT License.