SolidJSS
SolidJS•2y ago•
14 replies
jdgamble555

Preloading Data with 'use server'

I'm following the limited documentation, and I want to preload data from the server for a route:
import { Title } from "@solidjs/meta";
import { RouteDefinition, cache, createAsync } from "@solidjs/router";
import { getAbout } from "~/lib/about";

const getAboutPage = cache(async () => {
  'use server';
  return await getAbout();
}, 'about');

export const route = {
  load: () => getAboutPage(),
} satisfies RouteDefinition;

export default function About() {

  const about = createAsync(() => getAboutPage());

  return about() && (
    <>
      <Title>About</Title>
      <div class="flex items-center justify-center my-5">
        <div class="border w-[400px] p-5 flex flex-col gap-3">
          <h1 class="text-3xl font-semibold">{about()!.name}</h1>
          <p>{about()!.description}</p>
        </div>
      </div>
    </>
  );
};

I am preloading some data from a database. I'm not sure why the createAsync has an option for undefined, but I do about() as the docs suggest. However, the data does not display properly UNLESS I do full referesh. It does not stay when navigating back to the page. I only want to fetch it once, I just don't every want a blank page.

You can see the example (without logging in) :
https://solid-start-firebase.vercel.app/

How do I fix this?

J
Was this page helpful?