CODEWITHSUNDEEP
javascriptreactjsnext.jsserver-side-rendering
Ismoil Shokirov
Ismoil Shokirov

Reputation: 3039

Next JS build generates only serverside pages

Even though I am not using getServerSideProps() on some pages like /contact, /about, /rules they are server-side generated, I want them to be static as I am not using any API request on those pages. They contain only static images and text. I think something is going on wrongly in my _app.js or _document.js I will attach those.

enter image description here

Contents of my _app.js

import App from "next/app";
import {wrapper} from '../store/store';
import theme from '../helpers/theme';  // needed for Material UI
import CssBaseline from '@material-ui/core/CssBaseline';
import {ThemeProvider} from '@material-ui/core/styles';
import {motion, AnimatePresence} from "framer-motion";
import "../styles/bootstrap.css"

class MyApp extends App {

   render() {
      const {Component, pageProps, router} = this.props;
      const spring = {
         type: "spring",
         damping: 20,
         stiffness: 100,
         when: "afterChildren"
      };

      return (
          <ThemeProvider theme={theme}>
             <CssBaseline />
             <AnimatePresence>
                <div className="page-transition-wrapper">
                   <motion.div
                       transition={spring}
                       key={router.pathname}
                       initial={{opacity: 0}}
                       animate={{opacity: 1}}
                       exit={{opacity: 0}}
                       id="page-transition-container"
                   >
                      <Component {...pageProps}/>
                   </motion.div>
                </div>
             </AnimatePresence>
          </ThemeProvider>
      )
   }
}

export default wrapper.withRedux(MyApp) /* connection of redux */

Contents of my _document.js enter image description here

May be it is because of getInitialProps() at _document.js ???

Upvotes: 2

Views: 325

Answers (1)

Ion
Ion

Reputation: 1292

Yes, you are correct. getInitialProps on the document file will trigger server side render.

getInitialProps enables server-side rendering in a page and allows you to do initial data population, it means sending the page with the data already populated from the server. This is especially useful for SEO.

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Upvotes: 2

Related Questions