@tramvai/module-render 2.141.1 → 2.142.0

package/lib/browser.js

@@ -1,7 +1,7 @@
 import { __decorate } from 'tslib';
-import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core';
+import { Module, provide, commandLineListTokens, DI_TOKEN, optional } from '@tramvai/core';
 import { STORE_TOKEN, LOGGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
-import { RESOURCES_REGISTRY, CUSTOM_RENDER, EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE, RENDER_MODE, MODERN_SATISFIES_TOKEN } from '@tramvai/tokens-render';
+import { RESOURCES_REGISTRY, CUSTOM_RENDER, EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE, REACT_SERVER_RENDER_MODE, RENDER_MODE, MODERN_SATISFIES_TOKEN } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
 import { beforeResolveHooksToken, PageErrorStore, setPageErrorEvent } from '@tramvai/module-router';
 export { PageErrorStore, setPageErrorEvent } from '@tramvai/module-router';
@@ -80,6 +80,7 @@ RenderModule = RenderModule_1 = __decorate([
                     consumerContext: CONTEXT_TOKEN,
                     di: DI_TOKEN,
                     useStrictMode: USE_REACT_STRICT_MODE,
+                    renderMode: optional(REACT_SERVER_RENDER_MODE),
                 },
                 multi: true,
             }),

package/lib/client/index.browser.js

@@ -3,7 +3,7 @@ import { createElement, StrictMode } from 'react';
 import { renderReact } from '../react/index.browser.js';
 import { renderer } from './renderer.browser.js';
 
