---
title: ssg
---

# output.ssg

- **Type:** `boolean | object`
- **Default Value:** `undefined`

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

:::tip Enabling SSG
This configuration takes effect only when SSG is enabled. Please read the [Static Site Generation](/guides/basic-features/render/ssg) documentation to understand how to enable SSG and its use cases.
:::

:::info Recommended Reading
The SSG feature is closely related to routing. It is recommended to understand the [routing solution](/guides/basic-features/routes) before using SSG.
:::

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

```js
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`:

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

You can specify different SSG configurations for `entryA` and `entryB`:

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

:::info
For more information on the default behavior of **conventional routing** and **manual routing** after enabling SSG, please read [Static Site Generation](/guides/basic-features/render/ssg).
:::

## Object Type

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

### Configuration Type

```ts
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`.

```ts title="modern.config.ts"
export default defineConfig({
  output: {
    ssg: {
      routes: [
        '/',
        '/about',
        {
          url: '/user/:id',
          headers: {
            cookies: 'name=modernjs',
          },
          params: [
            {
              id: 'modernjs',
            },
          ],
        },
      ],
    },
  },
});
```

:::note
The configuration method for multiple entries is the same as for a single entry, so it will not be explained further here.
:::
