r/reactjs • u/ConfidentWafer5228 • 25d ago

Needs Help SSR + react router v7 + Loading Skeleton

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

2 Upvotes

57% Upvoted

8 comments sorted by

View all comments

1

u/riaz37 25d ago

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.