S
SolidJS•6d ago
maxwell8888

Prerendering and query params

In the below example, the list will not be sorted as expected when initially visiting /?sort=true, only if I navigate to another page first so that CSR has taken over. It works fine with the dev server so I believe this is an issue with SSG/pre-rendering. My content is completely static so I ideally would like to avoid SSR, is there any way to get this working with SSG/pre-rending or is it just a fundamental limitation? I am using Solid Start with the following config. 
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {},
  server: {
    prerender: {
      crawlLinks: true,
      routes: ["/"],
    },
  },
});
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {},
  server: {
    prerender: {
      crawlLinks: true,
      routes: ["/"],
    },
  },
});
import { For } from "solid-js";
import { useSearchParams } from "@solidjs/router";

export default function CategoryList() {
  const [searchParams, setSearchParams] = useSearchParams();

  const list = ["c", "b", "a",];
  const elements = () => {
    const listCopy = [...list];
    if (searchParams.sort === "true") listCopy.sort();
    return listCopy;
  };

  return <For each={elements()}>{(item, index) => <div data-index={index()}>{item}</div>}</For>;
};
import { For } from "solid-js";
import { useSearchParams } from "@solidjs/router";

export default function CategoryList() {
  const [searchParams, setSearchParams] = useSearchParams();

  const list = ["c", "b", "a",];
  const elements = () => {
    const listCopy = [...list];
    if (searchParams.sort === "true") listCopy.sort();
    return listCopy;
  };

  return <For each={elements()}>{(item, index) => <div data-index={index()}>{item}</div>}</For>;
};
2 Replies
Madaxen86
Madaxen86•5d ago
During SSR the server will just serve the pre-rendered html file. You could prerender routes:"/?sort=true" Or try to set the searchparams again in onMount
maxwell8888
maxwell8888OP•5d ago
Thanks! In my actual app I am actually using the current time to determine the sort order so pre-rendering "/?sort=true" wouldn't work for SSG. I will have a look into using onMount.

Did you find this page helpful?