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

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 <[email protected]>
agustints · Jan 6, 2024 · 10d5365 · 10d5365
1 parent 77fd8a9
commit 10d5365
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/packages/next/src/server/lib/router-server.ts b/packages/next/src/server/lib/router-server.ts
@@ -35,6 +35,8 @@ import { DevBundlerService } from './dev-bundler-service'
 import { type Span, trace } from '../../trace'
 
 const debug = setupDebug('next:router-server:main')
+const isNextFont = (pathname: string | null) =>
+  pathname && /\/media\/[^/]+\.(woff|woff2|eot|ttf|otf)$/.test(pathname)
 
 export type RenderServer = Pick<
   typeof import('./render-server'),
@@ -396,7 +398,7 @@ export async function initialize(opts: {
           !res.getHeader('cache-control') &&
           matchedOutput.type === 'nextStaticFolder'
         ) {
-          if (opts.dev) {
+          if (opts.dev && !isNextFont(parsedUrl.pathname)) {
             res.setHeader('Cache-Control', 'no-store, must-revalidate')
           } else {
             res.setHeader(

diff --git a/test/e2e/next-font/index.test.ts b/test/e2e/next-font/index.test.ts
@@ -42,6 +42,20 @@ describe('next/font', () => {
     })
     afterAll(() => next.destroy())
 
+    if ((global as any).isNextDev) {
+      it('should use production cache control for fonts', async () => {
+        const html = await next.render('/')
+        console.log({ html })
+        const $ = await next.render$('/')
+        const link = $('[rel="preload"][as="font"]').attr('href')
+        expect(link).toBeDefined()
+        const res = await next.fetch(link)
+        expect(res.headers.get('cache-control')).toBe(
+          'public, max-age=31536000, immutable'
+        )
+      })
+    }
+
     describe('import values', () => {
       test('page with font', async () => {
         const html = await renderViaHTTP(next.url, '/with-fonts')

diff --git a/test/turbopack-tests-manifest.json b/test/turbopack-tests-manifest.json
@@ -5582,6 +5582,7 @@
       "next/font app preload page with fonts",
       "next/font app preload page with local fonts",
       "next/font app preload page without fonts",
+      "next/font app should use production cache control for fonts",
       "next/font app-old Fallback fontfaces google Fraunces",
       "next/font app-old Fallback fontfaces google Indie flower",
       "next/font app-old Fallback fontfaces local Fraunces",
@@ -5594,7 +5595,8 @@
       "next/font app-old preload google fonts with multiple weights/styles",
       "next/font app-old preload page with fonts",
       "next/font app-old preload page with local fonts",
-      "next/font app-old preload page without fonts"
+      "next/font app-old preload page without fonts",
+      "next/font app-old should use production cache control for fonts"
     ],
     "pending": [],
     "flakey": [],