Question

NextJS：主和SextScript

2018-08-29

27478

javascript reactjs next.js

探索 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 类在这里

主类在这里，我将其复制如下。主要从 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>
    )
  }
}

您可以在此处

找到有关自定义文档的实际文档

Answer 2

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

来自“next/document”的组件 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}
/>