Flexible script loading for Nextjs

[barrysteyn]

Flexible script loading for Nextjs

Problem

By default, Next will load all the scripts on a page. This could be undesirable for the following reasons:

1. Performance — some scripts could only be loaded when needed, or loaded after the page load event (especially for things like _error, if you know it is not needed immediately).
2. Preloading — It is not uncommon to need to run a script — or load a script from a URL — before allowing your Next app to load.
3. Polyfil preloading — This is the most common application of the previous point. Next bundles some polyfills, but only the ones NEXT requires — which may not be the ones you require. For example, if you require IntersectionObserver, it is on you to load it yourself. Since this is a HUGE polyfill (7kb minzipped!), you do not want to deliver it to all clients — only the ones that absolutely require it (IE <= 11, Safari ALL).

Solution

Instead of immediately rendering page scripts, rather insert the script information into a preloader script that will give hooks that can solve the problems. This became such an issue for us that we created our own component. We spent some time making it production ready... So I suppose this is a feature request with an example of the component that we would want. Our hope is that @timneutkens likes this approach and would consider putting it into Next.

See our code here

[timneutkens]

I don't know why you would copy-paste the NextScript component, it's guaranteed to break as you're copying internals 🤔 From the features I'm reading there's nothing there you couldn't do without copying NextScript.

The main takeaway (which is already planned for Next.js 7) is that _error.js can be loaded only when it's needed instead of always.

For example preLoadScripts and postLoadScripts can be easily (and probably more readable) be done like this:

<script src="pre" />
<NextScript />
<script src="post" />

For polyfill.io I'd actually provide a completely separate component called Polyfill

<Polyfill features={something} />
<NextScript />

Does that make sense to you? With above it'll never break in future releases. As latest canary probably already breaks this.

[codinronan]

@timneutkens What this component fundamentally does differently is that it waits to load the Next scripts. Instead of them being present in the HTML sent to the browser, the preloader generates them if there is no work to do and they are still loaded as part of the critical path.

Let's say you make use of Array.prototype.includes in your App.js file. This will crash if you attempt to load App.js immediately on HTML parsing if the client is IE11. You could simply include the polyfill first, but now you are sending it to all clients, not just the ones that need it. For some polyfills, this is a big deal - you can be sending 20-30kb extra JS to a client that doesn't need it. The only way to solve that problem is for the Next scripts to wait to load until after a polyfill has loaded (or determined it does not need to). That's what this does.

The primary use case for this is not about _error.js - it's about loading polyfills before Next scripts and only on clients that require them.

And yes, latest canary breaks this. Ideally Next itself would support this scenario.

[codinronan]

@timneutkens Now that I think about it, can re-implementation be avoided if NextScript can be passed as a child to a hypothetical Polyfill component that captures NextScript's output, does its own thing, then renders the scripts?

It would need to be able to get that rendered output to the client from the server somehow...

[timneutkens]

I'm going to close this as we're currently pursuing a different way of loading, #7704 and #7696

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.