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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.magictranslate.io/magic-translate/clients/react-ssr.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.