Menu
Grafana Cloud
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
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
import { FaroErrorBoundary, setReactRouterV4V5SSRDependencies } from '@grafana/faro-react';
setReactRouterV4V5SSRDependencies({ Route, history });
export function renderToString(...) {
return reactRenderToString(
<FaroErrorBoundary>
<StaticRouter location={...}>
<App />
</StaticRouter>
</FaroErrorBoundary>
),
}
Was this page helpful?
Related documentation
Related resources from Grafana Labs
Additional helpful documentation, links, and articles:
Video
Getting started with the Grafana LGTM Stack
In this webinar, we’ll demo how to get started using the LGTM Stack: Loki for logs, Grafana for visualization, Tempo for traces, and Mimir for metrics.
Video
Intro to Kubernetes monitoring in Grafana Cloud
In this webinar you’ll learn how Grafana offers developers and SREs a simple and quick-to-value solution for monitoring their Kubernetes infrastructure.
Video
Building advanced Grafana dashboards
In this webinar, we’ll demo how to build and format Grafana dashboards.