Question

这是自定义_document.js

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

根据Documentation <Html>，<Head />，<Main />和<NextScript />才能正确呈现页面。

出于测试目的，我删除了<NextScript />，它工作正常。有人指出如果我完全删除此问题会发生什么问题？

Answer 1

通过删除NextScript，您将删除在客户端运行所需的所有JavaScript。相反，您的所有页面将包含服务器呈现的HTML和CSS

基本上是在用户关闭浏览器中的JavaScript时显示的页面。如果您同意这种情况，则可以删除它。

但是仅删除它对网络负载无济于事，您必须创建一个自定义Head才能删除预加载脚本。

Github Issue

Answer 2

根据文档，这是NextScript类！

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

  static propTypes = {
    nonce: PropTypes.string
  }

  getDynamicChunks () {
    const { dynamicImports, assetPrefix } = this.context._documentProps
    return dynamicImports.map((bundle) => {
      return <script
        async
        key={bundle.file}
        src={`${assetPrefix}/_next/${bundle.file}`}
            nonce={this.props.nonce}
      />
    })
  }

，并根据this的请求，NextScript使用async属性来加载javascript。 async属性允许javascript的解析和执行中断可能在解析DOM中间的主线程。中断DOM会增加第一次绘画的时间。

从`_document.js`中删除<NextScript />是否安全？

2 个答案: