Last active
January 20, 2022 05:55
-
-
Save alinzk/593cbf0e79fa0a54111388a64dd9e480 to your computer and use it in GitHub Desktop.
Customized NextScript from next.js to delay loading for non-critical js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
NOTE: This modifies next.js internal api behavior and may break your application. | |
Tested on next.js version: 9.2.1 | |
*/ | |
import React from 'react'; | |
import { compact, flatten } from 'lodash'; | |
import { NextScript } from 'next/document'; | |
class NextScriptCustom extends NextScript { | |
render() { | |
const orgNextScripts = flatten(super.render().props.children); | |
const scripts = compact( | |
orgNextScripts.map((child) => { | |
if (child.props.id === '__NEXT_DATA__') { | |
return { | |
props: { ...child.props }, | |
content: child.props.dangerouslySetInnerHTML.__html | |
}; | |
} | |
if (child?.type === 'script') { | |
return { | |
props: { ...child.props }, | |
content: '' | |
}; | |
} | |
return null; | |
}) | |
); | |
const initialFilterer = props => !props.src || !props.src.includes('chunk'); | |
const initialLoadScripts = scripts.filter(({ props }) => initialFilterer(props)); | |
const chunkedScripts = scripts.filter(({ props }) => !initialFilterer(props)); | |
const jsContent = ` | |
var chunkedScripts = ${JSON.stringify(chunkedScripts)}; | |
setTimeout(() => { | |
chunkedScripts.map((script) => { | |
if (!script || !script.props) return; | |
try { | |
var scriptTag = document.createElement('script'); | |
scriptTag.src = script.props.src; | |
scriptTag.async = script.props.async; | |
scriptTag.defer = script.props.defer; | |
if (script.props.id) scriptTag.id = script.props.id; | |
if (script.content) scriptTag.innerHTML = script.content; | |
document.body.appendChild(scriptTag); | |
} | |
catch(err) { | |
console.log(err); | |
} | |
}); | |
// 1800ms seems like when PageSpeed Insights stop waiting for more js | |
}, 1800); | |
`; | |
return ( | |
<> | |
{initialLoadScripts.map(({ props }) => ( | |
<script key={props.id} {...props} src={props.src} /> | |
))} | |
<script id="__NEXT_SCRIPT_CUSTOM" defer dangerouslySetInnerHTML={{ __html: jsContent }} /> | |
</> | |
); | |
} | |
} | |
export default NextScriptCustom; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am facing same errors.
Error occurred prerendering page "/nextScriptCustom". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot destructure property 'assetPrefix' of 'this.context' as it is null.
at NextScriptCustom.render (G:\Projects\ArkaSoftwares\React\arka-react.next\server\chunks\6859.js:880:17)
at NextScriptCustom.render (G:\Projects\ArkaSoftwares\React\arka-react.next\server\pages\nextScriptCustom.js:34:82)
at d (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:35:231)
at bb (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
at a.b.render (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
at a.b.read (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
at Object.renderPage (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\next\dist\server\render.js:686:46)
at Object.defaultGetInitialProps (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\next\dist\server\render.js:316:51)
at Function.getInitialProps (G:\Projects\ArkaSoftwares\React\arka-react.next\server\chunks\6859.js:515:20)
[== ] info - Generating static pages (182/426)
Error occurred prerendering page "/ar/nextScriptCustom". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot destructure property 'assetPrefix' of 'this.context' as it is null.
at NextScriptCustom.render (G:\Projects\ArkaSoftwares\React\arka-react.next\server\chunks\6859.js:880:17)
at NextScriptCustom.render (G:\Projects\ArkaSoftwares\React\arka-react.next\server\pages\nextScriptCustom.js:34:82)
at d (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:35:231)
at bb (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
at a.b.render (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
at a.b.read (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
at Object.renderPage (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\next\dist\server\render.js:686:46)
at Object.defaultGetInitialProps (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\next\dist\server\render.js:316:51)
at Function.getInitialProps (G:\Projects\ArkaSoftwares\React\arka-react.next\server\chunks\6859.js:515:20)
Error occurred prerendering page "/en/nextScriptCustom". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot destructure property 'assetPrefix' of 'this.context' as it is null.
at NextScriptCustom.render (G:\Projects\ArkaSoftwares\React\arka-react.next\server\chunks\6859.js:880:17)
at NextScriptCustom.render (G:\Projects\ArkaSoftwares\React\arka-react.next\server\pages\nextScriptCustom.js:34:82)
at d (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:35:231)
at bb (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
at a.b.render (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
at a.b.read (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
at Object.renderPage (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\next\dist\server\render.js:686:46)
at Object.defaultGetInitialProps (G:\Projects\ArkaSoftwares\React\arka-react\node_modules\next\dist\server\render.js:316:51)
at Function.getInitialProps (G:\Projects\ArkaSoftwares\React\arka-react.next\server\chunks\6859.js:515:20)
info - Generating static pages (426/426)