No SSR

The No-SSR component defers the rendering of children components from the server to the client.

Introduction

No-SSR is a utility component that prevents its children from being rendered on the server.

This component can be useful in a variety of situations:

• To create an escape hatch for broken dependencies that don't support server-side rendering (SSR)
• To improve the time to first paint by only rendering above the fold
• To reduce the rendering time on the server
• To turn on service degradation when the server load is too heavy
• To improve the Time to Interactive (TTI) by only rendering what's important (using the defer prop)

Component

Usage

After installation, you can start building with this component using the following basic elements:

<span class="token keyword">import</span> NoSsr <span class="token keyword">from</span> <span class="token string">'@mui/base/NoSsr'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NoSsr</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token comment">/* element to be rendered on the client side */</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NoSsr</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Basics

At its core, the No-SSR component's purpose is to defer rendering from the server to the client, as shown in the following demo:

Customization

Delay client-side rendering

You can also use No-SSR to delay the rendering of specific components on the client side—for example, to let the rest of the application load before an especially complex or data-heavy component.

The following demo shows how to use the defer prop to prioritize rendering the rest of the app outside of what is nested within No-SSR: