[✨] Allow data to be passed in `StaticGenerateHandler`
Opened this issue · 0 comments
Is your feature request related to a problem?
I'm trying to load non-serializable data, typically JSX, with the statically generated routes. However, when building imports dynamically, the frameworks force serialization, or I must skip that and cannot render with SSR.
Describe the solution you'd like
I would like it if there would be a way to pass a Content JSX function for each statically generated route on build time so that when it gets rendered, there would be a <Content />
component to be used and inlined without trying to serialize into JSON.
So ideally, something like:
export const onStaticGenerate: StaticGenerateHandler = async () => {
const slugs = ["foo", "bar", "qux"];
const contents = {}
for await (const slug of slugs) {
contents[slug] = await readMarkdown({ file: `../../content/${slug}.md` });
// ^ yields a { frontmatter: Record<string, unknown>, Content: () => JSXNode }
}
return {
params: slugs.map((slug) => ({ slug })),
data: contents,
};
};
export default component$(() => {
const { params, data } = useLocation();
const { Content } = data
return (
<>
<h1>/{loc.params.slug}</h1>
<Content />
</>
);
});
Describe alternatives you've considered
The dynamic import works with noSerialize
, but when navigating around in development mode, the contents disappear. I considered forcing the compiler somehow, not automatically, to serialize a JSX function, but I found no suitable solution.
As an alternative, I also considered just generating index files with all the contents already imported statically, but before I commit to that solution, I wanted to raise a request here.
Additional context
I have a repository where I am trying to implement this; it can be opened in stackblitz at: https://stackblitz.com/github/adaliszk/web-sandbox/tree/develop/apps/qwik-website