How to create the same page both client side and server side?
Unanswered
West African Lion posted this in #help-forum
West African LionOP
I have a home feed where users can scroll posts, and when they click on a post it
I tried intercepting and parallel routes, but it seems to show a modal, not as if the user visited a different page.
So think of it as a Twitter like UX, I want the fast client side navigation + the benefits of SSR, like SEO, and OG metadata.
Can you guys please help me with resources on how to implement this in NextJS?
router.push(/[userName]/post/[postId]), but there is a slight delay, so what I want is when user is redirected within app, it loads a client side view, which shows the same URL, so user can copy and share, but when user directly visits the URL, I need to show the server rendered page, so I can insert the OG meta data, and SEO.I tried intercepting and parallel routes, but it seems to show a modal, not as if the user visited a different page.
So think of it as a Twitter like UX, I want the fast client side navigation + the benefits of SSR, like SEO, and OG metadata.
Can you guys please help me with resources on how to implement this in NextJS?
4 Replies
Pacific sand lance
I don't understand, when page is rendered server-side,
shallow navigation is still performed?Also why do you use router.push, looks like
next/link should be enoughWest African LionOP
I am using router push because post is a container which has content, user avatar, and post interactions as like and dislike, clicking anywhere on the container must redirect to the post detail, but if clicked specifically on interaction buttons or user avatar, need to perform different functionality.
I am using Next15+, does shallow navigation still exist there? Cause what I notice is when I click on the post to open the post detail, there is slight delay, more when returning back, and I checked, and the server component is the one that is getting rendered. Which performs a db fetch which causes the delay, what I intend is I already have posts data in global state, I want a method where I will display the post in post detail page from the global state, instead of fetching the post from db in the server component, but still need the server component so that I can have OG metadata and SEO.
I am using Next15+, does shallow navigation still exist there? Cause what I notice is when I click on the post to open the post detail, there is slight delay, more when returning back, and I checked, and the server component is the one that is getting rendered. Which performs a db fetch which causes the delay, what I intend is I already have posts data in global state, I want a method where I will display the post in post detail page from the global state, instead of fetching the post from db in the server component, but still need the server component so that I can have OG metadata and SEO.
The server component must only render when I am visiting the url directly not when I come from feed. When I visit the post details from the feed, it must populate from the existing global posts state, but the url in the browser should point to the same URL the user can directly visit.