how to use getStaticProps altogether with SSR (materialui)?

[YuriGor]

Hi all, please help, I need to use getStaticProps in order to read markdown files and parse them to react on build time.
But my docs site is using material UI, so, as in this example
https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
I need to use getInitialProps in _document to fix an issue with client/server css class names mismatch.
If I try to do this I have an error, that I can't mix usage of getStaticProps and getInitialProps
So I tried to just replace getInitialProps by getStaticProps in the _document and it's not working.

Does anybody know that in theory, it's possible to use SSR materialui altogether with getStaticProps or I should not even try and don't waste my time?

Previously I used preval for build-time data processing, so maybe I should get back to this approach instead of trying getStaticProps?

[leerob]

Yes, you can use Material UI together with getStaticProps! I forked that example and added getStaticProps to a page.

// pages/index.js
import React from "react";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import ProTip from "../src/ProTip";
import Link from "../src/Link";
import Copyright from "../src/Copyright";

export default function Index(props) {
  // contains test
  console.log(props);

  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Next.js example
        </Typography>
        <Link href="/about" color="secondary">
          Go to the about page
        </Link>
        <ProTip />
        <Copyright />
      </Box>
    </Container>
  );
}

export async function getStaticProps(context) {
  return {
    props: {
      test: "test"
    }
  };
}

https://codesandbox.io/s/nextjs-material-ui-ssg-1m3k2

[YuriGor]

Hi, thank you a lot.
Sorry, I forgot to mention I am using nextjs as SSG, and the error I have is also related to SSG,
but when I try to build your example - I see it's also built as SSG automatically and it's still working.
So I'll try to isolate my issue, reproduce it on your example and then get back here with news.