Unexpected onLoad attribute behaviour in next/head #12984

joe-bell · 2020-05-16T19:23:48Z

Bug report

Describe the bug

In my project raam I'm tying set "Inter" as my font by linking to a stylesheet from Google Fonts.

In Head (a component that extends next/head) I'm using:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin="" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  rel="stylesheet"
/>

(note the preconnect to the actual font assets, then the display=swap which is intended to show the fallback font until the loaded font is swapped in)

When I then go to view the page (in Firefox particularly) I see a flash of unstyled/invisible text:
https://raam-git-chore-inter.joebell.now.sh/

Screenshots

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to https://raam-git-chore-inter.joebell.now.sh/ (in Firefox where this is more visible)
Hard reload and watch the behaviour of fonts

Expected behavior

The system font is seen first, and 'swapped' to Inter on load.

System information

OS: macOS
Browser (if applies): Firefox 75
Version of Next.js: 9.3.3
Version of Node.js: 13.8.0

Additional context

I appreciate there's a lot of variables here: Theme UI, Google Fonts, Now.sh, Next.js, but it would be good if we can figure out the root cause here for others using Next.js. If it's something that could be resolved by adding some documentation I'd be more than happy to do so.

Thanks again for all of the team's hard work on Next.js, it's a real pleasure to work with

Prior reading

@leerob's "Thing's I've learned Building Next.js apps"

Example

Source: chore: switch to inter joe-bell/raam#20
Demo: https://raam-git-chore-inter.joebell.now.sh/

The text was updated successfully, but these errors were encountered:

joe-bell · 2020-05-16T20:38:11Z

Did some testing on other devices: iPad OS and iOS have no issues. Seems like it only occurs on macOS but I can’t verify Windows. I've tried removing the Theme UI hook to see if this was the root, but it appears to make no difference.

joe-bell · 2020-05-17T11:00:38Z

As an update I've tested this new approach, which is a mix of font-loading performance suggestions I've found online:

<link
  rel="preload"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  as="style"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  rel="stylesheet"
  media="print"
  // // Next.js doesn't like this but it allows us to load CSS asynchronously
  // @ts-ignore
  onLoad="this.media='all'"
/>

Before	After

However a slight flash still remains and TypeScript doesn't like my onLoad="this.media='all'" as it doesn't accept string values. Am I doing this wrong or do I need to raise a PR to update types?

I have a hunch that something in next/head is changing after load on the client, but I'm not experienced enough to know what's happening under the hood to cause this FOUT.

Update #1 - I've tried fg-loadCSS but the same FOUT issue occurs. Whatever approach there is still a small FOUT.

joe-bell · 2020-05-18T13:50:23Z

After some further investigation with @csswizardry, we found that when JS is disabled the onload attribute is missing entirely:

What's even stranger is once JS is enabled, this behaves as expected but moves further down the <head> element:

This leads me to think next/head is rendering without onLoad on the server, then shuffling around things upon hydration

timneutkens · 2020-05-25T12:15:39Z

This leads me to think next/head is rendering without onLoad on the server, then shuffling around things upon hydration

onload is handled by React so I assume it's read as if it's a React event handler.

joe-bell · 2020-05-25T12:23:22Z

Thanks for getting back to me @timneutkens, I was just about to update this issue as I've managed to build a workaround solution in the meantime: next-google-fonts

I'd still prefer to use onload, but it seems fine for now

willemmulder · 2020-12-01T10:37:23Z

Copied from #16065 where I have a problem related to what OP is trying to do. If I want to use

<link rel="preload" href="https://..." as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://...></noscript>

to make loading CSS async, that does not work because I'd have to rework that to using onLoad with a function, but that function is never executed. So

Is there a way to just insert the above HTML as-is, without having to comply to JSX?
If not, is there a way to make onLoad work?
If not, is there another easy way to make external CSS load async?

dsacramone · 2021-02-22T22:03:18Z

Copied from #16065 where I have a problem related to what OP is trying to do. If I want to use
<link rel="preload" href="https://..." as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://...></noscript>
to make loading CSS async, that does not work because I'd have to rework that to using onLoad with a function, but that function is never executed. So

Is there a way to just insert the above HTML as-is, without having to comply to JSX?

If not, is there a way to make onLoad work?

If not, is there another easy way to make external CSS load async?

Did you find a solution to this? I have the same need.

willemmulder · 2021-02-25T09:06:21Z

@dsacramone Nope, I did not find anything yet. Maybe the @tsignore annotation referenced in the 'fix build' commit above works?

ssylvia · 2021-03-16T16:30:54Z

onload is handled by React so I assume it's read as if it's a React event handler.

@timneutkens At least on the client, the react elements are converted to regular DOM elements and all props are converted regular HTML attributes:

next.js/packages/next/client/head-manager.ts

