Repository navigation
[Feature?]: Add an option to disable lazy loading in <FileRoutes /> #1575
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
currently, FileRoutes lazy-loades all routes by default which is sometimes undesired.
Adding a sync option (that is false by default) or a async option to enable lazy loading (that is false by default) to FileRoutes to disable lazy loading all routes will fix that.
even better, this could be decided for each route separately.
Examples 🌈
a workaround is using custom <Route />s instead of using <FileRoutes />:
import { MetaProvider, Title } from "@solidjs/meta";
import { Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";
import Home from "./routes";
import About from "./routes/about";
import { get } from "./lib/api";
import NotFound from "./routes/[...404]";
export default function App() {
return (
<Router
root={(props) => (
<MetaProvider>
<Title>SolidStart - Basic</Title>
<a href="/">Index</a>
<a href="/about">About</a>
<Suspense>{props.children}</Suspense>
</MetaProvider>
)}
>
<Route path="/" component={Home} />
<Route load={() => get()} path="/about" component={About} />
<Route path="*404" component={NotFound} />
</Router>
);
}Motivation 🔦
No response
Reacted by Pavel Ivanov and maxwell8888
Activity
[-][Feature?]: Add a `sync` option to `FileRoutes` or a `async` option that is `false` by default to disable lazy loading all routes[/-][+][Feature?]: Add an option to disable lazy loading in `<FileRoutes />`[/+]ryansolid commentedon Jul 3, 2024
I do have some concerns about giving control here when it comes to future routing approaches including lazy route manifest shipping. It might be valuable to see what this feature looks like in other frameworks. I'm curious how Next, Sveltekit, Remix, Nuxt, etc handle this.
doeixd commentedon Jul 3, 2024
Would this work?
lxsmnsyc commentedon Oct 14, 2026
Closing this as not planned. A flag that turns off code splitting for
<FileRoutes />would change how routes are generated, which is what Ryan was concerned would conflict with future lazy route manifests. The underlying need, a route's code being ready before you navigate to it, is already covered on both 1.x and 2.x:Links already preload: Solid Router loads a route's code when a link to it is hovered, focused or touched.
Programmatic navigation:
usePreloadRoute()from@solidjs/routerpreloads a route's code (and data) ahead of anavigate()call.All routes up front, while keeping them as separate chunks: on the client,
FileRoutes()returns the route objects, and each route's lazy component has apreload():I checked this on a production build of the
basicfixture on both 1.x and 2.x. Without it, visiting/loads only the index route's chunk. With it, the other route chunks load right after the page does.Truly eager routes, bundled with the entry: define the routes with
<Route>and static imports, as in the workaround in the report.