Skip to main content
react-md

SSR Provider

The SsrProvider should be used when using server side rendering to help rehydrate the DOM and should be mounted near the root of the app.

This is included in the CoreProviders and should normally be used instead.

Enable SSR Mode

import { SsrProvider } from "@react-md/core/SsrProvider";

import { RestOfTheApp } from "./RestOfTheApp.jsx";

function App() {
  return (
    <SsrProvider ssr>
      <RestOfTheApp />
    </SsrProvider>
  );
}

Check for SSR

The main purpose for this hook is to be able to determine if the DOM exists while initializing state or if it needs to be deferred with useEffect or another mechanism. The current state can be retrieved using the useSsr hook and all components that use the useSsr hook will be re-rendered once the DOM has finished rehydrating.

This documentation site uses ssr mode with next.js.

This example below will behave differently depending on the flow:

The ssr value will never be true after initial rehydration.

Hello

"use client";

import { useSsr } from "@react-md/core/SsrProvider";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement, useRef } from "react";

export default function CheckForSsrExample(): ReactElement {
  const ssr = useSsr();
  const ssrValue = useRef("");
  const clientValue = useRef("");
  if (ssr && !ssrValue.current) {
    ssrValue.current = "Hello";
  }
  if (!ssr && !clientValue.current) {
    clientValue.current = "World!";
  }

  return (
    <Typography>
      {ssrValue.current}
      {clientValue.current}
    </Typography>
  );
}

Press Enter to start editing.