diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 304fc23609a2a5..74dda55f955c55 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -237,7 +237,7 @@ function AppFrame(props) {
               <ExpandMoreIcon fontSize="small" />
             </Button>
           </Tooltip>
-          <NoSsr>
+          <NoSsr defer>
             <Menu
               id="language-menu"
               anchorEl={languageMenu}
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 0b7950d11c28bb..b7d649f389a5d0 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -345,7 +345,7 @@ function Demo(props) {
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
       {demoOptions.hideHeader ? null : (
         <div className={classes.header}>
-          <NoSsr>
+          <NoSsr defer>
             <DemoLanguages
               demo={demo}
               codeOpen={codeOpen}
diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
index 15862b43a599d1..586492e3edbbb6 100644
--- a/docs/src/modules/components/DemoSandboxed.js
+++ b/docs/src/modules/components/DemoSandboxed.js
@@ -51,7 +51,7 @@ function DemoFrame(props) {
 
   // NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount
   return (
-    <NoSsr>
+    <NoSsr defer>
       <Frame
         ref={handleRef}
         className={classes.frame}
diff --git a/docs/src/modules/components/HomeQuickWord.js b/docs/src/modules/components/HomeQuickWord.js
index a48512b901d300..4ecf35285155d3 100644
--- a/docs/src/modules/components/HomeQuickWord.js
+++ b/docs/src/modules/components/HomeQuickWord.js
@@ -41,7 +41,7 @@ function HomeQuickWord(props) {
   return (
     <div className={classes.root}>
       <Typography variant="caption">{t('homeQuickWord')}</Typography>
-      <NoSsr>
+      <NoSsr defer>
         <Link
           variant="body2"
           display="block"
diff --git a/docs/src/modules/components/HomeQuotes.js b/docs/src/modules/components/HomeQuotes.js
index eac3a24d63b9e2..6d9b654dce28df 100644
--- a/docs/src/modules/components/HomeQuotes.js
+++ b/docs/src/modules/components/HomeQuotes.js
@@ -185,7 +185,7 @@ function HomeQuotes() {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md" className={classes.container} disableGutters>
           <Divider />
           <div className={classes.users}>
diff --git a/docs/src/modules/components/HomeSponsors.js b/docs/src/modules/components/HomeSponsors.js
index 2089adc972ab33..7451f4be96cc5d 100644
--- a/docs/src/modules/components/HomeSponsors.js
+++ b/docs/src/modules/components/HomeSponsors.js
@@ -34,7 +34,7 @@ function HomeSponsors(props) {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md">
           <Divider />
           <MarkdownElement className={classes.markdownElement} text={backers[userLanguage]} />
diff --git a/docs/src/modules/components/HomeThemes.js b/docs/src/modules/components/HomeThemes.js
index 0b1ccc4a7cbe66..14c767dd66c4ef 100644
--- a/docs/src/modules/components/HomeThemes.js
+++ b/docs/src/modules/components/HomeThemes.js
@@ -52,7 +52,7 @@ function HomeThemes(props) {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md">
           <Typography variant="h4" component="h2" align="center" gutterBottom>
             {t('themes')}
@@ -67,7 +67,7 @@ function HomeThemes(props) {
             data-ga-event-label="home-image"
             className={classes.link}
           >
-            <NoSsr>
+            <NoSsr defer>
               <img
                 className={classes.img}
                 alt={t('themesButton')}
diff --git a/docs/src/modules/components/HomeUsers.js b/docs/src/modules/components/HomeUsers.js
index 4663ff2af4353a..b65383d59c678e 100644
--- a/docs/src/modules/components/HomeUsers.js
+++ b/docs/src/modules/components/HomeUsers.js
@@ -125,7 +125,7 @@ function HomeUsers(props) {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md" className={classes.container} disableGutters>
           <Divider />
           <div className={classes.users}>