Lines 9 to 27 in 85499b5

    
           function reactElementToDOM({ type, props }: JSX.Element): HTMLElement { 
        
             const el: HTMLElement = document.createElement(type) 
        
             for (const p in props) { 
        
               if (!props.hasOwnProperty(p)) continue 
        
               if (p === 'children' || p === 'dangerouslySetInnerHTML') continue 
        
               // we don't render undefined props to the DOM 
        
               if (props[p] === undefined) continue 
        
               const attr = DOMAttributeNames[p] || p.toLowerCase() 
        
               if ( 
        
                 type === 'script' && 
        
                 (attr === 'async' || attr === 'defer' || attr === 'noModule') 
        
               ) { 
        
                 ;(el as HTMLScriptElement)[attr] = !!props[p] 
        
               } else { 
        
                 el.setAttribute(attr, props[p]) 
        
               } 
        
             }

This causes the scope of the function to be lost as it is converted to a string with the el.setAttribute. Also, due to the race condition, we would need to make sure the onload is set before the href is set.

felipedeboni · 2021-03-30T03:51:40Z

Following seems to work

<style dangerouslySetInnerHTML={{
  __html: `</style>
    <link
      rel="stylesheet"
      href="https://...."
      media="print"
      onload="this.media = 'all';"
    />
    <style>`
}}></style>

balazsorban44 · 2022-01-12T01:41:35Z

Next.js comes with Font Optimization out-of-the-box now, this should not be necessary.

Please check out our docs: https://nextjs.org/docs/basic-features/font-optimization

ssylvia · 2022-01-12T13:07:17Z

@balazsorban44 Please reopen this issue. There are several other use cases besides fonts that would benefit from the onLoad case. Also, font optimization only works if the font is known at build time or if it comes from Google Fonts and Typekit. For example, our team runs a website builder on NextJS. The website creators can choose a Google Font configuration per site which is not known at build time. There are also several other popular web font loaders that are not included in font-optimization.

balazsorban44 · 2022-01-12T23:08:39Z

Could someone add a reproduction that I could clone and test with the newest version of Next.js? (as of writing 12.0.8)? I only see a deployed version that is more than a year old.

I'm happy to investigate further then.

balazsorban44 · 2022-02-12T23:41:39Z

This issue has been automatically closed after 30 days of inactivity with no reproduction. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

github-actions · 2022-03-15T00:15:43Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

joe-bell changed the title ~~Flash of Invisible/Unstyled Text When Using Custom Fonts~~ Flash of Invisible/Unstyled Text May 18, 2020

joe-bell changed the title ~~Flash of Invisible/Unstyled Text~~ Unexpected onLoad attribute behaviour in next/head May 25, 2020

joe-bell mentioned this issue May 25, 2020

Getting Flash of Unstyled Text in production mode #13238

Closed

timneutkens added good first issue Easy to fix issues, good for newcomers help wanted labels May 25, 2020

Timer removed the help wanted label Jun 3, 2020

kilemensi mentioned this issue Sep 17, 2020

[Fix] Google fonts CodeForAfrica/PromiseTracker#68

Merged

5 tasks

joe-bell mentioned this issue Dec 1, 2020

[Font Optimization] Asynchronous non-critical font styles #16065

Closed

wilf312 referenced this issue in wilf312/blog-drill-dev Dec 10, 2020

fix build

124617b

LekoArts mentioned this issue Apr 6, 2021

onLoad prop removed from html.js - works in other files gatsbyjs/gatsby#30686

Closed

jenewland1999 pushed a commit to jenewland1999/buildarmy that referenced this issue Apr 22, 2021

🐛 Fix vercel/next.js#12984 using a hacky workaround

4d8309d

timlrx mentioned this issue Apr 30, 2021

Google Fonts are not loading timlrx/tailwind-nextjs-starter-blog#35

Closed

balazsorban44 closed this as completed Jan 12, 2022

balazsorban44 reopened this Jan 12, 2022

balazsorban44 added the please add a complete reproduction Please add a complete reproduction. label Jan 12, 2022

balazsorban44 added the Stale label Feb 11, 2022

balazsorban44 closed this as completed Feb 12, 2022

github-actions bot locked as resolved and limited conversation to collaborators Mar 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unexpected onLoad attribute behaviour in next/head #12984

Unexpected onLoad attribute behaviour in next/head #12984

joe-bell commented May 16, 2020 •

edited

Loading

joe-bell commented May 16, 2020 •

edited

Loading

joe-bell commented May 17, 2020 •

edited

Loading

joe-bell commented May 18, 2020

timneutkens commented May 25, 2020

joe-bell commented May 25, 2020 •

edited

Loading

willemmulder commented Dec 1, 2020

dsacramone commented Feb 22, 2021

willemmulder commented Feb 25, 2021

ssylvia commented Mar 16, 2021

felipedeboni commented Mar 30, 2021 •

edited

Loading

balazsorban44 commented Jan 12, 2022

ssylvia commented Jan 12, 2022

balazsorban44 commented Jan 12, 2022 •

edited

Loading

balazsorban44 commented Feb 12, 2022

github-actions bot commented Mar 15, 2022

Unexpected onLoad attribute behaviour in next/head #12984

Unexpected onLoad attribute behaviour in next/head #12984

Comments

joe-bell commented May 16, 2020 • edited Loading

Bug report

Describe the bug

Screenshots

To Reproduce

Expected behavior

System information

Additional context

Prior reading

Example

joe-bell commented May 16, 2020 • edited Loading

joe-bell commented May 17, 2020 • edited Loading

joe-bell commented May 18, 2020

timneutkens commented May 25, 2020

joe-bell commented May 25, 2020 • edited Loading

willemmulder commented Dec 1, 2020

dsacramone commented Feb 22, 2021

willemmulder commented Feb 25, 2021

ssylvia commented Mar 16, 2021

felipedeboni commented Mar 30, 2021 • edited Loading

balazsorban44 commented Jan 12, 2022

ssylvia commented Jan 12, 2022

balazsorban44 commented Jan 12, 2022 • edited Loading

balazsorban44 commented Feb 12, 2022

github-actions bot commented Mar 15, 2022

joe-bell commented May 16, 2020 •

edited

Loading

joe-bell commented May 16, 2020 •

edited

Loading

joe-bell commented May 17, 2020 •

edited

Loading

joe-bell commented May 25, 2020 •

edited

Loading

felipedeboni commented Mar 30, 2021 •

edited

Loading

balazsorban44 commented Jan 12, 2022 •

edited

Loading