S
SolidJS9mo ago
Eudrino

Cache dom elements with router

I'm trying to cache dom elements between route changes with @solidjs/router where instead of recreating dom elements between route changes, instead i use pre-created ones i tried using
const home = <Home />;
<Route path="/" component={() => home} />
const home = <Home />;
<Route path="/" component={() => home} />
instead of
<Route path="/" component={Home} />
<Route path="/" component={Home} />
but it prevents me from using the <A> tag to link between pages client-side is there a better way to introduce caching of dom elements?
5 Replies
andi
andi9mo ago
not sure about caching elements while still using the router like this, but why do you want to cache them? i think you might need to implement your own router for something like this
Eudrino
Eudrino9mo ago
Well, i'm trying to optimize the element swap computation, currently it requires cloning the template for a huge component, which takes considerably longer on slower devices compared to just creating those nodes before hand and then calling node.replaceWith
andi
andi9mo ago
i think there's other strategies you might want to explore before going down the route of caching the element like only rendering the part of the component that is in view at first via virtualisation but maybe someone else with more experience with the router can chime in later
Eudrino
Eudrino9mo ago
well, there might be other optimizations that could be done first ultimately i want to leave those nodes around and re-use them it might harm the memory usage of my app, but it'll be way smoother to change between views each view consists of up to 5k nodes (i might work on lowering these, but it won't be much lower) moving the creation of node to App seems to fix the routing issue, thanks!
const channels = [
{
name: "support",
type: "text",
},
{
name: "general",
type: "text",
},
{
name: "community",
type: "text",
},
{
name: "showcase",
type: "text",
},
{
name: "off-topic",
type: "text",
},
];

const App = () => {
const channelElements = channels.map((channel, i) => ({
node: (
<div>
<span>{channel.type}</span>
<span>{channel.name}</span>
<A href={channels[i + 1]?.name ?? ""}>{channels[i + 1]?.name}</A>
</div>
),
name: channel.name,
}));
return (
<Routes>
<Route
path="/:channel"
component={() => {
const params = useParams();
return (
<div>
{channelElements.find((c) => c.name == params.channel)!.node}
</div>
);
}}
/>
</Routes>
);
};
render(
() => (
<Router>
<App />
</Router>
),
root!
);
const channels = [
{
name: "support",
type: "text",
},
{
name: "general",
type: "text",
},
{
name: "community",
type: "text",
},
{
name: "showcase",
type: "text",
},
{
name: "off-topic",
type: "text",
},
];

const App = () => {
const channelElements = channels.map((channel, i) => ({
node: (
<div>
<span>{channel.type}</span>
<span>{channel.name}</span>
<A href={channels[i + 1]?.name ?? ""}>{channels[i + 1]?.name}</A>
</div>
),
name: channel.name,
}));
return (
<Routes>
<Route
path="/:channel"
component={() => {
const params = useParams();
return (
<div>
{channelElements.find((c) => c.name == params.channel)!.node}
</div>
);
}}
/>
</Routes>
);
};
render(
() => (
<Router>
<App />
</Router>
),
root!
);
thetarnav
thetarnav9mo ago
GitHub
solid-primitives/packages/rootless at main · solidjs-community/soli...
A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives
Want results from more Discord servers?
Add your server
More Posts
Use of `<Outlet />` vs `props.children` leads to duplicated code?```typescript const EnsureAuthenticated: VoidComponent = () => { return ( <Switch> <MatcAdded the official solid-router, followed the docs, now nothing loadsI'm very new to Solid but I had a working SPA (I'm using vite and plain JS) until I added the officiWhere does <ErrorBoundary/> catch errors?The docs example shows an error being caught at component creation which makes sense, but what aboutWarning when modal uses stateI have created a context provider `ModalProvider` that is meant to display a modal whenever it's `viIs there a way to render a solid component to html string from the browser?I want to send raw html string to another service where it gets printed as a pdf. The renderToStringCRUD App - Suggestion for Utility FunctionalityHey there! I'm developing an app which contains mostly CRUD functionality using typescript + solid. cant set signal exported from a contextI've recreated a simple example based on my code: https://stackblitz.com/edit/solidjs-templates-dhbcError: Hydration MismatchHello, I have an error with one of my plugin. I have always an issue with Hydration MisMatch. Can soPrevent a route component from running before the old routes `onCleanup` runsWhen I move from one page to another with the router, the flow seems to be: on `PageA` -> trigger mError: Hydration Mismatch with component from node_modulesHello, I have an issue with Solid-Start Hydration process. Everything is described on the github is