Change route without calling loader

[parsagholipour]

How can I navigate to a page without invoking the loader? Even if I don't return anything in the loader, it still gets called and causes a delay in the navigation. I cannot remove the loader, because I want to use it for bots/'first page load' but not for client-side navigation(to show a loading immediately. When I use defer it still waits for the initial response).

[kiliman]

Export a function shouldRevalidate and return false

https://remix.run/docs/en/main/route/should-revalidate

[parsagholipour]

Let's say he visits page A with a document request, and he wans to navigate to page B which includes a Loader and a shouldRevalidate function which returns false, it still calls the Loader for the first time.

[kiliman]

Hm... if B has never loaded, I'm not sure why you don't want the loader call.

Anyway, it seems like you're fighting the framework. Perhaps sticking with React Router and doing everything client-side would be a better fit.

[parsagholipour]

Because I want a better user experience and display a skeleton loading screen first. I believe you'll agree that if the user can see a skeleton immediately, it's better than waiting for 100-1000ms before seeing the page. I have added this to routes.js as a workaround:

if (window.__skip_loader) {
  return null
}

Don't you think the framework should support this scenario? What's the ideal solution?
One solution would be to remove loader function but I want full page load for document requests(for SEO and bots) but lazy load for client side navigations.

[sergiodxa]

I think it's better to navigate immediately with data, have you tried adding prefetch to the Link? This way the browser will prefetch the data and other assets of a route and once the user clicks the link it may have already loaded or at least loaded faster.

If you want to replace the current UI with a skeleton, you can detect the navigation with useNavigation() and render a skeleton in a parent route.

[parsagholipour]

@sergiodxa In my case I have a list of products which they may want to visit and I cannot prefetch all of them. but using useNavigation() and rendering a skeleton in a parent route works.

[spacepolice10]

Hi, what if I already have data preloaded on the client side and want to use it instead of fire loading once again? Maybe, there is a way to pass cached data to loader from client side? Or maybe a way to replace all the server loaders with client one when web application has already loaded and is in use?

[kiliman]

Looks like you may want the new Client Data feature from Remix v2.4.0.

https://remix.run/docs/en/main/guides/client-data

[spacepolice10]

@kiliman actually, it is awesome. Thank you