> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# SSR Compatibility

> Set up the CometChat JavaScript SDK with Next.js, NuxtJS, Ionic, and other server-side rendering frameworks.

The CometChat SDK requires browser APIs (`window`, `WebSocket`) and cannot run on the server. For SSR frameworks, initialize the SDK only on the client side.

## Next.js

Import the SDK dynamically in `useEffect` (functional components) or `componentDidMount` (class components).

<Tabs>
  <Tab title="Functional Component">
    ```javascript theme={null}
    import React from "react";
    import Chat from "./Chat";

    export default function Home() {
      let [libraryImported, setLibraryImported] = React.useState(false);

      React.useEffect(() => {
        window.CometChat = require("@cometchat/chat-sdk-javascript").CometChat;
        setLibraryImported(true);
      }, []);

      return libraryImported ? <Chat /> : <p>Loading....</p>;
    }
    ```
  </Tab>

  <Tab title="Class Component">
    ```javascript theme={null}
    import React from 'react';
    import Chat from './Chat';

    export default class Home extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          libraryImported: false
        };
      }

      componentDidMount() {
        window.CometChat = require("@cometchat/chat-sdk-javascript").CometChat;
        this.setState({ libraryImported: true });
      }

      render() {
        return this.state.libraryImported ? <Chat /> : <p>Loading....</p>;
      }
    }
    ```
  </Tab>

  <Tab title="Chat.js">
    ```javascript theme={null}
    import React, { Component } from "react";
    import { COMETCHAT_CONSTANTS } from "./CONSTS";

    export default class Chat extends Component {
      constructor(props) {
        super(props);
        this.state = {
          user: undefined,
        };
      }

      componentDidMount() {
        this.init();
      }

      init() {
        CometChat.init(
          COMETCHAT_CONSTANTS.APP_ID,
          new CometChat.AppSettingsBuilder()
            .setRegion(COMETCHAT_CONSTANTS.REGION)
            .subscribePresenceForAllUsers()
            .build()
        ).then(
          () => {
            this.login();
          },
          (error) => {
            console.log("Init failed with exception:", error);
          }
        );
      }

      login() {
        let UID = "UID";
        CometChat.login(UID, COMETCHAT_CONSTANTS.AUTH_KEY).then(
          (user) => {
            this.setState({ user });
          },
          (error) => {
            console.log("Login failed with exception:", error);
          }
        );
      }

      render() {
        return this.state.user ? (
          <div>User logged in</div>
        ) : (
          <div>User not logged in</div>
        );
      }
    }
    ```
  </Tab>

  <Tab title="CONSTS.js">
    ```javascript theme={null}
    export const COMETCHAT_CONSTANTS = {
      APP_ID: "APP_ID",
      REGION: "REGION",
      AUTH_KEY: "AUTH_KEY",
    };
    ```
  </Tab>
</Tabs>

## NuxtJS

Import the SDK dynamically in the `mounted` lifecycle hook.

<Tabs>
  <Tab title="index.vue">
    ```javascript theme={null}
    <template>
      <div v-if="libraryImported">
        <chat/>
      </div>
      <div v-else>Loading....</div>
    </template>

    <script>
    export default {
      name: "Index",
      components: {
        'chat': () => import('./chat')
      },
      data() {
        return {
          libraryImported: false
        }
      },
      mounted() {
        window.CometChat = require('@cometchat/chat-sdk-javascript').CometChat;
        this.libraryImported = true;
      }
    }
    </script>
    ```
  </Tab>

  <Tab title="chat.vue">
    ```javascript theme={null}
    <template>
      <div v-if="user">User logged in</div>
      <div v-else>User not logged in</div>
    </template>

    <script>
    import CONSTS from './CONSTS';

    export default {
      name: "chat",
      data() {
        return {
          user: null
        }
      },
      mounted() {
        CometChat.init(
          CONSTS.APP_ID,
          new CometChat.AppSettingsBuilder()
            .setRegion(CONSTS.REGION)
            .subscribePresenceForAllUsers()
            .build()
        ).then(
          () => {
            let UID = "UID";
            CometChat.login(UID, CONSTS.AUTH_KEY).then(
              user => {
                this.user = user;
              },
              error => {
                console.log("Login failed with exception:", error);
              }
            );
          },
          error => {
            console.log("error in init", error);
          }
        );
      }
    }
    </script>
    ```
  </Tab>

  <Tab title="CONSTS.js">
    ```javascript theme={null}
    module.exports = {
      APP_ID: "APP_ID",
      REGION: "REGION",
      AUTH_KEY: "AUTH_KEY",
    };
    ```
  </Tab>
</Tabs>

## Ionic/Cordova

For Ionic and Cordova applications, use the JavaScript SDK directly. Import and initialize in your root component:

```typescript theme={null}
import { Component, OnInit } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  
  ngOnInit() {
    this.initCometChat();
  }

  initCometChat() {
    const appID = 'APP_ID';
    const region = 'APP_REGION';
    
    const appSetting = new CometChat.AppSettingsBuilder()
      .subscribePresenceForAllUsers()
      .setRegion(region)
      .autoEstablishSocketConnection(true)
      .build();

    CometChat.init(appID, appSetting).then(
      () => {
        console.log('CometChat initialized successfully');
      },
      (error) => {
        console.log('CometChat initialization failed:', error);
      }
    );
  }
}
```

<Note>
  The dedicated Ionic Cordova SDK has been deprecated. For new Ionic/Cordova applications, use the JavaScript SDK as shown above. Existing users can refer to the [legacy documentation](/sdk/ionic-legacy/overview).
</Note>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Authentication" icon="lock" href="/sdk/javascript/authentication-overview">
    Log in users with Auth Key or Auth Token
  </Card>

  <Card title="Send Messages" icon="paper-plane" href="/sdk/javascript/send-message">
    Send your first message
  </Card>
</CardGroup>