Next.js: removal of <NextScript /> doesnt ditch next-related scripts

Created on 20 Jun 2018 · 7Comments · Source: vercel/next.js

Bug report

Describe the bug

So there is a ./pages/_document.js and <NextScript />, even if you remove it next.js will include all the bundles. I'm curious why <NextScript /> seems to not matter. Nothing changes if I remove it or add it back.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to https://with-nextscript-llzwhvgbup.now.sh (it is with-emotion example deployed as is)
Check Network tab in dev tools
Scripts are being dowloaded
Go to https://without-nextscript-vmfhuqxgbt.now.sh (it is with-emotion example with removed <NextScript /> and deployed)
Check Network tab in dev tools
Scripts are still being dowloaded

build process is next build && next export

Expected behavior

No scripts should be in place

Screenshots

N/A

System information

OS: macOS 10.13.4
Browser N/A
Version of Next.js: latest

Additional context

kinda related https://spectrum.chat/thread/3f923307-a694-4af5-b000-517a7e26c0d7
I tried to achieve approach described in this tweet https://twitter.com/_davideast/status/1009112973439393795

Source

iamstarkov

Most helpful comment

I'm planning to change the way we render these scripts (no longer hardcoded) so that you can override them in a custom _document.js

timneutkens on 25 Jun 2018

👍6

All 7 comments

@iamstarkov This does work; but overriding document and removing <NextScript> is not enough. You also have to override Head and remove the link preloads:

https://github.com/zeit/next.js/blob/canary/server/document.js#L91

Not all browsers load these, but Chrome definitely does, so that is why you are seeing them in the network tab.

So either create a custom Head component that does not preload, or create a pair of components that capture the information and load it later. I will likely be doing something like this at some point.

codinronan on 25 Jun 2018

I'm planning to change the way we render these scripts (no longer hardcoded) so that you can override them in a custom _document.js

timneutkens on 25 Jun 2018

👍6

@timneutkens sounds good, thank you

iamstarkov on 25 Jun 2018

@timneutkens, do you have any updates or perhaps if one can help any hints how?

iamstarkov on 6 Sep 2018

I'm looking forward to being able to customise how Head renders scripts, in the meantime, I've done basically what @codinronan said:

1) I've created a custom Head component (Gist here)

2) Added into my _document.js

import React from "react";
import Document, { Main, NextScript } from "next/document";
import Head from "/lib/_customNextHead";

class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <Head>
          ...
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;

Works for my use case. Just have to keep this in mind in future Next.js upgrades to ensure it's still compatible.

@iamstarkov this might work for you too. There's a flag for preloading in case you need to change it.