What determines if chunks are marked as defer vs. async?
Unanswered
MattIPv4 posted this in #help-forum
MattIPv4OP
So I was looking at https://nodejs.org/en and comparing it to https://www.digitalocean.com/, and big thing I noticed is that on the Node.js site, the only Next.js chunk loaded via a script tag seems to be Webpack, as an async script at the bottom of the body. However, on the DigitalOcean site, there are a bunch of chunks in the head, including Webpack, that are defer scripts. What determines whether Next.js puts them in the head or body, and defer or async? Both are using the page router.3 Replies
MattIPv4OP
To somewhat answer my own question, it looks like
config.experimental.disableOptimizedLoading determines whether they're defer'ed in the head, or async in the body: https://github.com/vercel/next.js/blob/bfbc92aab5c727444ed21e0b84bd55cda2e22067/packages/next/src/pages/_document.tsx#L204-L205MattIPv4OP
Now I suppose the question is, why does the Next.js site somehow have
disableOptimizedLoading enabled, but the DigitalOcean site doesn't.@MattIPv4 <a:Wave_Doggo:825160531282755604> So I was looking at https://nodejs.org/en and comparing it to https://www.digitalocean.com/, and big thing I noticed is that on the Node.js site, the only Next.js chunk loaded via a script tag seems to be Webpack, as an `async` script at the bottom of the body. However, on the DigitalOcean site, there are a bunch of chunks in the head, including Webpack, that are `defer` scripts. What determines whether Next.js puts them in the head or body, and defer or async? Both are using the page router.
nodejs.org is the app router and digitalocean.com is the pages router. they are entirely different systems so may handle bundle script files differently.