Gatsby: How to inject 3rd party blocking scripts last on page before closing body tag

[lfurzewaddock]

Summary

Currently plugins can use the GatsbyJS SSR API onRenderBody setPostBodyComponents parameter which appears to be implemented here: gatsby/packages/gatsby/cache-dir/static-entry.js to inject scripts below the main html content inside the body tag.

However, at run time gatsby-script-loader and gatsby-chunk-mapping are placed below anything injected using setPostBodyComponents and therefore blocked.

Feature Request

Create a new GatsbyJS SSR API onRenderBody parameter called something like setPostBodyBlockingScripts or setPostBodyLastComponents based uponsetPostBodyComponents, but is injected last before the closing body tag below gatsby-script-loader and gatsby-chunk-mapping.

Motivation

Enable plugins to support 3rd party synchronous/blocking scripts including those that use document.write

[pieh]

You can use onPreRenderHTML SSR api to manipulate final order of components.

It's called just before constructing final html - so you can move any blocking scripts after gatsby-script-loader and gatsby-chunk-mapping there using getPostBodyComponents, re-ordering and replacePostBodyComponents to set final array
https://github.com/gatsbyjs/gatsby/blob/bbd2a46e88de6ee6fe4da71978a3b2940bc31374/packages/gatsby/cache-dir/static-entry.js#L362-L382

[lfurzewaddock]

Thanks @pieh, I'll attempt to implement your answer and let you know.

[KyleAMathews]

Maybe we could also just ensure the gatsby script tags go first? Would that solve the issue?

[lfurzewaddock]

Thanks @pieh, I got that working in production now.

I did have trouble though using $ gatsby develop as getPostBodyComponents only returned plugin components, not 'gatsby-script-loader', 'gatsby-chunk-mapping', etc. so I needed to use $ gatsby build for development instead.

Question: When using $ gatsby serve for the production code locally, I'm still seeing a blocking affect?
The site loads in the browser, but JavaScript does not fire, while waiting for the 3rd party server hosting the script referenced in the tag, now placed directly before the closing body tag. I had believed that if a blocking script was placed last, after all other scripts on the page, those other scripts should run or is this just related to how $ gatsby serve works, so I should just code the plugin to only run in production?

Hi @KyleAMathews, yes if the Gatsby script tags were placed before the plugin scripts this would have made it easier, but by using onPreRenderHTML I've learned that I'm able to rearrange components/scripts provided by other plugins and Gatsby core too, which is very useful.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[neoswf]

Maybe we could also just ensure the gatsby script tags go first? Would that solve the issue?

If I might say @KyleAMathews, IMHO, I think that this is the desired result. I don't see why 3'd party scripts needs to come before the gatsby script tags.
Thank you.