Questions on the `preload` functionality
I am reading the docs on the
preload functionality and the related query function.
The doc says there are some caveats to be aware of when using preload, specifically
1. TheI have a few question questions about these text: 1. Thepreloadfunction is called once per route, which is the first time the user comes to that route. Following that, the fine-grained resources that remain alive synchronize with state/url changes to refetch data when needed. If the data needs a refresh, the refetch function returned in the createResource can be used. 2. Before the route is rendered, thepreloadfunction is called. It does not share the same context as the route. The context tree that is exposed to thepreloadfunction is anything above thePagecomponent. 3. On both the server and the client, thepreloadfunction is called. The resources can avoid refetching if they serialized their data in the server render. The server-side render will only wait for the resources to fetch and serialize if the resource signals are accessed under a Suspense boundary.
preload function is called once per route, but then paragraph (3) says "on both the server and the client, the preload function is called" --> So that's actually twice ? Also why both the server and the client? Aren't server enough for rendering the page content?
2. I don't really understand "The resources can avoid refetching if they serialized their data in the server render" --> What/why/how is this refetching behavior? Why does serializing the data in the server render prevent this refetching? How do I "serialize data in the server render"5 Replies
1) I think it's saying that
preload is called once per route, whether that's on the server or client. On first load it'll be called on the server, then on subsequent navigations it'll be called on the client.
2) If you return data from createResource or createAsync it will be serialized, and it won't be fetched again during hydrationThanks for the explanation. If I understand correctly, that would actually mean "The
preload function is called once per route access"
Meaning if I visit route A --> preload A gets runs --> Navigate away --> Go back/Hover on to route A --> preload A gets run again
As opposed to preload A only gets run absolutely ONCE throughout the whole usage of the app
Not sure if my interpretation is correctActually the
preload is run when you just hover (or click on mobile) over a link to the route.Thanks. I do know about that part. I was only confused about "The preload function is called once per route, which is the first time the user comes to that route" --> If the user navigates away then go back to that route, will
preload be called again ?afaik, yes. I think the "once per route" clarifies that during hover->click->navigate
preload will only be called once.