output.ssg#

• Type: boolean | object
• Default Value: undefined

Configuration to enable the application’s SSG (Static Site Generation) feature.

Boolean Type#

When this configuration is set to true, the SSG feature will be enabled for all entries by default. For manual routing, the root route of the entry will be rendered. For conventional routing, each route in the entry will be rendered.

export default defineConfig({
  output: {
    ssg: true,
  },
});

output.ssg can also be configured per entry, with the rules for effective configurations determined by the entry's routing method.

For example, given the following directory structure, there are conventional routing entry entryA and manual routing entry entryB:

.
└── src
    ├── entryA
    │   └── routes
    └── entryB
        └── App.tsx

You can specify different SSG configurations for entryA and entryB:

export default defineConfig({
  output: {
    ssg: {
      entryA: true,
      entryB: false,
    },
  },
});

Object Type#

When the value type is Object, the following attributes can be configured.

Configuration Type#

type SSGRouteOptions =
  | string
  | {
      url: string;
      params?: Record<string, any>[];
      headers?: Record<string, any>;
    };

type SSGOptions = {
  preventDefault?: string[];
  headers?: Record<string, any>;
  routes?: SSGRouteOptions[];
};

Example#

In the example configuration below, SSG will render the pages corresponding to the /, /about, and /user/:id routes.

For the /user/:id route, cookies will be added to the request headers, and the id in params will be replaced with modernjs.

export default defineConfig({
  output: {
    ssg: {
      routes: [
        '/',
        '/about',
        {
          url: '/user/:id',
          headers: {
            cookies: 'name=modernjs',
          },
          params: [
            {
              id: 'modernjs',
            },
          ],
        },
      ],
    },
  },
});