mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Josh Story
701ac2e572
Currently when we SSR a Flight response we do not emit any resources for module imports. This means that when the client hydrates it won't have already loaded the necessary scripts to satisfy the Imports defined in the Flight payload which will lead to a delay in hydration completing. This change updates `react-server-dom-webpack` and `react-server-dom-esm` to emit async script tags in the head when we encounter a modules in the flight response. To support this we need some additional server configuration. We need to know the path prefix for chunk loading and whether the chunks will load with CORS or not (and if so with what configuration).
58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
/**
|
|
* This is a renderer of React that doesn't have a render target output.
|
|
* It is useful to demonstrate the internals of the reconciler in isolation
|
|
* and for testing semantics of reconciliation separate from the host
|
|
* environment.
|
|
*/
|
|
|
|
import {readModule} from 'react-noop-renderer/flight-modules';
|
|
|
|
import ReactFlightClient from 'react-client/flight';
|
|
|
|
type Source = Array<Uint8Array>;
|
|
|
|
const decoderOptions = {stream: true};
|
|
|
|
const {createResponse, processBinaryChunk, getRoot, close} = ReactFlightClient({
|
|
createStringDecoder() {
|
|
return new TextDecoder();
|
|
},
|
|
readPartialStringChunk(decoder: TextDecoder, buffer: Uint8Array): string {
|
|
return decoder.decode(buffer, decoderOptions);
|
|
},
|
|
readFinalStringChunk(decoder: TextDecoder, buffer: Uint8Array): string {
|
|
return decoder.decode(buffer);
|
|
},
|
|
resolveClientReference(bundlerConfig: null, idx: string) {
|
|
return idx;
|
|
},
|
|
prepareDestinationForModule(moduleLoading: null, metadata: string) {},
|
|
preloadModule(idx: string) {},
|
|
requireModule(idx: string) {
|
|
return readModule(idx);
|
|
},
|
|
parseModel(response: Response, json) {
|
|
return JSON.parse(json, response._fromJSON);
|
|
},
|
|
});
|
|
|
|
function read<T>(source: Source): Thenable<T> {
|
|
const response = createResponse(source, null);
|
|
for (let i = 0; i < source.length; i++) {
|
|
processBinaryChunk(response, source[i], 0);
|
|
}
|
|
close(response);
|
|
return getRoot(response);
|
|
}
|
|
|
|
export {read};
|