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;
  }

slainless•6/18/24, 5:32 AM

How do you call the fetcher function? Try wrap the function call in createAsync or use solid router's load function

slainless•6/18/24, 5:33 AM

Haven't tried SSG yet but i think the intended approach here is to use solidjs provided method

slainless•6/18/24, 5:38 AM

But if you are asking how to predefined "id", then idk

seigo2016OP•6/18/24, 5:49 AM

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 from path params.
By option in app.config.ts, those pages seems prerendered properly.
But I access these page the first time, I get the aforementioned error

slainless•6/18/24, 5:54 AM

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

slainless•6/18/24, 5:56 AM

idk the implication though, will solid runtime purge the initially rendered html because post resource will be empty on client...

slainless•6/18/24, 5:56 AM

trial and error haha

slainless•6/18/24, 5:58 AM

try this https://docs.solidjs.com/reference/rendering/is-server

seigo2016OP•6/18/24, 6:00 AM

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 ....)

Sslainless try this https://docs.solidjs.com/reference/rendering/is-server

seigo2016OP•6/18/24, 6:00 AM

Thank you so much! I will try it !

slainless•6/18/24, 6:01 AM

if its not working as expected, then try to use route load function instead https://docs.solidjs.com/solid-router/reference/load-functions/load

slainless•6/18/24, 6:07 AM

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

slainless•6/18/24, 6:11 AM

correction: load function is not available when using filerouter

Sslainless correction: load function is not available when using filerouter 😦

Madaxen86•6/19/24, 12:13 PM

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