Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: cache next font during development to avoid FOUC #60175

Merged
merged 9 commits into from
Jan 4, 2024
Merged

fix: cache next font during development to avoid FOUC #60175

merged 9 commits into from
Jan 4, 2024

Conversation

pacexy
Copy link
Contributor

@pacexy pacexy commented Jan 3, 2024 •
edited by timneutkens
Loading

In fact, this is an issue that has been solved in #52033, but it seems #52492 introduced it again.

During development, for fonts created via next/font the file path is already containing the hash so we can always have them cached. This fixes the problem of fonts causing FOUC in HMR.

Fixes #50782
Fixes NEXT-1971
@ijjk ijjk added the type: next label Jan 3, 2024
@ijjk
Copy link
Member

ijjk commented Jan 3, 2024 •
edited by feedthejim
Loading

Allow CI Workflow Run

  • approve CI run for commit: f8160af

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer
@ijjk
Copy link
Member

ijjk commented Jan 3, 2024 •
edited
Loading

Allow CI Workflow Run

  • approve CI run for commit: f8160af

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer
@feedthejim feedthejim added the linear: next Confirmed issue that is tracked by the Next.js team. label Jan 3, 2024
@timneutkens timneutkens added the CI approved Approve running CI for fork label Jan 3, 2024
@ijjk
Copy link
Member

ijjk commented Jan 3, 2024 •
edited
Loading

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary pacexy/next.js fix-50782 Change
buildDuration 12.8s 12.7s N/A
buildDurationCached 7.2s 6.1s N/A
nodeModulesSize 203 MB 203 MB ⚠️ +996 B
nextStartRea..uration (ms) 421ms 426ms N/A
Client Bundles (main, webpack)
vercel/next.js canary pacexy/next.js fix-50782 Change
193.HASH.js gzip 181 B 182 B N/A
3f784ff6-HASH.js gzip 53.3 kB 53.3 kB ✓
433-HASH.js gzip 28.4 kB 28.5 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB ✓
main-app-HASH.js gzip 239 B 242 B N/A
main-HASH.js gzip 31.7 kB 31.7 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB N/A
Overall change 98.5 kB 98.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary pacexy/next.js fix-50782 Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary pacexy/next.js fix-50782 Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 183 B 181 B N/A
amp-HASH.js gzip 504 B 502 B N/A
css-HASH.js gzip 321 B 321 B ✓
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 255 B 253 B N/A
head-HASH.js gzip 350 B 349 B N/A
hooks-HASH.js gzip 369 B 369 B ✓
image-HASH.js gzip 4.28 kB 4.28 kB N/A
index-HASH.js gzip 255 B 256 B N/A
link-HASH.js gzip 2.61 kB 2.61 kB ✓
routerDirect..HASH.js gzip 312 B 311 B N/A
script-HASH.js gzip 385 B 383 B N/A
withRouter-HASH.js gzip 307 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 3.4 kB 3.4 kB ✓
Client Build Manifests
vercel/next.js canary pacexy/next.js fix-50782 Change
_buildManifest.js gzip 483 B 484 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary pacexy/next.js fix-50782 Change
index.html gzip 529 B 527 B N/A
link.html gzip 540 B 538 B N/A
withRouter.html gzip 524 B 521 B N/A
Overall change 0 B 0 B ✓
Edge SSR bundle Size
vercel/next.js canary pacexy/next.js fix-50782 Change
edge-ssr.js gzip 93.7 kB 93.8 kB N/A
page.js gzip 146 kB 147 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary pacexy/next.js fix-50782 Change
middleware-b..fest.js gzip 625 B 623 B N/A
middleware-r..fest.js gzip 151 B 151 B ✓
middleware.js gzip 37.4 kB 37.4 kB N/A
edge-runtime..pack.js gzip 1.92 kB 1.92 kB ✓
Overall change 2.07 kB 2.07 kB ✓
Next Runtimes
vercel/next.js canary pacexy/next.js fix-50782 Change
app-page-exp...dev.js gzip 168 kB 168 kB ✓
app-page-exp..prod.js gzip 94.2 kB 94.2 kB ✓
app-page-tur..prod.js gzip 94.9 kB 94.9 kB ✓
app-page-tur..prod.js gzip 89.4 kB 89.4 kB ✓
app-page.run...dev.js gzip 138 kB 138 kB ✓
app-page.run..prod.js gzip 88.7 kB 88.7 kB ✓
app-route-ex...dev.js gzip 24.1 kB 24.1 kB ✓
app-route-ex..prod.js gzip 16.7 kB 16.7 kB ✓
app-route-tu..prod.js gzip 16.7 kB 16.7 kB ✓
app-route-tu..prod.js gzip 16.3 kB 16.3 kB ✓
app-route.ru...dev.js gzip 23.5 kB 23.5 kB ✓
app-route.ru..prod.js gzip 16.3 kB 16.3 kB ✓
pages-api-tu..prod.js gzip 9.38 kB 9.38 kB ✓
pages-api.ru...dev.js gzip 9.65 kB 9.65 kB ✓
pages-api.ru..prod.js gzip 9.37 kB 9.37 kB ✓
pages-turbo...prod.js gzip 21.9 kB 21.9 kB ✓
pages.runtim...dev.js gzip 22.5 kB 22.5 kB ✓
pages.runtim..prod.js gzip 21.9 kB 21.9 kB ✓
server.runti..prod.js gzip 49.4 kB 49.4 kB ✓
Overall change 932 kB 932 kB ✓
Commit: 29d8c0e
timneutkens
timneutkens approved these changes Jan 3, 2024
View reviewed changes
Copy link
Member

@timneutkens timneutkens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a test for the change, change itself looks good 👍 💯
@ijjk
Copy link
Member

ijjk commented Jan 3, 2024 •
edited
Loading

Tests Passed
@pacexy pacexy requested a review from a team as a code owner January 3, 2024 20:45
@feedthejim feedthejim enabled auto-merge (squash) January 4, 2024 08:44
@feedthejim feedthejim merged commit a2f4ca5 into vercel:canary Jan 4, 2024
68 checks passed
@pacexy pacexy deleted the fix-50782 branch January 4, 2024 08:56
@samcx samcx mentioned this pull request Jan 6, 2024
Closed
agustints pushed a commit to agustints/next.js that referenced this pull request Jan 6, 2024
@pacexy @timneutkens @agustints
fix: cache next font during development to avoid FOUC (vercel#60175)
10d5365 
In fact, this is an issue that has been solved in vercel#52033, but it seems
vercel#52492 introduced it again.

> During development, for fonts created via next/font the file path is
already containing the hash so we can always have them cached. This
fixes the problem of fonts causing FOUC in HMR.

Fixes vercel#50782

---------

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 18, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
CI approved Approve running CI for fork linear: next Confirmed issue that is tracked by the Next.js team. locked type: next
4 participants
@pacexy @ijjk @timneutkens @feedthejim