[Flight] Sort Server Components Track Group ahead of Client Scheduler/Components Tracks (#31736)
Stacked on #31735. This ensures that Server Components Track comes first. Since it's typically rendered first on the server for initial load and then flows into scheduler and client components work. Also puts it closer to the Network and further away from "Main" JS. <img width="769" alt="Screenshot 2024-12-11 at 5 31 41 PM" src="https://github.com/user-attachments/assets/7198db0f-075e-4a78-8ea4-3bfbf06727cb" /> Same trick as in #31615.
Sebastian Markbåge committed
Dec 16, 2024 at 12:39 UTC
07facb52d3cad10ae9888bf3b645d5a0cb760016
3 files changed
+29
-5
packages/react-client/src/ReactFlightClient.js
+5
-1
@@ -69,7 +69,10 @@ import {createBoundServerReference} from './ReactFlightReplyClient';
69
70
import {readTemporaryReference} from './ReactFlightTemporaryReferences';
71
72
-import {logComponentRender} from './ReactFlightPerformanceTrack';
72
+import {
73
+ markAllTracksInOrder,
74
+ logComponentRender,
75
+} from './ReactFlightPerformanceTrack';
76
77
import {
78
REACT_LAZY_TYPE,
@@ -643,6 +646,7 @@ export function reportGlobalError(response: Response, error: Error): void {
646
}
647
});
648
if (enableProfilerTimer && enableComponentPerformanceTrack) {
649
+ markAllTracksInOrder();
650
flushComponentPerformance(getChunk(response, 0), 0, -Infinity);
651
}
652
}
packages/react-client/src/ReactFlightPerformanceTrack.js
+20
@@ -19,6 +19,26 @@ const supportsUserTiming =
19
20
const COMPONENTS_TRACK = 'Server Components ⚛';
21
22
+const componentsTrackMarker = {
23
+ startTime: 0.001,
24
+ detail: {
25
+ devtools: {
26
+ color: 'primary-light',
27
+ track: 'Primary',
28
+ trackGroup: COMPONENTS_TRACK,
29
+ },
30
+ },
31
+};
32
+
33
+export function markAllTracksInOrder() {
34
+ if (supportsUserTiming) {
35
+ // Ensure we create the Server Component track groups earlier than the Client Scheduler
36
+ // and Client Components. We can always add the 0 time slot even if it's in the past.
37
+ // That's still considered for ordering.
38
+ performance.mark('Server Components Track', componentsTrackMarker);
39
+ }
40
+}
41
+
42
// Reused to avoid thrashing the GC.
43
const reusableComponentDevToolDetails = {
44
color: 'primary',
packages/react-reconciler/src/ReactFiberPerformanceTrack.js
+4
-4
@@ -63,7 +63,7 @@ export function setCurrentTrackFromLanes(lanes: Lanes): void {
63
}
64
65
const blockingLaneMarker = {
66
- startTime: 0,
66
+ startTime: 0.003,
67
detail: {
68
devtools: {
69
color: 'primary-light',
@@ -74,7 +74,7 @@ const blockingLaneMarker = {
74
};
75
76
const transitionLaneMarker = {
77
- startTime: 0,
77
+ startTime: 0.003,
78
detail: {
79
devtools: {
80
color: 'primary-light',
@@ -85,7 +85,7 @@ const transitionLaneMarker = {
85
};
86
87
const suspenseLaneMarker = {
88
- startTime: 0,
88
+ startTime: 0.003,
89
detail: {
90
devtools: {
91
color: 'primary-light',
@@ -96,7 +96,7 @@ const suspenseLaneMarker = {
96
};
97
98
const idleLaneMarker = {
99
- startTime: 0,
99
+ startTime: 0.003,
100
detail: {
101
devtools: {
102
color: 'primary-light',