Remove the hide-fouc
tags after hydration (#38592)
The current timing (after chunk loaded) isn't accurate enough because React hydrates asynchronously. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
This commit is contained in:
parent
1e09d9bd40
commit
b8ed30648d
1 changed files with 11 additions and 20 deletions
|
@ -76,7 +76,6 @@ const getCacheKey = () => {
|
|||
}
|
||||
|
||||
const encoder = new TextEncoder()
|
||||
const loadedCss: Set<string> = new Set()
|
||||
|
||||
let initialServerDataBuffer: string[] | undefined = undefined
|
||||
let initialServerDataWriter: ReadableStreamDefaultController | undefined =
|
||||
|
@ -165,15 +164,11 @@ async function loadCss(cssChunkInfoJson: string) {
|
|||
return Promise.resolve()
|
||||
}
|
||||
|
||||
function createLoadFlightCssStream(callback?: () => Promise<void>) {
|
||||
const cssLoadingPromises: Promise<any>[] = []
|
||||
function createLoadFlightCssStream() {
|
||||
const loadCssFromStreamData = (data: string) => {
|
||||
if (data.startsWith('CSS')) {
|
||||
const cssJson = data.slice(4).trim()
|
||||
if (!loadedCss.has(cssJson)) {
|
||||
loadedCss.add(cssJson)
|
||||
cssLoadingPromises.push(loadCss(cssJson))
|
||||
}
|
||||
loadCss(cssJson)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -204,19 +199,10 @@ function createLoadFlightCssStream(callback?: () => Promise<void>) {
|
|||
},
|
||||
})
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
Promise.all(cssLoadingPromises).then(() => {
|
||||
// TODO: find better timing for css injection
|
||||
setTimeout(() => {
|
||||
callback?.()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return loadCssFromFlight
|
||||
}
|
||||
|
||||
function useInitialServerResponse(cacheKey: string, onFlightCssLoaded: any) {
|
||||
function useInitialServerResponse(cacheKey: string) {
|
||||
const response = rscCache.get(cacheKey)
|
||||
if (response) return response
|
||||
|
||||
|
@ -227,7 +213,7 @@ function useInitialServerResponse(cacheKey: string, onFlightCssLoaded: any) {
|
|||
})
|
||||
|
||||
const newResponse = createFromReadableStream(
|
||||
readable.pipeThrough(createLoadFlightCssStream(onFlightCssLoaded))
|
||||
readable.pipeThrough(createLoadFlightCssStream())
|
||||
)
|
||||
|
||||
rscCache.set(cacheKey, newResponse)
|
||||
|
@ -239,12 +225,17 @@ function ServerRoot({
|
|||
onFlightCssLoaded,
|
||||
}: {
|
||||
cacheKey: string
|
||||
onFlightCssLoaded: any
|
||||
onFlightCssLoaded: () => Promise<void>
|
||||
}) {
|
||||
React.useEffect(() => {
|
||||
rscCache.delete(cacheKey)
|
||||
})
|
||||
const response = useInitialServerResponse(cacheKey, onFlightCssLoaded)
|
||||
React.useEffect(() => {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
onFlightCssLoaded?.()
|
||||
}
|
||||
}, [onFlightCssLoaded])
|
||||
const response = useInitialServerResponse(cacheKey)
|
||||
const root = response.readRoot()
|
||||
return root
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue