Question

对NextJS的服务器端呈现功能进行一些探讨。它看起来非常好，易于使用。我已经浏览了_document.js文件，可以包括该文件以覆盖默认文件。我在示例中找到以下代码：

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

现在我知道我们正在覆盖当前的HTML模板。但是我对Main和Nextscript的功能有些困惑。

Main只是一页吗？什么是Nextscript（哪个脚本）？

Answer 1

NextScript类为here

，主类是here，我在下面复制了相同的内容。 Main渲染this.context._documentProps

的html / errorHtml

export class Main extends Component {
  static contextTypes = {
    _documentProps: PropTypes.any
  }

  render () {
    const { html, errorHtml } = this.context._documentProps
    return (
      <Fragment>
        <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
        <div id='__next-error' dangerouslySetInnerHTML={{ __html: errorHtml }} />
      </Fragment>
    )
  }
}

您可以在自定义文档here上找到实际文档

Answer 2

对于那些将来会寻找该问题答案的人...

“下一个/文档”中的组件NextScript从context._documentProps中获取文件列表，并将每个文件作为元素返回，如下所示：

<script
        key={file}
        src={`${assetPrefix}/_next/${file}`}
        nonce={this.props.nonce}
        async
      />

它还从context._documentProps中获取动态导入，并以类似的方式返回它们：

<script
        async
        key={bundle.file}
        src={`${assetPrefix}/_next/${bundle.file}`}
        nonce={this.props.nonce}
      />

NextJS：Main和Nextscript

2 个答案: