Next.js Discord

Discord Forum

How to achieve Server Rendered App for SEO + SPA behaviour for subsequent navigation

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Avatar
Masai LionOP
New to nextjs, have used react for a while.

I need the initial launch of app to be server rendered and rest of the navigation to be client rendered.

What i have gathered is there is client components which are pre-rendered on server and subsequent navigations would happen purely on client with data fetching happening on client.

How do we do pre-rendering of the client component with data fetching on server?

remix js has a client loader, so if component is reached via client navigation it would use the client loader. If reached via full page refresh it would call the loader function on server and send back the component. https://remix.run/docs/en/main/route/client-loader

With Next 15 and app router how can this be achieved?

If i define a component as RSC any route matching that would always be server rendered - But I want to avoid server rendering and do client rendering of the same component if user is navigating as a SPA.

I am looking at this to avoid unnecessary server rendering cost. First rendering on server is requred for SEO subsequent ones, I am ok for user to download the bundle and call API

I came across this discussion on reddit, but was left confused and could not arrive at a conclusion

https://www.reddit.com/r/nextjs/comments/16ervbh/i_dont_want_to_use_nextjs_as_my_api_server_i_dont/

1 Reply

Avatar
Masai LionOP
bumping this thread

i have got some suggestions to use shallow routing, if someone could share it has helped them it would be great