Comments (10)
florian-lp
commented on May 29, 2024
1
Glad to hear you found a workaround for the time being.
I hope to look into this issue/the related ones more soon.
from next.js.
jlhervy
commented on May 29, 2024
I would like to be a little more specific :
Here is the root layout :
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
console.log("RootLayout");
return (
<html lang="en" className="min-h-screen dark">
<body className="flex flex-col mx-auto text-gray-100 pt-10 w-6/12">
<SideBar />
{children}</body>
</html>
);
}Here is the Sidebar (part of it) :
const SideBar = () => {
const pathname = usePathname();
return (
<div className=" ">
<Sidebar aria-label="Sidebar with multi-level dropdown example" className="z-10 w-48 !opacity-80 !text-gray-100">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item as={Link} href="/chatbot/" icon={HiBeaker} active={pathname == "/chatbot/"}>
Chatbot
</Sidebar.Item>
<Sidebar.Item as={Link} href="/edit/" icon={HiCode} active={pathname == "/edit/"}>
Éditeur SQL
</Sidebar.Item>When I click the sidebar's items, in dev mode, the console.log("RootLayout"); does not trigger.
When I produce a static export, and click the same items, the console.log("RootLayout"); triggers at every page change.
from next.js.
raRaRa
commented on May 29, 2024
Same issue here, adding 'use client' to the layout actually fixed it for me. Really odd issue. In my case I'm not doing static export, the site is hosted on Vercel and this only breaks on prod, while it works as expected on dev.
from next.js.
jlhervy
commented on May 29, 2024
Same issue here, adding 'use client' to the layout actually fixed it for me. Really odd issue.
Yes, but I actually have "use client" in the layout :
https://github.com/jlhervy/test-app-nextjs/blob/main/app/layout.tsx
And I still get the problem with static export
from next.js.
florian-lp
commented on May 29, 2024
Possibly related to / duplicate of #52558.
from next.js.
jlhervy
commented on May 29, 2024
Yes, after searching in the issues I noticed that the issue has come up several times.
In one of the posts, someone posted a code that didn't use the Link component directly, but instead :
const { push } = useRouter()
return (
<Button onClick={() => push('/about')} className={pathname === '/about/' ? 'text-red-500' : ''}>home</Button>
<Button onClick={() => push('/edit')} className={pathname === '/edit/' ? 'text-red-500' : ''}>info</Button>
)And indeed, the root layout does not rerender with these buttons, compared with a Link.
However, it does not rerender only for very simple pages.
For example with this page :
'use client'
import React from 'react';
export default function Tables() {
return (
<div className="flex flex-col">
page TABLES
</div>
);
}But if I only add this import to the top :
import { List } from "flowbite-react";
without even using it, then the root layout starts to re-render again...
from next.js.
florian-lp
commented on May 29, 2024
When using a minimal reproduction (with 'use client' in the root layout) I actually did not observe a re-render most of the time. After repeated client-side navigations, it does appear to re-render every now and then, however, it does not re-mount. I'm not actually sure what the intended behavior surrounding this is.
For the time being, I suggest using either useEffect or splitting the code out into a separate client component.
from next.js.
jlhervy
commented on May 29, 2024
Could you share your minimal reproduction please ?
Does it use flowbite and Links ?
For me, the re-render is problematic because I have a background of particles, and the distribution is modified with every page change.
Moreover, it is problematic because there is absolutely no re-render in dev mode (even after repeated client-side navigation), but it happens in production / static export.
from next.js.
florian-lp
commented on May 29, 2024
My minimal reproduction omitted flowbite, however, I've just tested it with your repo as well and still observe the same behaviour as I mentioned before. This behaviour seems to be related to browser caching. When a new revalidation payload is fetched the root layout seems to re-render (which is indeed an issue).
Is there anything preventing you from using useEffect for your use case btw?
from next.js.
jlhervy
commented on May 29, 2024
Ok I can notice the behaviour you mention, the re-loading doesn't trigger at every page change, but seem to come randomly.
In my real application, I use tsParticles and this code : https://github.com/tsparticles/react/#readme
I tried to add useEffect to several places in the Particles component, but did not succeed because the particlesLoaded function would still trigger.
Finally, I used React Memo this way in my layout :
const MemoizedParticles = React.memo(ParticlesCustom);
//...
<html lang="en" className="min-h-screen dark" >
<body>
<MemoizedParticles />And now it works, it does not rerender with page changes.
So for now I am satisfied with this workaround.
Thank you for your help.
from next.js.
Related Issues (20)
- Docs: Allow https://nextjs.org/ to work when PerformanceObserver is undefined
- v14.2.x gives warning for `Invalid page configuration` for `middleware.ts` HOT 3
- Dependencies with `exports` field break on pages router with `esmExternals: false` HOT 1
- Intercepted page in dynamic route with route groups gets called when linked from another segment
- Rewritten paths cause a client side redirect unexpectedly when set up with basePath: false and an active basePath
- SWC does not catch nested `styled-jsx` tags in props HOT 2
- SWC panicks when processing nested `styled-jsx` tags HOT 1
- Code with a worker fails to build under the edge runtime, even if it's dead code.
- Runtime error in my local machine in rendering current time HOT 4
- Cdn problem with App Router HOT 1
- Values sent by headers in the middleware are not accepting letters with accents HOT 2
- Docker image ignores signals HOT 1
- Browser Navigation does not load correct page HOT 6
- The example from the documentation doesn't work. Link + [...catchAll] does not close modal window HOT 1
- The example from the documentation doesn't work. Link + [...catchAll] does not close modal window HOT 6
- Next.js cannot compile with turbo when lowlight is used HOT 6
- Screen flickers when setting cookies (server side)
- Docs: Resource Hints section contains `ReactDOM.prefetchDNS` method typo HOT 1
- Inconsistent behavior with loading state (`loading.tsx`) and `useTransition` HOT 1
- Problem with Next.js Turbo Mode and Non-English Characters. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.