I am facing an issue with three components interacting and I need help in properly bundling them together.
- There is dynamic configuration on the page that exists within an inline script
- A static script located in the public folder which utilizes the dynamic config to create a global object for a third-party script
- The third-party script itself
The code snippet in question looks like this:
const { config: pageConfig } = pageProps;
<Script
dangerouslySetInnerHTML={{
__html: `window.config = ${JSON.stringify(pageConfig)};`,
}}
/>
<Script src="/scripts/mypublicfile.js" />
<Script src={pageConfig.identity.script_url} />
When executed, the output places the script tags right at the end of the <body> tag as follows:
<script>window.config = { values: "iexpected"}</script>
<script src="/scripts/mypublicfile.js" />
<script src="https://www.thirdparty.com"></script>
My goal is to have the first two script tags appear in the actual <head> section, with the inline script taking precedence, followed by my public file script being included in the bundle under _next/static/. The third-party script can remain after these or at the end of the <body> tag.
This is the desired output (without mentioning the standalone public script):
<script>window.config = { values: "iexpected"}</script>
<script src="/_next/static/bundle1.js" />
<script src="/_next/static/bundle2.js" />
<script src="https://www.thirdparty.com"></script>
Essentially, I want my CDN to cache only what's inside _next/static without needing additional configuration for scripts setting a default max-age of 0.
I have attempted various approaches but haven't been able to resolve it. Could it be related to my usage of getInitialProps? I previously thought it impacted the generation of HTML pages only, but could it also affect the bundling process?