I am by no means an expert in Next.js, I'm only 4 hours through the video but I think it has something to do with the structure of the content, and the contents therein between what gets rendered SSR to what gets rendered client-side.
It may not be in the same file, as you didn't mention it, but I was getting it in NavBar.tsx
Instead of
if (fetching) {
// user not logged in
} else if (!data?.me) {
with
if (fetching || !data?.me) {
Where, initially, when the query is fetching, it is returning null for body. With the update, that is no longer the case.
So, without that change, I think Next is surprised, that when the query is no longer fetching, that instead of a div with no children, it's now a div with children.
from lireddit.
Comments (5)
I am by no means an expert in Next.js, I'm only 4 hours through the video but I think it has something to do with the structure of the content, and the contents therein between what gets rendered SSR to what gets rendered client-side.
It may not be in the same file, as you didn't mention it, but I was getting it in
NavBar.tsx
Instead of
with
Where, initially, when the query is fetching, it is returning
null
forbody
. With the update, that is no longer the case.So, without that change, I think Next is surprised, that when the query is no longer fetching, that instead of a
div
with no children, it's now a div with children.Hence the error
from lireddit.
I'm not sure what the fix is
from lireddit.
if we put inside NextLink this warning goes away. not sure why is this.
from lireddit.
Thanks @AaronMcCloskey. I was also getting same issue
from lireddit.
I found a method to solve this issue.
here is my code before:
<NextLink href="/create-post"> <Link >create post</Link> </NextLink>
We know NextLink will cause the hydration issue.
After I change the code like this:
<Link as={NextLink} href="/create-post">create post</Link>
the hydration issue is solved.
I found the method from here:
chakra-ui/chakra-ui#7090
from lireddit.
Related Issues (20)
Recommend Projects
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
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
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.