[docs] Fix /versions GitHub API rate limitation

docs/pages/_app.js

@@ -269,7 +269,6 @@ function findActivePage(currentPages, pathname) {
 
 function AppWrapper(props) {
   const { children, pageProps } = props;
-
   const router = useRouter();
   const [redux] = React.useState(() => initRedux(pageProps.reduxServerState));
 
@@ -313,7 +312,7 @@ function AppWrapper(props) {
           ))}
         </NextHead>
         <ReduxProvider store={redux}>
-          <PageContext.Provider value={{ activePage, pages }}>
+          <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
             <StylesProvider jss={jss}>
               <ThemeProvider>{children}</ThemeProvider>
             </StylesProvider>
@@ -344,16 +343,21 @@ export default class MyApp extends App {
   }
 }
 
-MyApp.getInitialProps = ({ ctx }) => {
+MyApp.getInitialProps = async ({ ctx, Component }) => {
   let pageProps = {};
 
+  if (Component.getInitialProps) {
+    pageProps = await Component.getInitialProps(ctx);
+  }
+
   if (!process.browser) {
     const redux = initRedux({
       options: {
         userLanguage: ctx.query.userLanguage,
       },
     });
     pageProps = {
+      ...pageProps,
       // No need to include other initial Redux state because when it
       // initialises on the client-side it'll create it again anyway
       reduxServerState: redux.getState(),

docs/pages/versions.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import orderBy from 'lodash/orderBy';
+import sortedUniqBy from 'lodash/sortedUniqBy';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/versions', false, /\.(md|js|tsx)$/);
@@ -8,3 +10,43 @@ const reqPrefix = 'pages/versions';
 export default function Page() {
   return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
 }
+
+async function getBranches() {
+  let branches = [];
+  try {
+    const result = await fetch('https://api.github.com/repos/mui-org/material-ui-docs/branches');
+    branches = await result.json();
+  } catch (err) {
+    // Swallow the exceptions.
+  }
+
+  branches = branches || [];
+  return branches;
+}
+
+Page.getInitialProps = async () => {
+  const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next'];
+
+  const branches = await getBranches();
+  let versions = branches.map(n => n.name);
+  versions = versions.filter(value => FILTERED_BRANCHES.indexOf(value) === -1);
+  versions = versions.map(version => ({
+    version,
+    // Replace dot with dashes for Netlify branch subdomains
+    url: `https://${version.replace(/\./g, '-')}.material-ui.com`,
+  }));
+  // Current version.
+  versions.push({
+    version: `v${process.env.LIB_VERSION}`,
+    url: 'https://material-ui.com',
+  });
+  // Legacy documentation.
+  versions.push({
+    version: 'v0',
+    url: 'https://v0.material-ui.com',
+  });
+  versions = orderBy(versions, 'version', 'desc');
+  versions = sortedUniqBy(versions, 'version');
+
+  return { versions };
+};

docs/src/modules/components/PageContext.js

@@ -7,6 +7,7 @@ const PageContext = React.createContext({
     pathname: '',
   },
   pages: [],
+  versions: [],
 });
 
 if (process.env.NODE_ENV !== 'production') {

docs/src/pages/versions/StableVersions.js

@@ -1,18 +1,16 @@
 import 'isomorphic-fetch';
 import React from 'react';
 import PropTypes from 'prop-types';
-import orderBy from 'lodash/orderBy';
-import sortedUniqBy from 'lodash/sortedUniqBy';
 import { withStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 const GITHUB_RELEASE_BASE_URL = 'https://github.com/mui-org/material-ui/releases/tag/';
-const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next'];
 
 const styles = {
   root: {
@@ -22,59 +20,15 @@ const styles = {
   },
 };
 
-let cacheBranches = null;
-
-async function getBranches() {
-  try {
-    if (!cacheBranches) {
-      const result = await fetch('https://api.github.com/repos/mui-org/material-ui-docs/branches');
-      cacheBranches = await result.json();
-    }
-  } catch (err) {
-    // Swallow the exceptions.
-  }
-
-  cacheBranches = cacheBranches || [];
-  return cacheBranches;
-}
-
 function StableVersions(props) {
   const { classes } = props;
-  const [docs, setDocs] = React.useState([]);
-
-  React.useEffect(() => {
-    (async () => {
-      const branches = await getBranches();
-      let newDocs = branches.map(n => n.name);
-      newDocs = newDocs.filter(value => FILTERED_BRANCHES.indexOf(value) === -1);
-      newDocs = newDocs.map(version => ({
-        version,
-        // Replace dot with dashes for Netlify branch subdomains
-        url: `https://${version.replace(/\./g, '-')}.material-ui.com`,
-      }));
-      // Current version.
-      newDocs.push({
-        version: `v${process.env.LIB_VERSION}`,
-        url: document.location.origin,
-      });
-      // Legacy documentation.
-      newDocs.push({
-        version: 'v0',
-        url: 'https://v0.material-ui.com',
-      });
-      newDocs = orderBy(newDocs, 'version', 'desc');
-      newDocs = sortedUniqBy(newDocs, 'version');
-      // The latest version is always using the naked domain.
-      newDocs[0].url = 'https://material-ui.com';
-      setDocs(newDocs);
-    })();
-  }, []);
+  const { versions } = React.useContext(PageContext);
 
   return (
     <div className={classes.root}>
       <Table>
         <TableBody>
-          {docs.map(doc => (
+          {versions.map(doc => (
             <TableRow key={doc.version}>
               <TableCell>
                 <Typography variant="body2">