SSG with dynamic route parameters

[ViktorZhurbin]

From the docs it's not quite clear if I can use SSG with dynamic route parameters that need to be fetched from a DB at build time. Is it possible?

Example shows values hard-coded in the config. But what if I need to fetch a list of blog post ids from CMS?

Something to replicate generateStaticParams from Next.js

[zllkjc]

Modern.js not support the API like generateStaticParams. And we will consider the topic in next quarter.

Now we can use dynamic ssg route like:

export default defineConfig(async (env) => {
  const data = fetchCMSData();
  const ssgRoutes = genSSGRoutes(data);

  return {
    output: {
      ssg: {
        routes: ssgRoutes,
      },
    },
    plugins: [appTools({ bundler: 'rspack' })],
  };
});

modern.config.ts can run async function, so we can fetch data in this file. And we can use data to generate ssg routes:

[
  {
    url: '/user/:id',
    params: [
      {
        id: 'modernjs',
      },
      {
        id: 'bytedance',
      },
    ],
  },
],

This configuration will generate two ssg routes, which handle /user/modern.js and /user/bytedance.

[ViktorZhurbin]

This will do the trick. If it works as I expect it to, I don't see the need for any special API then. I'm totally new here, so I didn't know existing apis well

Thank you so much!

[ViktorZhurbin]

So I made it work as suggested, thanks!

One quirk that I have is that using path aliases wouldn't work in modern.config.ts. I had to use relative imports for fetchCMSData and genSSGRoutes, but what's more cumbersome - I had to use relative paths inside these helpers too (including all the files that they import). Is there some config option to make it work with path aliases, maybe, or I have to live with it?

I currently have aliases defined in tsconfig