Manipulate html file generation
Unanswered
Dwarf Crocodile posted this in #help-forum
Dwarf CrocodileOP
In order to use the Youtube Playables SDK, I have to insert their <script> tag before any other scripts, but I can't figure out how to accomplish this.
The recommended approach of a <Script> tag with
Is there any way of actually accomplishing this? I am using Vercel, so manipulating the HTML file in some way after nextjs build process is not ideal.
The recommended approach of a <Script> tag with
beforeInteractive strategy does not accomplish this. The generated HTML file does not put my <script> first (and in fact, it doesn't even put a vanilla script tag at all, it dynamically loads it).Is there any way of actually accomplishing this? I am using Vercel, so manipulating the HTML file in some way after nextjs build process is not ideal.
11 Replies
@Dwarf Crocodile In order to use the Youtube Playables SDK, I have to insert their <script> tag before any other scripts, but I can't figure out how to accomplish this.
The recommended approach of a <Script> tag with `beforeInteractive` strategy does not accomplish this. The generated HTML file does not put my <script> first (and in fact, it doesn't even put a vanilla script tag at all, it dynamically loads it).
Is there any way of actually accomplishing this? I am using Vercel, so manipulating the HTML file in some way after nextjs build process is not ideal.
it should be completely fine to place it inside your head tag (and there at the end). Did you tested that?
Dwarf CrocodileOP
Yes, I have tested -- the SDK tester (https://developers.google.com/youtube/gaming/playables/test_suite) says it is still not early enough. And indeed, if you simply look at the generated index.html and look at the network traffic, you can see there are about a dozen small js files loaded first.
Like I said, "the recommended approach of a <Script> tag with beforeInteractive strategy does not accomplish this."
@Dwarf Crocodile Like I said, "the recommended approach of a <Script> tag with beforeInteractive strategy does not accomplish this."
he was saying that u should try loading the script with <script/>
And <Script/> is injecting a script element, idk what u was doing
the "html file" is always generated by the server so manipulating it directly is never a good idea
If u really really want to do that, u should handle that in a seperate component and access the dom directly
This way u need to make sure to handle the cases where the script is not yet loaded and any other dangerous things that might happen when u manipulate the react dom directly
Dwarf CrocodileOP
Yah, that doesn't change anything -- the NextJS build process still chooses to move your <script> tag lower than its own
The HTML file is not server rendered, it is rendered as part of the build process. I can see it in the .next folder when I build.
I think what I'm trying to communicate is getting lost. If I were to make a separate component to access the dom directly, the generated html file would need to load my script to do that --- so by definition the yt script would not be first load