# Static-site generation integration with Flagship \[SSG]

#### How it works

In Static-site generation, content is rendered at build time during which we will fetch all flags targeting a unique flagship visitor and pass them (flags) through a props to the `__app.js` component to feed the `FlagshipProvider` component.

{% hint style="warning" %}
🚧 Notes

* All your visitors will see the same flags because at build time we can only target one visitor.
* If you update your campaigns from [Flagship dashboard](https://docs.abtasty.com/server-side/concepts/jamstack/static-site-generation), you will also need to rebuild your app to update your static content. [Check](#how-to-automate-rebuilding)
* Once your app is loaded on a browser, you can use Flagship SDK the same way as in client side rendering mode
  {% endhint %}

#### Implementation

Please refer to this article [link](https://nextjs.org/docs) to setup a NextJS project.

Once your project is set up, you need to install and initialize the Flagship React SDK.

```shell
yarn add @flagship.io/react-sdk
```

We will customize the next component [App](https://nextjs.org/docs/advanced-features/custom-app) to initialize the Flagship SDK.

```jsx
// pages/_app.jsx

import { FlagshipProvider } from '@flagship.io/react-sdk'
import '../styles/globals.css'


function MyApp({ Component, pageProps }) {
  const { initialVisitorData, flagsData } = pageProps
  return (
    <FlagshipProvider
      envId={process.env.NEXT_PUBLIC_ENV_ID}
      apiKey={process.env.NEXT_PUBLIC_API_KEY}
      visitorData={initialVisitorData || {}}
      initialFlagsData={flagsData}
    >
      <Component {...pageProps} />
    </FlagshipProvider> )
}

export default MyApp
```

We have 2 props in `MyApp` component, `initialVisitorData` and `initialFlagsData`. the first one contains visitor data and the second contains the FlagsData fetched from `getStaticProps` at build time to feed `FlagshipProvider`.

*Here is the index page:*

```javascript
//pages/index.jsx

import {
  useFsFlag,
  useFlagship,
  Flagship,
  HitType,
  EventCategory,
} from "@flagship.io/react-sdk";
import styles from "../styles/Home.module.css";

export default function Home() {
  const fs = useFlagship();

  //get flag
  const myFlag = useFsFlag("my_flag_key");

  const onSendHitClick = () => {
    fs.sendHits({
      type: HitType.EVENT,
      category: EventCategory.ACTION_TRACKING,
      action: "click button",
    });
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1>Next Static site generation integration with Flagship [SSG]</h1>
        <p>flag key: my_flag_key</p>
        <p>flag value: {myFlag.getValue("default-value")}</p>
        <button
          style={{ width: 100, height: 50 }}
          onClick={() => {
            onSendHitClick();
          }}
        >
          Send hits
        </button>
      </main>
    </div>
  );
}

// This function runs only at build time
export async function getStaticProps() {
  //Start the Flagship SDK
  const flagship = await Flagship.start(
    process.env.NEXT_PUBLIC_ENV_ID,
    process.env.NEXT_PUBLIC_API_KEY,
    {
      fetchNow: false,
    }
  );

  const initialVisitorData = {
    id: "my_visitor_id",
    context: {
      any: "value",
    },
  };

  // Create a new visitor
  const visitor = flagship.newVisitor({
    visitorId: initialVisitorData.id,
    context: initialVisitorData.context,
    hasConsented: true,
  });

  // //Fetch flags
  await visitor.fetchFlags();

  // Pass data to the page via props
  return {
    props: {
      initialFlagsData: visitor.getFlags().toJSON(),
      initialVisitorData,
    },
  };
}

```

On the `getStaticProps` of the index component page, we :

* Fetch the flags for the targeted visitor
* Pass the fetched flags to the page via props

#### How to automate rebuilding

To automate the rebuilding of your application, you need to use Flagship’s [Webhooks Integrations](https://docs.abtasty.com/server-side/integrations/webhooks-integrations). When your campaigns are updated in Flagship, a webhook called *\[environment] synchronized* will be triggered and you can use this event to trigger a rebuild of your application to ensure that it reflects the updated flag values.

![](https://233132171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBWu23t7Qv6wLLh6Hl5b4%2Fuploads%2Fgit-blob-0e12c0e21e14c10294c07d67397cabcb2788591a%2Fhttps___files.readme.io_891a21a-SSG-deploy.drawio.avif?alt=media)

In this guide, we will deploy our app to [Netlify.com](https://github.com/flagship-io/Gitbook/blob/main/Concepts/react-1/netlify.com), but the process is similar for other platforms and can also be used with a CI/CD pipeline.

We will proceed in two steps:

**1. Once your app is deployed to** [**netlify.com**](https://github.com/flagship-io/Gitbook/blob/main/Concepts/react-1/netlify.com)**, go to Site Settings -> Build and Deploy and create a build hook.**

![](https://233132171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBWu23t7Qv6wLLh6Hl5b4%2Fuploads%2Fgit-blob-cf466503ce7eb9fc716c2cfdbd66a26c3d6c68fb%2Fhttps___files.readme.io_7f6688a-Screenshot_2023-01-23_132940.avif?alt=media)

![](https://233132171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBWu23t7Qv6wLLh6Hl5b4%2Fuploads%2Fgit-blob-5ba2f98c99433f0b8f497749a69ea1a3691efdf5%2Fhttps___files.readme.io_f2aa867-Screenshot_2023-01-23_133141.avif?alt=media)

**2. Set up the webhook on the Flagship platform**

On the Flagship platform, go to **Settings** -> **Integrations** and select the **Webhooks tab**. Choose the *\[environment] synchronized* event and enter the URL for your Netlify build hook. Then click “Create” to set up the webhook.

![](https://233132171-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBWu23t7Qv6wLLh6Hl5b4%2Fuploads%2Fgit-blob-1baadbab845c1a53dac35624d499e1948a159fd6%2Fhttps___files.readme.io_e01243a-Screenshot_2023-01-23_141036.avif?alt=media)

Any feedback?\
Want another tutorial? [Contact us](mailto:product.feedback@abtasty.com?subject=NextJS%20Tutorial)

See full code here : [github](https://github.com/flagship-io/example-next-ssg)