SolidJS•2w ago

SSR doesn't auto fetching data when CSR

Hi, Currently, I've create some routes for SSR purpose and they work perfectly. However, If I go to the page SSR then navigating through some page and back to the SSR page the data SSR before is loss.

const productsLoad = query(async () => {
  return await productService.getLatestProductList([]);
}, "products");

export const route = {
  preload: () => productsLoad(),
} satisfies RouteDefinition;

export default function HomePage() {
  const products = createAsync(() => productsLoad());
  console.log(products());

///other code

const productsLoad = query(async () => {
  return await productService.getLatestProductList([]);
}, "products");

export const route = {
  preload: () => productsLoad(),
} satisfies RouteDefinition;

export default function HomePage() {
  const products = createAsync(() => productsLoad());
  console.log(products());

///other code

Do I need do other step to ensure keep the data for the page? Or need something to switch from SSR to CSR during navigating?

8 Replies

Brendonovich•2w ago

query doesn't hold on to data for long, it's only designed to dedupe requests for situations like preloading data on a link hover, then navigating after clicking the link. If you want the data to be cached, use something like Tanstack Query.

quangnguyen1311OP•7d ago

Not sure why but if I wraper template jsx(included render data from API call) inside a <Show when={data()}></Show> it will keep the data there even navigate to other page and back CSR

Brendonovich•7d ago

If you use data() inside jsx, then the navigation is probably waiting until the data loads for the second time, since navigations happen in a Transition The log will be undefined since the query isn't holding onto the previous data, but you won't actually see the navigation happen until the data loads bc of the Transition

quangnguyen1311OP•7d ago

Yep, exactly what happened there I wonder about why it can work if wraped by <Show> element?

Brendonovich•7d ago

Are you using data() anywhere else in the jsx? If so then it should work without <Show>

quangnguyen1311OP•7d ago

I've used data() inside another component for eg: <div><Product info={data()?.info}></Product></div>. And I got the issue after using Show like <Show when={data()}><div><Product info={data().info}></Product></div></Show> I don't see the issue anymore. I'm using Show because seeing a tuturial about solid start in youtube called learn with jacobs but they don't explain why I need it

Brendonovich•7d ago

The <Show> should only be needed so that you don't end up doing info={undefined} and getting errors I wouldn't expect it to have an effect on the loading behaviour (unless it's the only place you call data())

quangnguyen1311OP•7d ago

Yep, It should be like that. Let me create a repoduce repo for this case when have time.

Gaming

Programming

SSR doesn't auto fetching data when CSR

Did you find this page helpful?