Next JS build 只生成服务器端页面

Question

即使我没有在某些页面上使用getServerSideProps()，例如/contact、/about、/rules，它们是服务器端生成的，但我希望它们是静态的，因为我没有在这些页面上使用任何 API 请求页。它们仅包含静态图像和文本。我认为我的_app.js 或_document.js 出了点问题，我会附上这些。

我的_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 */

我的_document.js的内容

可能是因为getInitialProps()_document.js ???

Answer 1

是的，你是对的。文档文件上的 getInitialProps 将触发服务器端渲染。

getInitialProps 启用页面中的服务器端呈现并允许您进行初始数据填充，这意味着发送已从服务器填充的数据的页面。这对 SEO 尤其有用。

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