Client side navigation and static props
Answered
Barbary Lion posted this in #help-forum
Barbary LionOP
I am writing a next JS blog with posts and comments
For the comments component I opted for:
-Static comments fetched from the CMS
-User comments fetched from localStorage
The problem is that when navigating with Link component, the comments are not updated between posts, this is because the props are not properly passed to the PostComments component (because it uses client side generation). I have to push reload button for them to be updated (triggering a server refresh)
The rest of the blog post (content, headline, related posts,…) are properly updated ,even when client side navigating.
I’ve been thinking about it for the last 2 hours, chatGPT, NextJS docs, nothing seems to help, except changing all the <Link for <a tags, losing all benefits of client side navigation.
I want NextJS to treat my PostComment component as any other component, feeding him the proper props no matter if I use client side on this component.
The useEffect hook is only executed once (normally twice, once on the client and once on the server),and the props are not updated
Hoping to be clear, have a good day 😃
For the comments component I opted for:
-Static comments fetched from the CMS
-User comments fetched from localStorage
The problem is that when navigating with Link component, the comments are not updated between posts, this is because the props are not properly passed to the PostComments component (because it uses client side generation). I have to push reload button for them to be updated (triggering a server refresh)
The rest of the blog post (content, headline, related posts,…) are properly updated ,even when client side navigating.
I’ve been thinking about it for the last 2 hours, chatGPT, NextJS docs, nothing seems to help, except changing all the <Link for <a tags, losing all benefits of client side navigation.
I want NextJS to treat my PostComment component as any other component, feeding him the proper props no matter if I use client side on this component.
The useEffect hook is only executed once (normally twice, once on the client and once on the server),and the props are not updated
Hoping to be clear, have a good day 😃
Answered by Barbary Lion
Nevermind, I forgot push the static props on my comments variable:
useEffect(() => {
setComments(postData.comments)
}, [postData])1 Reply
Barbary LionOP
Nevermind, I forgot push the static props on my comments variable:
useEffect(() => {
setComments(postData.comments)
}, [postData])Answer