Permalink
    
      
  
      
    
      
          
          
            
            
              
            
            
                
                  
            
          
          
            
            
            
                
                  
            
          
          
            
            
            
                
                  
            
          
          
            
            
            
                
                  
            
          
          
          
          
          
          
            
            
              
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
            
          
          
            
              
                
              
            
            
            
                
                  
            
          
          
            
            
              
            
            
                
                  
                
                  
            
          
          
            
            
            
                
                  
            
          
          
          
            
              
                
              
            
            
            
                
                  
            
          
          
            
            
              
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
            
          
          
            
              
                
              
            
            
            
                
                  
                
                  
                
                  
                
                  
            
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                
                  
            
          
          
            
            
            
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
          
          
          
            
            
            
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
            
          
          
      
    
  
  
  material-ui/examples/nextjs/pages/_document.js
  
    
    
 
  Newer
  
  
        
          
        
        100644
        
          80 lines (73 sloc)
          
        2.04 KB
      
    2
                  import Document, { Head, Main, NextScript } from 'next/document';
                3
                  import { ServerStyleSheets } from '@material-ui/styles';
                4
                  import flush from 'styled-jsx/server';
                5
                  import theme from '../src/theme';
                11
                          <Head>
                12
                            <meta charSet="utf-8" />
                13
                            {/* Use minimum-scale=1 to enable GPU rasterization */}
                14
                            <meta
                15
                              name="viewport"
                16
                              content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
                17
                            />
                18
                            {/* PWA primary color */}
                19
                            <meta name="theme-color" content={theme.palette.primary.main} />
                22
                              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
                23
                            />
                24
                          </Head>
                25
                          <body>
                26
                            <Main />
                27
                            <NextScript />
                28
                          </body>
                29
                        </html>
                30
                      );
                31
                    }
                32
                  }
                34
                  MyDocument.getInitialProps = async ctx => {
                38
                    // 1. app.getInitialProps
                39
                    // 2. page.getInitialProps
                40
                    // 3. document.getInitialProps
                41
                    // 4. app.render
                42
                    // 5. page.render
                43
                    // 6. document.render
                46
                    // 1. document.getInitialProps
                47
                    // 2. app.render
                48
                    // 3. page.render
                49
                    // 4. document.render
                50
                    //
                51
                    // On the client
                52
                    // 1. app.getInitialProps
                53
                    // 2. page.getInitialProps
                54
                    // 3. app.render
                55
                    // 4. page.render
                56
                  57
                    // Render app and page and get the context of the page with collected side effects.
                58
                    const sheets = new ServerStyleSheets();
                59
                    const originalRenderPage = ctx.renderPage;
                61
                    ctx.renderPage = () =>
                62
                      originalRenderPage({
                63
                        enhanceApp: App => props => sheets.collect(<App {...props} />),
                64
                      });
                66
                    const initialProps = await Document.getInitialProps(ctx);
                70
                      // Styles fragment is rendered after the app and page rendering finish.
                72
                        <React.Fragment>
                74
                          {flush() || null}
                75
                        </React.Fragment>