Safari에서 React/Next.js 웹사이트의 공백 페이지 문제 해결하기
React/Next.js 웹사이트가 Safari에서 가끔씩 공백 페이지로만 로드되는 문제를 겪고 있나요? 혼자가 아닙니다. 이 블로그 포스트에서는 이 문제의 근본 원인을 알아보고, 해결에 도움이 되는 잠재적인 해결책에 대해 논의하겠습니다.
신비로운 공백 페이지 문제
많은 개발자들이 Safari에서 React/Next.js 웹사이트가 제대로 로드되지 않아 일부 컴포넌트의 윤곽만 보이는 공백 페이지가 나타나는 이상한 버그를 겪었습니다. 이 문제는 무작위로 발생하며 그 이유는 분명하지 않습니다.
처음에는 몇몇 개발자들이 이 문제가 Cache-Control 헤더와 관련이 있을 수 있다고 생각했습니다. 다른 브라우저와 다르게 Safari는 특정 Cache-Control 구성이 존재할 때 페이지 로드에 문제가 생길 수 있습니다. 하지만 다음과 같은 코드로 Cache-Control 헤더를 수정하여 문제를 해결하기 시도한 결과가 좋지 않았습니다:
res.header("Cache-Control", "no-cache, no-store, must-revalidate");
app.disable('etag');중요한 점은 이 문제가 로컬호스트에서 웹사이트를 실행할 때는 발생하지 않는다는 것입니다. 이는 실제 배포 환경에서 보내지는 특정 헤더와 관련이 있을 수 있다는 것을 시사합니다.
범인 찾기
수십 시간의 문제 해결 노력 끝에, 어느 개발자가 예상치 못한 범인을 발견했습니다: Adobe Fonts에서 가져온 폰트입니다. 이 폰트를 일반적으로 지원되는 Google Font로 대체하면 Safari 공백 페이지 문제가 기적적으로 해결됩니다.
특히 제3자 출처에서 가져온 일부 폰트는 Safari와의 호환성 문제를 일으킬 수 있는데, 이는 웹사이트를 구축할 때 폰트 선택을 고려하고 모든 브라우저에서 지원되지 않을 수 있는 폰트 사용에 대해 주의해야 함을 강조합니다.
앞으로의 예방을 위한 해결책
앞으로 비슷한 문제를 경험하지 않으려면, 특정 폰트를 렌더링하는 데 문제가 생길 수 있는 브라우저에 대체 또는 대체 폰트 패밀리를 제공하는 것이 좋은 방법입니다. ‘sans’ 또는 ‘sans-serif’와 같은 기본 폰트 패밀리를 지정하여 폰트 관련 호환성 문제의 위험을 줄일 수 있습니다.
마무리
Safari에서 React/Next.js 웹사이트가 가끔씩 공백 페이지로 로드되는 문제로 고민 중이라면, 원인은 폰트 호환성 문제일 수 있습니다. 문제가 있는 폰트를 보편적으로 지원되는 다른 옵션으로 대체함으로써 문제를 해결하고 다양한 브라우저에서 일관된 렌더링을 보장할 수 있습니다.
언제나 폰트 선택을 고려하고 호환성 문제를 대비하기 위해 대체 옵션을 제공하는 것을 기억하세요. 이 정보가 여러분에게 시간과 노력을 절약하고 사용자에게 더욱 원할한 브라우징 경험을 제공하기를 바랍니다.
Safari와 React/Next.js에서 비슷한 문제를 겪은 적이 있나요? 아래 댓글에서 여러분의 경험과 추가적인 인사이트를 공유해주세요!
