> For the complete documentation index, see [llms.txt](https://docs.magictranslate.io/magic-translate/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.magictranslate.io/magic-translate/clients/react-ssr.md).

# React SSR

### Getting Started

Install the react SSR client for *Magic Translate* in your application.

```bash
# using yarn
yarn add @magic-translate/react-ssr

# using npm
npm i @magic-translate/react-ssr

# using pnpm
pnpm install @magic-translate/react-ssr
```

Now it's time to configure your Magic Translate SSR client and the `<T>` component

```typescript
// somewhere in your code, eg. ./lib/translate.ts

import { createT, setupTranslate } from "@magic-translate/react-ssr";

const magicTranslateConfig = {
  apiKey: "<your-api-key>",
}

export const translate = setupTranslate(magicTranslateConfig);

export const T = createT(translate);

```

If you don't have an API key yet, please visit [magictranslate.io](https://magictranslate.io) to get one.

Now you can use the translate component `<T>` in any React server component.&#x20;

```tsx
import { Language } from "@magic-translate/react-ssr";
import {
  T
} from './lib/translate' // ... or where ever you located the file above 

const SomeServerComponent = async () => (
  <T lang={Language.ZH}>Please translate me!</T>
)
```

And that's basically it! You can now translate your application effortlessly into over 70 languages 🤯

{% hint style="info" %}
Please note that the \<T> component from React SSR only works within React server components. If you want to use Magic Translate in client components, please refer to the [React client](/magic-translate/clients/react.md) docs.
{% endhint %}

### Changing Languages

To change the current language all you have to do is change the `lang` prop of the `<T>` component.

For more options of the \<T> component please refer to the [`<T>` component docs](/magic-translate/clients/react/the-less-than-t-greater-than-component.md). The API of the `<T>` server component is identical to the API of the client `<T>` component.

### Example project

You can find an example SSR project here: <https://github.com/magic-translate/magic-translate-example-react-ssr>