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

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

1 个答案: