Lazy loading and displaying additional data

[kpalmvik]

Hi!

I would like to lazy load and display additional data on the client, and not include this data in the server generated HTML.

For example, imagine a blog post followed by a “related posts” section. The blog post text would obviously be server rendered, but finding the related posts might be magnitudes slower and should therefore not block the initial page load.

Would the recommended approach be to create a resource route and fetch the data manually in a component (through useEffect or similar), or is there an obvious Remix solution that I have missed?

[sergiodxa]

You should create the resource route as you said and use the useFetcher hook to fetch it

[kpalmvik]

Thank you for the answer, @sergiodxa!

Relevant documentation for reference:

• Resource routes
• useFetcher