下一个 JS 构建仅生成服务器端页面

Question

即使我没有在某些页面上使用 getServerSideProps()，例如 /contact、/about、/rules 它们是 server-side 生成的，我希望它们保持静态，因为我没有在这些页面上使用任何 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 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

下一个 JS 构建仅生成服务器端页面

Next JS build generates only serverside pages

javascript

reactjs

server-side-rendering

next.js