Advanced Concepts

Lazy loading

Edit this page

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.

Report an issue with this page