Lazy loading

Lazy loading allows you to load only the necessary resources when they are needed. This can be useful when you have a large application with a lot of routes and components, and you want to reduce the initial load time.

In Solid Router, you can lazy load components using the lazy function from Solid:

import { lazy } from "solid-js";
import { Router, Route } from "@solidjs/router";

const Home = () => import("./Home");
const Users = lazy(() => import("./Users"));

const App = () => (
  <Router>
    <Route path="/" element={<Home />} />
    <Route path="/users" element={<Users />} />
  </Router>
);

In the example above, the Home component is lazy loaded using the lazy function. The lazy function takes a function that returns a promise, which resolves to the component you want to load. When the route is matched, the component will be loaded and rendered.