reactjs 无法生成页面源

在我的nextjs项目中，我使用getStaticProps和getStaticPath构建页面，但无法将html构建到页面源中，这导致了SEO中的许多问题。还没有使用redux-persistent。My_app. js

import React from "react";
import App from "next/app";
import TagManager from "react-gtm-module";
import NextNProgress from "../components/NextNProgress";
import "bootstrap/dist/css/bootstrap.css";
import "../scss/index.scss";

const tagManagerArgs = {
  gtmId: "########",
};
export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  componentDidMount() {
    TagManager.initialize(tagManagerArgs);
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      typeof window !== "undefined" && (
        <>
          <NextNProgress />
          <Component {...pageProps} />
        </>
      )
    );
  }
}

我的_文档. js文件

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage();

    return { html, head, errorHtml, chunks };
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossOrigin="anonymous"
          ></link>
          <link rel="manifest" href="/static/manifest.json" />
          <link
            rel="shortcut icon"
            type="image/x-icon"
            href="/static/Images/favicon.ico"
          />
          <link
            rel="preload"
            href="/static/Images/DMI-Logo-White.png"
            as="image"
            crossOrigin="anomynous"
          />
          <link
            rel="preconnect"
            href="https://googleads.g.doubleclick.net"
            crossOrigin="anomynous"
          />
          <link
            rel="preconnect"
            href="https://www.google-analytics.com"
            crossOrigin="anomynous"
          />
          <link
            rel="preconnect"
            href="https://www.googletagmanager.com"
            crossOrigin="anomynous"
          />
          <link
            rel="preconnect"
            href="http://hn.inspectlet.com"
            crossOrigin="anomynous"
          />
          <link
            rel="preconnect"
            href="https://s3.eu-west-2.amazonaws.com"
            crossOrigin="anomynous"
          />
          <link
            rel="preconnect"
            href="https://msbs-dmi-img.s3.amazonaws.com"
            crossOrigin="anomynous"
          />
          <meta
            name="msvalidate.01"
            content="DAA15A8121AE0CF599E70877904DF215"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

我能做些什么来使html在页面源中可用我正在正确地构建和呈现页面，但html没有保存在页面源中，甚至当javascript被禁用时页面也没有呈现

看起来在你的代码中，你并没有在构建时呈现页面，而只是在运行时呈现。你会尝试下面的_app.js吗？

import React from "react";
import App from "next/app";
import TagManager from "react-gtm-module";
import NextNProgress from "../components/NextNProgress";
import "bootstrap/dist/css/bootstrap.css";
import "../scss/index.scss";

const tagManagerArgs = {
  gtmId: "########",
};

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  componentDidMount() {
    TagManager.initialize(tagManagerArgs);
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        <NextNProgress />
        <Component {...pageProps} />
      </>
    );
  }
}

export default MyApp;

reactjs 无法生成页面源

1条答案

相关问题

热门标签

最新问答