---
title: "React server side rendering support | Grafana Cloud documentation"
description: "React server side rendering support."
---

> For a curated documentation index, see [llms.txt](/llms.txt). For the complete documentation index, see [llms-full.txt](/llms-full.txt).

# React server side rendering support

Follow this guide to learn how to initialize your Faro instrumentation to support React Server Side Rendering (SSR) for:

- React Router v6 without a data router
- React Router v6 with a data router
- React Router v5

## React Router v6 without a data router

tsx ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```tsx
import { FaroErrorBoundary, setReactRouterV6SSRDependencies } from '@grafana/faro-react';
setReactRouterV6SSRDependencies({ Routes });

export function renderToString(...) {
  return reactRenderToString(
    <FaroErrorBoundary>
      <StaticRouter location={...}>
        <App />
      </StaticRouter>
    </FaroErrorBoundary>
  ),
}
```

## React Router v6 with a data router

Wrap your data router with `withFaroRouterInstrumentation(dataRouter)` in your routes file.

// example

## React Router v5

tsx ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```tsx
import { FaroErrorBoundary, setReactRouterV4V5SSRDependencies } from '@grafana/faro-react';
setReactRouterV4V5SSRDependencies({ Route, history });

export function renderToString(...) {
  return reactRenderToString(
    <FaroErrorBoundary>
      <StaticRouter location={...}>
        <App />
      </StaticRouter>
    </FaroErrorBoundary>
  ),
}
```