[Resolved][Fresh] How to load data asynchronously after rendering a page ?
Hi ! I was wondering if someone could help me understand the paradigm to load data asynchronously after a page is rendered. My use case is that I load data from the backend, reading some folders and retrieving git information. It takes a few seconds so I don't want to wait for the whole information before rendering the rest of the page. My code runs well if I do that synchronously but I don't understand how to do it after the page render. Should I use a component ? An island ?
I don't understand well which code is executed on the server and when so it's not easy to troubleshoot, and I couldn't really find any examples that do something similar.
I did a post here with more details but maybe it wasn't the right place for it : https://discord.com/channels/684898665143206084/991511118524715139/1072518216728977489
Any help would be appreciated, cheers !
2 Replies
For this specific case, you should be using an island. Remember that javascript in an island runs on the client-side so make sure that your backend is compatible with that.
Thanks for your answer ! I finally understood that indeed. So I created a route that retrieves the list of repositories and returns it as a json object, and I called it with an async fetch inside the useEffect code of my island and now everything runs well 🙂 I had trouble understanding what code runs client-side or server-side, now it makes more sense 🙂
I need to experiment a bit more to understand these concepts well and make a good code architecture but I feel like going in the right direction now.
Cheers !