[Feature?]: Add an option to disable lazy loading in `<FileRoutes />`

[huseeiin]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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

[ryansolid]

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]

Would this work?

async function createEagerFileRoutes() {
  const routes = <FileRoutes />;
  const eagerRoutes = []

  for (let route of (routes || [])) {
    if (route.info?.eager) {
      const component = await route['$component'].import();
      eagerRoutes.push(<Route path={route.path} component={component} load={route.load} />)
    } else {
      eagerRoutes.push(route)
    }
  }

  return (props) => eagerRoutes
}

const EagerFileRoutes = await createEagerFileRoutes();

[huseeiin]

Would this work?

async function createEagerFileRoutes() {
  const routes = <FileRoutes />;
  const eagerRoutes = []

  for (let route of (routes || [])) {
    if (route.info?.eager) {
      const component = await route['$component'].import();
      eagerRoutes.push(<Route path={route.path} component={component} load={route.load} />)
    } else {
      eagerRoutes.push(route)
    }
  }

  return (props) => eagerRoutes
}

const EagerFileRoutes = await createEagerFileRoutes();

i forgot the word "eager" here. important keyword.