SolidJS•2mo ago

Can I Preload Data in Non-Route Components?

In SolidStart, I can use preload to fetch data when a route is loaded, ensuring that the data is ready by the time the route component is rendered. This is particularly useful for scenarios such as route guards and data display. However, if there are other components within the pages corresponding to these routes that also need data, can preload be used for them as well? For example, every page includes a Nav component, as shown in the following code:

// app.tsx
    <Router
      root={(props) => (
        <>
            <Nav />
            <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>

// app.tsx
    <Router
      root={(props) => (
        <>
            <Nav />
            <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>

The Nav component is not inside the routes folder, and using preload does not expose it correctly to the Router. Therefore, when the Nav component needs to render information based on data (e.g., displaying the username if the user is logged in or a login button if not), the component experiences a sudden change due to asynchronous loading. Is there a way to preload data for components that are not inside the routes folder? For example, if we could preload data for components like Nav or Sidebar, it would prevent sudden changes in their content. thanks

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Can I Preload Data in Non-Route Components?