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:
- When reloading this page:
- Display
Hello
- Display
HelloWorld!
- Display
- When resetting the demo or navigating through html5 history
- Display
World!
- Display
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>
);
}