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.

Enable SSR Mode

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

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

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 example below will behave differently depending on the flow:

• When reloading this page:
  • Display Hello
  • Display HelloWorld!
• When resetting the demo or navigating through html5 history
  • Display World!

The ssr value will never be true after initial rehydration.

"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>
  );
}