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

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 class！

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 使用异步属性加载 javascript。 async 属性允许 javascript 解析和执行中断可能正在解析 DOM 的主线程。中断 DOM 将增加首次内容绘制的时间。

Answer 2

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

基本上是用户在浏览器中关闭 JavaScript 时出现的页面。如果您同意这种情况，那么您可以继续删除它。

但是仅仅删除它对网络负载没有帮助，您必须创建一个自定义 Head 来删除预加载脚本。

Github Issue

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

Is it safe to remove <NextScript /> from the `_document.js`?

reactjs

next.js