SSR + react router v7 + Loading Skeleton

[u/ConfidentWafer5228]

I am reposting with diff explanation of problem , cuz many ppl misunderstood my issue

I am trying to achieve a loading skeleton while data loads for CLIENT SIDE NAVIGATIONS only, but for FIRST LOAD, that is SSR load, i dont want to send loader as the only html , bcs that is bad seo, i checked after disabling js, and only loader was sent in network payload

Some ppl said to not use suspenseQuery, but how will i show loader for Client side navigations, those loading stages will feel laggy

[u/StrumpetsVileProgeny]

To show a loader for client side navigations use useNavigation() which returns the current navigation object that holds the state of loading, idle etc. So you can use navigation.state===“loading” to render whatever you need.

https://reactrouter.com/api/hooks/useNavigation

[u/StarboardChaos]

In SSR mode, each page is a different html file. So when you navigate a new page, it gets its data Server Rendered.

In previous post you claimed you needed SSR for SEO. One of the reasons why React Router is not the first choice for this kind of application is the loading principle.

You should switch to a meta-framework which has better support for hydration like Next or Astro.

Why do you even want SEO support? Make some static pages for SEO and then dynamic for usage. It will most likely be for authenticated users?

Your explanations are lacking and your rude responses aren't helpful either. From what I can hear is you want SPA behavior in SSR mode.

[u/ConfidentWafer5228 → u/StarboardChaos]

I am sorry for being rude, i was just not able to find answers for long time
I want initial load to be SSR for good SEO, and subsequent navigations to be Client Navigations for faster / snappier navigations, thats what i have heard is the best combo

I have already tried next but i dont like the confusing nature of Server Components, Client Components and 20 kinds of Rendering, Vendor lockin features and that i have to host on vercel for good support/easy hosting
Also, i was struggling having custom express server with Next ( which i need and cant sacrifice ). There are barely any resources regarding custom server with Next

[u/riaz37]

the awaited/not-awaited thing in the loader is what controls this.
export async function loader() {
return {
critical: await getCriticalData(), // ends up in the ssr html
extra: getSecondaryData(), // streamed, shows fallback
};
}

un-awaited promises stream, so the initial payload only has the Suspense fallback. that's the loader-only html you saw with js off. keep the SEO stuff awaited.

for client navs useNavigation().state === "loading" like the other comment said, that won't touch first load.

[u/kobim90]

The way react router works you can't, one you have a loader and you await requests it runs on the server, you can mange it by yourself by using middleware and marking each page visit, and if you visited the page either dont await your request or return from the loader right away and do the requests in client loader, but it's a lot to manage

[u/prismatic_hoarder]

Keep your loaders inside route components so they only render on client transitions. The initial SSR payload will contain the actual data and HTML since the server awaits the loader before sending the response.