我在NextJS中使用Context时遇到了一个问题。当我看到页面源代码时,我没有看到任何预先呈现的HTML。
现在,在页面源代码中,我无法看到此标记之后的任何预呈现数据-
下面是我当前从_app. js返回组件的方式-
<Provider store={store}>
<PersistGate persistor={persistor}>
<InternetConnectionStatusProvider>
<Component {...pageProps} />
{/* </InternetConnectionStatusProvider> */}
</PersistGate>
</Provider>
背景-
const { createContext, useState, useEffect, useMemo } = require('react')
export const InternetConnectionStatusContext = createContext({
isOnline: true,
})
export const InternetConnectionStatusProvider = ({ children }) => {
const [isOnline, setOnline] = useState(true)
// if (typeof navigator === 'undefined') {
// return null
// }
useEffect(() => {
setOnline(navigator.onLine)
window.addEventListener('online', () => {
setOnline(true)
})
window.addEventListener('offline', () => {
setOnline(false)
})
return () => {
window.removeEventListener('online', () => {
setOnline(true)
})
window.removeEventListener('offline', () => {
setOnline(false)
})
}
}, [navigator.onLine])
const value = useMemo(() => ({ isOnline }))
return (
<InternetConnectionStatusContext.Provider value={value}>
{children}
</InternetConnectionStatusContext.Provider>
)
}
请注意Redux -Persists也有类似的问题,这两个都不能单独工作。
期望NextJS也能预先呈现这些页面。
1条答案
按热度按时间mw3dktmi1#
对于那些在他们的应用程序中发现这个问题的人,这是一个在使用redux-persist这样的库时给下一个应用程序补水的问题,它倾向于延迟代码执行,以便从本地存储中预先填充状态。
这种延迟会导致服务器发送null作为响应,最好在修复之前不要在nextjs中使用这个库。