-function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }) {
+function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, renderMode, }) {
     const log = logger('module-render');
     return new Promise((resolve, reject) => {
         let renderResult = renderReact({ di }, consumerContext);
@@ -34,7 +34,7 @@ function rendering({ logger, consumerContext, customRender, extendRender, di, us
             executeRendererCallbacks();
             resolve();
         };
-        const params = { element: renderResult, container, callback, log };
+        const params = { element: renderResult, container, callback, log, renderMode };
         try {
             renderer(params);
         }

package/lib/client/index.d.ts

@@ -1,6 +1,6 @@
-import type { EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE } from '@tramvai/tokens-render';
+import type { EXTEND_RENDER, REACT_SERVER_RENDER_MODE, RENDERER_CALLBACK, USE_REACT_STRICT_MODE } from '@tramvai/tokens-render';
 import type { ExtractDependencyType } from '@tinkoff/dippy';
-export declare function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }: {
+export declare function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, renderMode, }: {
     logger: any;
     consumerContext: any;
     extendRender?: ExtractDependencyType<typeof EXTEND_RENDER>;
@@ -8,4 +8,5 @@ export declare function rendering({ logger, consumerContext, customRender, exten
     di: any;
     useStrictMode: ExtractDependencyType<typeof USE_REACT_STRICT_MODE>;
     rendererCallback?: ExtractDependencyType<typeof RENDERER_CALLBACK>;
+    renderMode?: ExtractDependencyType<typeof REACT_SERVER_RENDER_MODE>;
 }): Promise<void>;

package/lib/client/renderer.browser.js

@@ -18,7 +18,7 @@ const ExecuteRenderCallback = ({ children, callback, }) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return children;
 };
-const renderer = ({ element, container, callback, log }) => {
+const renderer = ({ element, container, callback, log, renderMode }) => {
     if (process.env.__TRAMVAI_CONCURRENT_FEATURES && typeof hydrateRoot === 'function') {
         const wrappedElement = createElement(ExecuteRenderCallback, { callback }, element);
         let allErrors = new Map();
@@ -35,7 +35,7 @@ const renderer = ({ element, container, callback, log }) => {
                 otherErrors,
             });
         });
-        return startTransition(() => {
+        const hydrateRootFn = () => startTransition(() => {
             hydrateRoot(container, wrappedElement, {
                 onRecoverableError: (error, errorInfo) => {
                     var _a, _b;
@@ -54,6 +54,20 @@ const renderer = ({ element, container, callback, log }) => {
                 },
             });
         });
+        if (renderMode === 'streaming') {
+            // we need to run hydration only after first chunk is sent to client
+            // https://github.com/reactwg/react-18/discussions/114
+            if (window.__TRAMVAI_DEFERRED_HYDRATION) {
+                hydrateRootFn();
+            }
+            else {
+                window.__TRAMVAI_DEFERRED_HYDRATION = hydrateRootFn;
+            }
+        }
+        else {
+            hydrateRootFn();
+        }
+        return;
     }
     const { hydrate } = require('react-dom');
     return hydrate(element, container, callback);

package/lib/client/types.d.ts

@@ -1,7 +1,10 @@
+import type { ExtractDependencyType } from '@tinkoff/dippy';
+import type { REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
 type Renderer = (params: {
     element: any;
     container: Element;
     callback: () => void;
     log: any;
+    renderMode?: ExtractDependencyType<typeof REACT_SERVER_RENDER_MODE>;
 }) => any;
 export { Renderer };

package/lib/server/PageBuilder.d.ts

@@ -1,3 +1,4 @@
+import type { WebpackStats } from '@tramvai/tokens-render';
 import { ChunkExtractor } from '@loadable/server';
 export declare const mapResourcesToSlots: (resources: any) => any;
 export declare class PageBuilder {
@@ -13,7 +14,8 @@ export declare class PageBuilder {
     private log;
     private fetchWebpackStats;
     private di;
-    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, fetchWebpackStats, di, }: {
+    private renderMode;
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, fetchWebpackStats, di, renderMode, }: {
         renderSlots: any;
         pageService: any;
         resourcesRegistry: any;
@@ -27,6 +29,7 @@ export declare class PageBuilder {
         logger: any;
         fetchWebpackStats: any;
         di: any;
+        renderMode: any;
     });
     flow(): Promise<string>;
     dehydrateState(): void;
@@ -34,5 +37,8 @@ export declare class PageBuilder {
     preloadBlock(): void;
     generateHtml(): string;
     private renderSlots;
-    renderApp(extractor: ChunkExtractor): Promise<void>;
+    renderApp({ extractor, stats }: {
+        extractor: ChunkExtractor;
+        stats: WebpackStats;
+    }): Promise<void>;
 }

package/lib/server/PageBuilder.es.js

@@ -1,6 +1,6 @@
 import flatten from '@tinkoff/utils/array/flatten';
 import { buildPage } from '@tinkoff/htmlpagebuilder';
-import { ResourceType, ResourceSlot } from '@tramvai/tokens-render';
+import { ResourceSlot, ResourceType } from '@tramvai/tokens-render';
 import { safeStringify } from '@tramvai/safe-strings';
 import { ChunkExtractor } from '@loadable/server';
 import { bundleResource } from './blocks/bundleResource/bundleResource.es.js';
@@ -20,7 +20,7 @@ const mapResourcesToSlots = (resources) => resources.reduce((acc, resource) => {
     return acc;
 }, {});
 class PageBuilder {
-    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, fetchWebpackStats, di, }) {
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, fetchWebpackStats, di, renderMode, }) {
         this.htmlAttrs = htmlAttrs;
         this.renderSlots = flatten(renderSlots || []);
         this.pageService = pageService;
@@ -34,12 +34,13 @@ class PageBuilder {
         this.log = logger('page-builder');
         this.fetchWebpackStats = fetchWebpackStats;
         this.di = di;
+        this.renderMode = renderMode;
     }
     async flow() {
         const stats = await this.fetchWebpackStats({ modern: this.modern });
         const extractor = new ChunkExtractor({ stats, entrypoints: [] });
         // first we render the application, because we need to extract information about the data used by the components
-        await this.renderApp(extractor);
+        await this.renderApp({ extractor, stats });
         // load information and dependency for the current bundle and page
         await this.fetchChunksInfo(extractor);
         await Promise.all(this.renderFlowAfter.map((callback) => callback().catch((error) => {
@@ -53,9 +54,12 @@ class PageBuilder {
         return this.generateHtml();
     }
     dehydrateState() {
+        // for streaming we need to have initial state before application scripts,
+        // body end will be sent after suspended components will be resolved, but hydration will starl earlier
+        const slot = this.renderMode === 'streaming' ? ResourceSlot.HEAD_DYNAMIC_SCRIPTS : ResourceSlot.BODY_END;
         this.resourcesRegistry.register({
             type: ResourceType.asIs,
-            slot: ResourceSlot.BODY_END,
+            slot,
             // String much better than big object, source https://v8.dev/blog/cost-of-javascript-2019#json
             payload: `<script id="__TRAMVAI_STATE__" type="application/json">${safeStringify(this.context.dehydrate().dispatcher)}</script>`,
         });
@@ -69,6 +73,7 @@ class PageBuilder {
             extractor,
             pageComponent,
             fetchWebpackStats: this.fetchWebpackStats,
+            renderMode: this.renderMode,
         }));
         this.resourcesRegistry.register(await polyfillResources({
             condition: this.polyfillCondition,
@@ -77,6 +82,11 @@ class PageBuilder {
         }));
     }
     preloadBlock() {
+        // looks like we don't need this scripts preload at all, but also it is official recommendation for streaming
+        // https://github.com/reactwg/react-18/discussions/114
+        if (this.renderMode === 'streaming') {
+            return;
+        }
         const preloadResources = addPreloadForCriticalJS(this.resourcesRegistry.getPageResources());
         this.resourcesRegistry.register(preloadResources);
     }
@@ -90,8 +100,8 @@ class PageBuilder {
             description: this.htmlPageSchema,
         });
     }
-    async renderApp(extractor) {
-        const html = await this.reactRender.render(extractor);
+    async renderApp({ extractor, stats }) {
+        const html = await this.reactRender.render({ extractor, stats });
         const appHtmlAttrs = formatAttributes(this.htmlAttrs, 'app');
         this.di.register({ provide: 'tramvai app html attributes', useValue: appHtmlAttrs });
         this.renderSlots = this.renderSlots.concat({

package/lib/server/PageBuilder.js

@@ -28,7 +28,7 @@ const mapResourcesToSlots = (resources) => resources.reduce((acc, resource) => {
     return acc;
 }, {});
 class PageBuilder {
-    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, fetchWebpackStats, di, }) {
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, fetchWebpackStats, di, renderMode, }) {
         this.htmlAttrs = htmlAttrs;
         this.renderSlots = flatten__default["default"](renderSlots || []);
         this.pageService = pageService;
@@ -42,12 +42,13 @@ class PageBuilder {
         this.log = logger('page-builder');
         this.fetchWebpackStats = fetchWebpackStats;
         this.di = di;
+        this.renderMode = renderMode;
     }
     async flow() {
         const stats = await this.fetchWebpackStats({ modern: this.modern });
         const extractor = new server.ChunkExtractor({ stats, entrypoints: [] });
         // first we render the application, because we need to extract information about the data used by the components
-        await this.renderApp(extractor);
+        await this.renderApp({ extractor, stats });
         // load information and dependency for the current bundle and page
         await this.fetchChunksInfo(extractor);
         await Promise.all(this.renderFlowAfter.map((callback) => callback().catch((error) => {
@@ -61,9 +62,12 @@ class PageBuilder {
         return this.generateHtml();
     }
     dehydrateState() {
+        // for streaming we need to have initial state before application scripts,
+        // body end will be sent after suspended components will be resolved, but hydration will starl earlier
+        const slot = this.renderMode === 'streaming' ? tokensRender.ResourceSlot.HEAD_DYNAMIC_SCRIPTS : tokensRender.ResourceSlot.BODY_END;
         this.resourcesRegistry.register({
             type: tokensRender.ResourceType.asIs,
-            slot: tokensRender.ResourceSlot.BODY_END,
+            slot,
             // String much better than big object, source https://v8.dev/blog/cost-of-javascript-2019#json
             payload: `<script id="__TRAMVAI_STATE__" type="application/json">${safeStrings.safeStringify(this.context.dehydrate().dispatcher)}</script>`,
         });
@@ -77,6 +81,7 @@ class PageBuilder {
             extractor,
             pageComponent,
             fetchWebpackStats: this.fetchWebpackStats,
+            renderMode: this.renderMode,
         }));
         this.resourcesRegistry.register(await polyfill.polyfillResources({
             condition: this.polyfillCondition,
@@ -85,6 +90,11 @@ class PageBuilder {
         }));
     }
     preloadBlock() {
+        // looks like we don't need this scripts preload at all, but also it is official recommendation for streaming
+        // https://github.com/reactwg/react-18/discussions/114
+        if (this.renderMode === 'streaming') {
+            return;
+        }
         const preloadResources = preloadBlock.addPreloadForCriticalJS(this.resourcesRegistry.getPageResources());
         this.resourcesRegistry.register(preloadResources);
     }
@@ -98,8 +108,8 @@ class PageBuilder {
             description: this.htmlPageSchema,
         });
     }
-    async renderApp(extractor) {
-        const html = await this.reactRender.render(extractor);
+    async renderApp({ extractor, stats }) {
+        const html = await this.reactRender.render({ extractor, stats });
         const appHtmlAttrs = utils.formatAttributes(this.htmlAttrs, 'app');
         this.di.register({ provide: 'tramvai app html attributes', useValue: appHtmlAttrs });
         this.renderSlots = this.renderSlots.concat({

package/lib/server/ReactRenderServer.d.ts

@@ -1,7 +1,7 @@
 import type { ExtractDependencyType } from '@tinkoff/dippy';
 import type { DI_TOKEN } from '@tramvai/core';
 import type { CONTEXT_TOKEN, LOGGER_TOKEN } from '@tramvai/module-common';
-import type { EXTEND_RENDER, CUSTOM_RENDER, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
+import type { EXTEND_RENDER, CUSTOM_RENDER, REACT_SERVER_RENDER_MODE, WebpackStats } from '@tramvai/tokens-render';
 import type { ChunkExtractor } from '@loadable/server';
 import type { SERVER_RESPONSE_STREAM, SERVER_RESPONSE_TASK_MANAGER } from '@tramvai/tokens-server-private';
 export declare class ReactRenderServer {
@@ -23,5 +23,8 @@ export declare class ReactRenderServer {
         responseTaskManager: any;
         responseStream: any;
     });
-    render(extractor: ChunkExtractor): Promise<string>;
+    render({ extractor, stats, }: {
+        extractor: ChunkExtractor;
+        stats: WebpackStats;
+    }): Promise<string>;
 }

package/lib/server/ReactRenderServer.es.js

@@ -1,15 +1,51 @@
 import { Writable } from 'stream';
 import each from '@tinkoff/utils/array/each';
 import { renderReact } from '../react/index.es.js';
+import { flushFiles } from './blocks/utils/flushFiles.es.js';
 
-const RENDER_TIMEOUT = 500;
+// @todo customize
+const RENDER_TIMEOUT = 30000;
 class HtmlWritable extends Writable {
-    constructor({ responseTaskManager, responseStream, }) {
+    constructor({ responseTaskManager, responseStream, extractor, stats, }) {
         super();
+        this.alreadySentChunks = null;
         this.responseTaskManager = responseTaskManager;
         this.responseStream = responseStream;
+        this.extractor = extractor;
+        this.stats = stats;
     }
     _write(chunk, encoding, callback) {
+        if (!this.alreadySentChunks) {
+            // at first _write, all rendered lazy chunks will be saved here
+            this.alreadySentChunks = this.extractor.getMainAssets().map((entry) => entry.chunk);
+        }
+        else {
+            // then, lazy chunks from resolved suspended components will be here
+            const newChunks = this.extractor.getMainAssets().map((entry) => entry.chunk);
+            newChunks.forEach((c) => {
+                if (this.alreadySentChunks.includes(c)) {
+                    return;
+                }
+                this.alreadySentChunks.push(c);
+                // @todo a lot of duplicate code with `bundleResource`?
+                const { publicPath } = this.stats;
+                const { scripts, styles } = flushFiles([c], this.stats);
+                const genHref = (href) => `${publicPath}${href}`;
+                const html = [];
+                // we need to inject styles and scripts for lazy components before selective hydration
+                // https://github.com/reactwg/react-18/discussions/114
+                styles.forEach((s) => {
+                    html.push(`<link rel="stylesheet" href="${genHref(s)}" crossorigin="anonymous" data-critical="true" />`);
+                });
+                // synchronius script, we can't use async here, will lead to hydration missmatch
+                scripts.forEach((s) => {
+                    html.push(`<script src="${genHref(s)}" charset="utf-8" crossorigin="anonymous" data-critical="true"></script>`);
+                });
+                this.responseTaskManager.push(async () => {
+                    this.responseStream.push(html.join('\n'));
+                });
+            });
+        }
         const html = chunk.toString('utf-8');
         // delay writing HTML to response stream
         // @todo some priorities, to prevent conflicts with deferred actions scripts?
@@ -41,7 +77,7 @@ class ReactRenderServer {
         this.responseTaskManager = responseTaskManager;
         this.responseStream = responseStream;
     }
-    render(extractor) {
+    render({ extractor, stats, }) {
         var _a;
         let renderResult = renderReact({ di: this.di }, this.context);
         each((render) => {
@@ -55,7 +91,12 @@ class ReactRenderServer {
             return new Promise((resolve, reject) => {
                 const { renderToPipeableStream } = require('react-dom/server');
                 const { responseTaskManager, responseStream, log } = this;
-                const htmlWritable = new HtmlWritable({ responseTaskManager, responseStream });
+                const htmlWritable = new HtmlWritable({
+                    responseTaskManager,
+                    responseStream,
+                    extractor,
+                    stats,
+                });
                 const allReadyDeferred = Deferred();
                 const start = Date.now();
                 // prevent sent reply before all suspended components are resolved
@@ -63,10 +104,17 @@ class ReactRenderServer {
                     // eslint-disable-next-line promise/param-names
                     return allReadyDeferred.promise;
                 });
+                htmlWritable.on('finish', () => {
+                    // here all suspended components are resolved
+                    allReadyDeferred.resolve();
+                });
                 log.info({
                     event: 'streaming-render:start',
                 });
                 const { pipe, abort } = renderToPipeableStream(renderResult, {
+                    // we need to run hydration only after first chunk is sent to client
+                    // https://github.com/reactwg/react-18/discussions/114
+                    bootstrapScriptContent: `typeof window.__TRAMVAI_DEFERRED_HYDRATION === 'function' ? window.__TRAMVAI_DEFERRED_HYDRATION() : window.__TRAMVAI_DEFERRED_HYDRATION = true;`,
                     onShellReady() {
                         log.info({
                             event: 'streaming-render:shell-ready',
@@ -82,8 +130,6 @@ class ReactRenderServer {
                             event: 'streaming-render:all-ready',
                             duration: Date.now() - start,
                         });
-                        // here all suspended components are resolved
-                        allReadyDeferred.resolve();
                     },
                     onError(error) {
                         // error can be inside Suspense boundaries, this is not critical, continue rendering.

package/lib/server/ReactRenderServer.js

@@ -5,19 +5,55 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var stream = require('stream');
 var each = require('@tinkoff/utils/array/each');
 var index = require('../react/index.js');
+var flushFiles = require('./blocks/utils/flushFiles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var each__default = /*#__PURE__*/_interopDefaultLegacy(each);
 
-const RENDER_TIMEOUT = 500;
+// @todo customize
+const RENDER_TIMEOUT = 30000;
 class HtmlWritable extends stream.Writable {
-    constructor({ responseTaskManager, responseStream, }) {
+    constructor({ responseTaskManager, responseStream, extractor, stats, }) {
         super();
+        this.alreadySentChunks = null;
         this.responseTaskManager = responseTaskManager;
         this.responseStream = responseStream;
+        this.extractor = extractor;
+        this.stats = stats;
     }
     _write(chunk, encoding, callback) {
+        if (!this.alreadySentChunks) {
+            // at first _write, all rendered lazy chunks will be saved here
+            this.alreadySentChunks = this.extractor.getMainAssets().map((entry) => entry.chunk);
+        }
+        else {
+            // then, lazy chunks from resolved suspended components will be here
+            const newChunks = this.extractor.getMainAssets().map((entry) => entry.chunk);
+            newChunks.forEach((c) => {
+                if (this.alreadySentChunks.includes(c)) {
+                    return;
+                }
+                this.alreadySentChunks.push(c);
+                // @todo a lot of duplicate code with `bundleResource`?
+                const { publicPath } = this.stats;
+                const { scripts, styles } = flushFiles.flushFiles([c], this.stats);
+                const genHref = (href) => `${publicPath}${href}`;
+                const html = [];
+                // we need to inject styles and scripts for lazy components before selective hydration
+                // https://github.com/reactwg/react-18/discussions/114
+                styles.forEach((s) => {
+                    html.push(`<link rel="stylesheet" href="${genHref(s)}" crossorigin="anonymous" data-critical="true" />`);
+                });
+                // synchronius script, we can't use async here, will lead to hydration missmatch
+                scripts.forEach((s) => {
+                    html.push(`<script src="${genHref(s)}" charset="utf-8" crossorigin="anonymous" data-critical="true"></script>`);
+                });
+                this.responseTaskManager.push(async () => {
+                    this.responseStream.push(html.join('\n'));
+                });
+            });
+        }
         const html = chunk.toString('utf-8');
         // delay writing HTML to response stream
         // @todo some priorities, to prevent conflicts with deferred actions scripts?
@@ -49,7 +85,7 @@ class ReactRenderServer {
         this.responseTaskManager = responseTaskManager;
         this.responseStream = responseStream;
     }
-    render(extractor) {
+    render({ extractor, stats, }) {
         var _a;
         let renderResult = index.renderReact({ di: this.di }, this.context);
         each__default["default"]((render) => {
@@ -63,7 +99,12 @@ class ReactRenderServer {
             return new Promise((resolve, reject) => {
                 const { renderToPipeableStream } = require('react-dom/server');
                 const { responseTaskManager, responseStream, log } = this;
-                const htmlWritable = new HtmlWritable({ responseTaskManager, responseStream });
+                const htmlWritable = new HtmlWritable({
+                    responseTaskManager,
+                    responseStream,
+                    extractor,
+                    stats,
+                });
                 const allReadyDeferred = Deferred();
                 const start = Date.now();
                 // prevent sent reply before all suspended components are resolved
@@ -71,10 +112,17 @@ class ReactRenderServer {
                     // eslint-disable-next-line promise/param-names
                     return allReadyDeferred.promise;
                 });
+                htmlWritable.on('finish', () => {
+                    // here all suspended components are resolved
+                    allReadyDeferred.resolve();
+                });
                 log.info({
                     event: 'streaming-render:start',
                 });
                 const { pipe, abort } = renderToPipeableStream(renderResult, {
+                    // we need to run hydration only after first chunk is sent to client
+                    // https://github.com/reactwg/react-18/discussions/114
+                    bootstrapScriptContent: `typeof window.__TRAMVAI_DEFERRED_HYDRATION === 'function' ? window.__TRAMVAI_DEFERRED_HYDRATION() : window.__TRAMVAI_DEFERRED_HYDRATION = true;`,
                     onShellReady() {
                         log.info({
                             event: 'streaming-render:shell-ready',
@@ -90,8 +138,6 @@ class ReactRenderServer {
                             event: 'streaming-render:all-ready',
                             duration: Date.now() - start,
                         });
-                        // here all suspended components are resolved
-                        allReadyDeferred.resolve();
                     },
                     onError(error) {
                         // error can be inside Suspense boundaries, this is not critical, continue rendering.

package/lib/server/blocks/bundleResource/bundleResource.d.ts

@@ -1,9 +1,10 @@
 import type { ChunkExtractor } from '@loadable/server';
-import type { PageResource, FETCH_WEBPACK_STATS_TOKEN } from '@tramvai/tokens-render';
-export declare const bundleResource: ({ bundle, modern, extractor, pageComponent, fetchWebpackStats, }: {
+import type { PageResource, FETCH_WEBPACK_STATS_TOKEN, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
+export declare const bundleResource: ({ bundle, modern, extractor, pageComponent, fetchWebpackStats, renderMode, }: {
     bundle: string;
     modern: boolean;
     extractor: ChunkExtractor;
     pageComponent?: string;
     fetchWebpackStats: typeof FETCH_WEBPACK_STATS_TOKEN;
+    renderMode: typeof REACT_SERVER_RENDER_MODE | null;
 }) => Promise<PageResource[]>;

package/lib/server/blocks/bundleResource/bundleResource.es.js

@@ -5,6 +5,14 @@ import { isFileSystemPageComponent, fileSystemPageToWebpackChunkName } from '@tr
 import { PRELOAD_JS } from '../../constants/performance.es.js';
 import { flushFiles } from '../utils/flushFiles.es.js';
 
+const asyncScriptAttrs = {
+    defer: null,
+    async: 'async',
+};
+const deferScriptAttrs = {
+    defer: 'defer',
+    async: null,
+};
 let criticalChunks = [];
 try {
     criticalChunks = JSON.parse(process.env.__TRAMVAI_CRITICAL_CHUNKS);
@@ -12,7 +20,7 @@ try {
 catch (e) {
     // do nothing
 }
-const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchWebpackStats, }) => {
+const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchWebpackStats, renderMode, }) => {
     // for file-system pages preload page chunk against bundle chunk
     const chunkNameFromBundle = isFileSystemPageComponent(pageComponent)
         ? fileSystemPageToWebpackChunkName(pageComponent)
@@ -37,13 +45,18 @@ const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchW
             payload: `window.ap = ${`"${process.env.ASSETS_PREFIX}"`};`,
         });
     }
+    // defer scripts is not suitable for React streaming, we need to ability to run them as early as possible
+    // https://github.com/reactwg/react-18/discussions/114
+    const scriptTypeAttr = renderMode === 'streaming' ? asyncScriptAttrs : deferScriptAttrs;
     styles.map((style) => result.push({
         type: ResourceType.style,
         slot: ResourceSlot.HEAD_CORE_STYLES,
         payload: genHref(style),
         attrs: {
             'data-critical': 'true',
-            onload: `${PRELOAD_JS}()`,
+            // looks like we don't need this scripts preload at all, but also it is official recommendation for streaming
+            // https://github.com/reactwg/react-18/discussions/114
+            onload: renderMode === 'streaming' ? null : `${PRELOAD_JS}()`,
         },
     }));
     baseScripts.map((script) => result.push({
@@ -52,6 +65,7 @@ const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchW
         payload: genHref(script),
         attrs: {
             'data-critical': 'true',
+            ...scriptTypeAttr,
         },
     }));
     scripts.map((script) => result.push({
@@ -60,6 +74,7 @@ const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchW
         payload: genHref(script),
         attrs: {
             'data-critical': 'true',
+            ...scriptTypeAttr,
         },
     }));
     return result;

package/lib/server/blocks/bundleResource/bundleResource.js

@@ -14,6 +14,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
 var last__default = /*#__PURE__*/_interopDefaultLegacy(last);
 
+const asyncScriptAttrs = {
+    defer: null,
+    async: 'async',
+};
+const deferScriptAttrs = {
+    defer: 'defer',
+    async: null,
+};
 let criticalChunks = [];
 try {
     criticalChunks = JSON.parse(process.env.__TRAMVAI_CRITICAL_CHUNKS);
@@ -21,7 +29,7 @@ try {
 catch (e) {
     // do nothing
 }
-const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchWebpackStats, }) => {
+const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchWebpackStats, renderMode, }) => {
     // for file-system pages preload page chunk against bundle chunk
     const chunkNameFromBundle = experiments.isFileSystemPageComponent(pageComponent)
         ? experiments.fileSystemPageToWebpackChunkName(pageComponent)
@@ -46,13 +54,18 @@ const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchW
             payload: `window.ap = ${`"${process.env.ASSETS_PREFIX}"`};`,
         });
     }
+    // defer scripts is not suitable for React streaming, we need to ability to run them as early as possible
+    // https://github.com/reactwg/react-18/discussions/114
+    const scriptTypeAttr = renderMode === 'streaming' ? asyncScriptAttrs : deferScriptAttrs;
     styles.map((style) => result.push({
         type: tokensRender.ResourceType.style,
         slot: tokensRender.ResourceSlot.HEAD_CORE_STYLES,
         payload: genHref(style),
         attrs: {
             'data-critical': 'true',
-            onload: `${performance.PRELOAD_JS}()`,
+            // looks like we don't need this scripts preload at all, but also it is official recommendation for streaming
+            // https://github.com/reactwg/react-18/discussions/114
+            onload: renderMode === 'streaming' ? null : `${performance.PRELOAD_JS}()`,
         },
     }));
     baseScripts.map((script) => result.push({
@@ -61,6 +74,7 @@ const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchW
         payload: genHref(script),
         attrs: {
             'data-critical': 'true',
+            ...scriptTypeAttr,
         },
     }));
     scripts.map((script) => result.push({
@@ -69,6 +83,7 @@ const bundleResource = async ({ bundle, modern, extractor, pageComponent, fetchW
         payload: genHref(script),
         attrs: {
             'data-critical': 'true',
+            ...scriptTypeAttr,
         },
     }));
     return result;

package/lib/server.es.js

@@ -3,9 +3,9 @@ import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core'
 import { CREATE_CACHE_TOKEN, LOGGER_TOKEN, REQUEST_MANAGER_TOKEN, RESPONSE_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
 import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import { ClientHintsModule, USER_AGENT_TOKEN } from '@tramvai/module-client-hints';
-import { RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, BACK_FORWARD_CACHE_ENABLED, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, MODERN_SATISFIES_TOKEN, RENDER_FLOW_AFTER_TOKEN, FETCH_WEBPACK_STATS_TOKEN, CUSTOM_RENDER, EXTEND_RENDER, REACT_SERVER_RENDER_MODE, ResourceType } from '@tramvai/tokens-render';
+import { RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, BACK_FORWARD_CACHE_ENABLED, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, MODERN_SATISFIES_TOKEN, RENDER_FLOW_AFTER_TOKEN, FETCH_WEBPACK_STATS_TOKEN, REACT_SERVER_RENDER_MODE, CUSTOM_RENDER, EXTEND_RENDER, ResourceType } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
-import { Scope } from '@tinkoff/dippy';
+import { Scope, optional } from '@tinkoff/dippy';
 import { satisfies } from '@tinkoff/user-agent';
 import { isRedirectFoundError } from '@tinkoff/errors';
 import { setPageErrorEvent, PageErrorStore, deserializeError } from '@tramvai/module-router';
@@ -180,7 +180,6 @@ Page Error Boundary will be rendered for the client`,
                     pageService: PAGE_SERVICE_TOKEN,
                     bfcacheEnabled: BACK_FORWARD_CACHE_ENABLED,
                 },
-                multi: true,
             }),
             provide({
                 provide: 'htmlBuilder',
@@ -199,6 +198,7 @@ Page Error Boundary will be rendered for the client`,
                     logger: LOGGER_TOKEN,
                     fetchWebpackStats: FETCH_WEBPACK_STATS_TOKEN,
                     di: DI_TOKEN,
+                    renderMode: optional(REACT_SERVER_RENDER_MODE),
                 },
             }),
             provide({

package/lib/server.js

@@ -181,7 +181,6 @@ Page Error Boundary will be rendered for the client`,
                     pageService: tokensRouter.PAGE_SERVICE_TOKEN,
                     bfcacheEnabled: tokensRender.BACK_FORWARD_CACHE_ENABLED,
                 },
-                multi: true,
             }),
             core.provide({
                 provide: 'htmlBuilder',
@@ -200,6 +199,7 @@ Page Error Boundary will be rendered for the client`,
                     logger: tokensCommon.LOGGER_TOKEN,
                     fetchWebpackStats: tokensRender.FETCH_WEBPACK_STATS_TOKEN,
                     di: core.DI_TOKEN,
+                    renderMode: dippy.optional(tokensRender.REACT_SERVER_RENDER_MODE),
                 },
             }),
             core.provide({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.141.1",
+  "version": "2.142.0",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -26,13 +26,13 @@
     "@tinkoff/layout-factory": "0.3.8",
     "@tinkoff/errors": "0.3.8",
     "@tinkoff/url": "0.8.6",
-    "@tinkoff/user-agent": "0.4.412",
-    "@tramvai/module-client-hints": "2.141.1",
-    "@tramvai/module-router": "2.141.1",
-    "@tramvai/react": "2.141.1",
+    "@tinkoff/user-agent": "0.4.414",
+    "@tramvai/module-client-hints": "2.142.0",
+    "@tramvai/module-router": "2.142.0",
+    "@tramvai/react": "2.142.0",
     "@tramvai/safe-strings": "0.5.11",
-    "@tramvai/tokens-render": "2.141.1",
-    "@tramvai/experiments": "2.141.1",
+    "@tramvai/tokens-render": "2.142.0",
+    "@tramvai/experiments": "2.142.0",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
@@ -40,14 +40,14 @@
     "@tinkoff/dippy": "0.8.15",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.1.6",
-    "@tramvai/cli": "2.141.1",
-    "@tramvai/core": "2.141.1",
-    "@tramvai/module-common": "2.141.1",
-    "@tramvai/state": "2.141.1",
-    "@tramvai/test-helpers": "2.141.1",
-    "@tramvai/tokens-common": "2.141.1",
-    "@tramvai/tokens-router": "2.141.1",
-    "@tramvai/tokens-server-private": "2.141.1",
+    "@tramvai/cli": "2.142.0",
+    "@tramvai/core": "2.142.0",
+    "@tramvai/module-common": "2.142.0",
+    "@tramvai/state": "2.142.0",
+    "@tramvai/test-helpers": "2.142.0",
+    "@tramvai/tokens-common": "2.142.0",
+    "@tramvai/tokens-router": "2.142.0",
+    "@tramvai/tokens-server-private": "2.142.0",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",