SolidJS•14mo ago

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•14mo 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

eudrinoOP•14mo 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•14mo 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

eudrinoOP•14mo 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•14mo ago

Here is also a similar solution to that problem: https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createrootpool

GitHub

solid-primitives/packages/rootless at main · solidjs-community/soli...

A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives

Gaming

Programming

Cache dom elements with router