[docs] Improve the performance of the homepage (#10152)

.size-limit

@@ -19,6 +19,6 @@
     "name": "The home page of the documentation",
     "path": ".next/bundles/pages/index.js",
     "webpack": false,
-    "limit": "3.4 KB"
+    "limit": "3.7 KB"
   }
 ]

docs/src/modules/components/GitHub.js

@@ -6,7 +6,7 @@ import SvgIcon from 'material-ui/SvgIcon';
 function GitHub(props) {
   return (
     <SvgIcon {...props}>
-      <path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
+      <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3" />
     </SvgIcon>
   );
 }

docs/src/modules/styles/getPageContext.js

@@ -38,7 +38,9 @@ function createPageContext() {
     sheetsManager: new Map(),
     // This is needed in order to inject the critical CSS.
     sheetsRegistry: new SheetsRegistry(),
-    generateClassName: createGenerateClassName(),
+    generateClassName: createGenerateClassName({
+      productionPrefix: 'j', // Reduce the bandwidth usage.
+    }),
   };
 }
 

pages/index.js

@@ -7,6 +7,7 @@ import Typography from 'material-ui/Typography';
 import Button from 'material-ui/Button';
 import withRoot from 'docs/src/modules/components/withRoot';
 import AppFooter from 'docs/src/modules/components/AppFooter';
+import NoSSR from 'docs/src/modules/components/NoSSR';
 import Link from 'docs/src/modules/components/Link';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 
@@ -58,6 +59,7 @@ const styles = theme => ({
     padding: theme.spacing.unit * 2,
     display: 'flex',
     justifyContent: 'center',
+    minHeight: 600,
   },
   backersBody: {
     maxWidth: theme.spacing.unit * 90,
@@ -109,9 +111,10 @@ function PageHome(props) {
         </div>
       </div>
       <div className={classes.backers}>
-        <MarkdownElement
-          className={classes.backersBody}
-          text={`
+        <NoSSR>
+          <MarkdownElement
+            className={classes.backersBody}
+            text={`
 <h2 style="text-align: center;">Supporting Material-UI</h2>
 
 Material-UI is an MIT-licensed open source project.
@@ -148,8 +151,9 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI.
 <a href="https://opencollective.com/material-ui/tiers/gold-sponsors/7/website" target="_blank" style="margin-right: 8px;"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/7/avatar.svg" alt="7" /></a>
 <a href="https://opencollective.com/material-ui/tiers/gold-sponsors/8/website" target="_blank" style="margin-right: 8px;"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/8/avatar.svg" alt="8" /></a>
 <a href="https://opencollective.com/material-ui/tiers/gold-sponsors/9/website" target="_blank" style="margin-right: 8px;"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/9/avatar.svg" alt="9" /></a>
-        `}
-        />
+          `}
+          />
+        </NoSSR>
       </div>
       <AppFooter />
     </div>