SolidJS•3w ago

How to make full static generation

Hello, I'm trying to build a blog site using a JamStack like architecture. I want to deploy it to Cloudflare Pages as a completely static site, including the API responses. I wrote app.config.ts as follows and used the fetch method to get data from the API. However, when I build and run the site, API requests using the values from process.env are made during the page load. I want to save the API responses at build time, similar to the full static generation in Nuxt.js or Next.js, so that no API requests are needed after deployment. How can I achieve this?

// app.config.ts
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    prerender: {
      crawlLinks: true,
    },
    preset: "cloudflare-pages-static",
    static: true,
  },
  ssr: true,
});

// app.config.ts
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    prerender: {
      crawlLinks: true,
    },
    preset: "cloudflare-pages-static",
    static: true,
  },
  ssr: true,
});

// src/routes/posts/[...id].tsx
  const fetchPost = async (id: string) => {
    const res = await fetch(`https://${process.env.SERVICE_DOMAIN}.microcms.io/api/v1/blog/${id}`, {
      headers: {
        'X-MICROCMS-API-KEY': process.env.API_KEY || '',
      },
    });

    const resJson = await res.json();
    if (!res.ok) {
      throw new Error(resJson.message);
    }

    return resJson;
  }

// src/routes/posts/[...id].tsx
  const fetchPost = async (id: string) => {
    const res = await fetch(`https://${process.env.SERVICE_DOMAIN}.microcms.io/api/v1/blog/${id}`, {
      headers: {
        'X-MICROCMS-API-KEY': process.env.API_KEY || '',
      },
    });

    const resJson = await res.json();
    if (!res.ok) {
      throw new Error(resJson.message);
    }

    return resJson;
  }

6 Replies

slainless•3w ago

How do you call the fetcher function? Try wrap the function call in createAsync or use solid router's load function Haven't tried SSG yet but i think the intended approach here is to use solidjs provided method But if you are asking how to predefined "id", then idk

seigo2016•3w ago

I forgot to mention the function call and the params. I am calling the fetch function as shown in the code below.
I use FileRoutes and get id from path params. By crawlLinks: true,option in app.config.ts, those pages seems prerendered properly. But I access these page the first time, I get the aforementioned error

  // src/routes/posts/[...id].tsx
  const params = useParams();
  const [ post ] = createResource(params.id, fetchPost);

  // src/routes/posts/[...id].tsx
  const params = useParams();
  const [ post ] = createResource(params.id, fetchPost);

//build log
[vinxi 1:58:05 PM] ℹ Prerendering 1 initial routes with crawler
[vinxi 1:58:05 PM]   ├─ / (303ms)
[vinxi 1:58:05 PM]   ├─ /posts (397ms)
[vinxi 1:58:06 PM]   ├─ /tags (262ms)
[vinxi 1:58:06 PM]   ├─ /posts/u-h63m00yhm9 (310ms)
[vinxi 1:58:06 PM]   ├─ /posts/140rkamvv (183ms)
[vinxi 1:58:07 PM]   ├─ /posts/xuaba1_3f1 (536ms)
...

//build log
[vinxi 1:58:05 PM] ℹ Prerendering 1 initial routes with crawler
[vinxi 1:58:05 PM]   ├─ / (303ms)
[vinxi 1:58:05 PM]   ├─ /posts (397ms)
[vinxi 1:58:06 PM]   ├─ /tags (262ms)
[vinxi 1:58:06 PM]   ├─ /posts/u-h63m00yhm9 (310ms)
[vinxi 1:58:06 PM]   ├─ /posts/140rkamvv (183ms)
[vinxi 1:58:07 PM]   ├─ /posts/xuaba1_3f1 (536ms)
...

slainless•3w ago

is the post fully rendered/hydrated on the generated files? if yes, then i think the last thing you need is to use isServer to prevent the fetch from running in the client idk the implication though, will solid runtime purge the initially rendered html because post resource will be empty on client... trial and error haha try this https://docs.solidjs.com/reference/rendering/is-server

seigo2016•3w ago

The generated HTML file contains the complete content of the CMS... However the client will still try to perform a fetch. (I found that reloading the page shows the content ....) Thank you so much! I will try it !

slainless•3w ago

if its not working as expected, then try to use route load function instead https://docs.solidjs.com/solid-router/reference/load-functions/load Logically speaking, load function should be the closest thing you want since it will make page rendering idempotent and simple, just like in nextjs, remix, or gatsby. But again, i haven't tried SSG yet, so yeah correction: load function is not available when using filerouter 😦

Madaxen86•3w ago

Of course they are: https://docs.solidjs.com/solid-start/building-your-application/data-loading In route.tsx:

export const route = {
  load: () => getData(),
};

export const route = {
  load: () => getData(),
};

Gaming

Programming

How to make full static generation