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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6faa691
cache next font during development
pacexy Jan 3, 2024
f8160af
Merge branch 'vercel:canary' into fix-50782
pacexy Jan 3, 2024
eb7a824
Merge branch 'canary' into fix-50782
timneutkens Jan 3, 2024
b0c923e
Add test
timneutkens Jan 3, 2024
652e762
Expect link to exist
timneutkens Jan 3, 2024
4453149
Debug
timneutkens Jan 3, 2024
6828663
Update manifest
timneutkens Jan 3, 2024
663a1ee
Merge branch 'canary' into fix-50782
pacexy Jan 4, 2024
29d8c0e
perf: check `isNextFont` only in dev
pacexy Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/next/src/server/lib/router-server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -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(
Expand Down
14 changes: 14 additions & 0 deletions test/e2e/next-font/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
4 changes: 3 additions & 1 deletion test/turbopack-tests-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": [],
Expand Down