Question about layout head and side effect in library #74741
-
SummaryHi, app/layout: export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<link
href="some.css"
/>
....app/page 'use client';
import {Component} from 'our-lib/component'
import {setThemes} from 'our-lib/themes'
import { useEffect } from 'react';
export default function Home() {
useEffect(() => {
setTheme('some.css')node_modules/our-lib/component import something from 'our-lib/themes'
...node_modules/our-lib/themes function init(){
if (window) {
parseHead()
...
}
...
}
init()testing is done in dev version In short, in our themes module we have side effect function init(), which parses head of current document (if code is run on the client side) for some links, and then uses it In previous release, first the head links were attached to DOM, and then our init function was called We haven't made any significant changes in theme module, nor in component module. But there were some structural changes, reorganizing some imports, etc. in other modules I'm asking for some general insights on the lifecycle of how the layout is rendered, when the markup is hydrated and loaded/compared with server layout, maybe some ideas on what could lead to this issue. Thanks in advance Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
Did you try adding Also pardon me here, but: if (window) {That ought to crash on the server, right? it should be if (typeof window !== 'undefined') { |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, you got the concept right I've added the same logs to my project and i see big difference So does it mean, that importing from my lib shifts resolving (i mean creating a chunk bundle) to server side? How can i change this behaviour? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, we are using the typeof window !== 'undefined' to check if there is a window |
Beta Was this translation helpful? Give feedback.
-
|
As i've read here https://nextjs-faq.com/browser-api-client-component And most important, i'm trying to find the difference between our current and previous release, because in previous everything worked fine without dynamic imports https://nextjs.org/docs/app/building-your-application/rendering/client-components#full-page-load This is how the head looks like at the moment of calling the init function I'm struggling to find comprehensive info about React Server Components Payload (besides couple sentences in docs) |
Beta Was this translation helpful? Give feedback.
-
|
Hi, so i believe we've found the error that lead to this behaviour P.S. Found a good article about architecture of SSR react components, may be useful (also entry level info about RSC payload) |
Beta Was this translation helpful? Give feedback.
-
|
Nice! Yeah I was convinced this was an issue caused by deferring to client render, and to diagnose further, I'd need to look at code. Good job! |
Beta Was this translation helpful? Give feedback.
Hi, so i believe we've found the error that lead to this behaviour
In the react component we've used document.createElement, which somehow lead to prerendering on the server error (it's marked as use client and document call was inside of react useMemo hook, which should be postponed to hydration because hooks aren't generally available on server side?), and shift in module resolving time to moment where client and server DOM's are not yet reconciliated. After refactoring using refs, everything works fine
P.S. Found a good article about architecture of SSR react components, may be useful (also entry level info about RSC payload)
https://www.smashingmagazine.com/2024/05/forensics-react-ser…