next.js
-
Next.js 13 업데이트 내용 정리개발 블로깅/Next.js 2022. 10. 28. 01:17
얼추 1년 만에 또 Next.js의 Major 버전이 업데이트 되었다. 🙌 거두절미하고 바로 어떤 내용이 추가되었는지 확인해보자. 주요 내용 목차 app/ Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image (stable): Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift. Improved ..
-
Next.js Lazy Hydration으로 웹 성능 향상시키기(HTML은 유지하고 Script는 걸러내자)개발 블로깅/Improving Performance 2021. 12. 2. 12:24
Next.js의 Hydrate개념을 아직 모르신다면,이전에 작성했던 Next.js의 Hydrate 글을 먼저 참고하시는 것을 추천드립니다. Next.js에서는 첫 페이지를 로드하면 Hydrate과정을 거치게 된다. 💡 Hydrate란? 화면에 보여줄 document 페이지를 서버 단에서 먼저 렌더링 후 브라우저로 전송한 뒤, 이후에 해당 DOM 요소에 필요로 한 Script 코드들을 바로 브라우저로 전송한다. 그리고 각 DOM 요소와 Script 코드가 매칭이 되면서 정상적으로 웹 페이지가 동작하게 된다. 그러나 이러한 Hydrate 방식은 아직 약간의 아쉬운 점이 존재하는데, 그것은 'PreRendering 된 DOM 요소의 모든 Script는 무조건 모두 가져온다는 것'이다. 이 말이 무슨 뜻인지 아..
-
브라우저 동작원리를 알아야 하는 이유가 무엇인가요?개발 블로깅/Improving Performance 2021. 10. 30. 01:00
💡 해당 글은 React의 SSR인 Next.js 프레임워크에 의존하여 작성된 글입니다. 그러나 전체적인 맥락과 핵심 내용을 이해하시는 데는 큰 문제는 없습니다. 프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까? 지금까지 이런 지식 없이도 개발은 잘만 해왔고, 왠지 앞으로도 굳이 필요 없을 것 같긴 한데.. 브라우저 동작원리에 대해 상세하게 다루는 블로그 글과 영상은..
-
Next.js 12 업데이트 사항 정리개발 블로깅/Next.js 2021. 10. 28. 22:13
너무나 빠른 Next.js의 업데이트.. 저번에 Next.11이 발표된 지 2,3달 정도밖에 안 된 것 같은데, 벌써 12가 발표라니.. 거두절미하고 새롭게 업데이트된 사항에 대해 빠르게 알아가 보도록 하자. 목차 프레임워크에서 사용하던 컴파일러를 Rust 컴파일러로 대체함 : 프로젝트 빌드 속도 증가, 새로고침 속도 증가. 미들웨어 : 서버 단에서 미들웨어 처리가 가능한 기능 추가. React 18 지원 : React 18 버전을 지원. AVIF 지원 : webP보다 20% 압출률이 더 좋은 AVIF 포맷 지원. 봇 인식 ISR 폴백 : Google Bot 등의 웹 크롤러에 최적화된 SEO 동작 관련 내용. 네이티브 ES 모듈 지원 : 표준화된 모듈 시스템과의 연계. URL 가져오기 : 모든 URL에서..
-
Next.js Hydrate를 최적화 시킬 수 있을까 (Partial Hydration)개발 블로깅/Next.js 2021. 8. 12. 21:46
요즘 SEO 향상을 위해서 웹 성능 개선을 계속해서 연구 중이다. (흔히 웹 성능 최적화시킬 수 있는 요소들은 거의 다 진행한 것 같으면서도, 신기하게도 할 것이 계속 나온다...) 요즘에는 프론트엔드 단에서 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 어떻게 더 개선시킬 수 있을지 연구 중인데, 며칠 전 Performance 탭에서 흥미로운 요소를 발견했다. 위 이미지의 하단 쪽을 보면, FP(First Paint)가 일어나기 전까지 Next.js Hytration 작업이 Long Task로 보여지는 것이다. (정확히는 Next.js-before-Hydration이니까, 실제 Hydration 하기 전의 특정 작업으로 볼 수 있다.) 우선 Hyd..
-
Next.js의 Hydrate란?개발 블로깅/Next.js 2021. 8. 8. 23:00
Next.js 프레임워크의 동작원리를 제대로 파악하고 있는 개발자라면 Hydrate에 대해선 이미 익숙한 용어일 것이다. 그러나 Next.js의 주요 동작 방식 중 하나임에도, 눈에 잘 띄지 않아 놓치기도 쉬운 개념인 만큼, 한번 제대로 정리를 하고 넘어가보려고 한다. Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다. 이 과정이 왜 필요한지 간략하게 설명하기 위해, 우선 React에 대해 잠깐 얘기해보자. React의 웹 페이지 구성 원리 React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있다. 그래서 실제 HTML 코드는 안에 내용..
-
Next.js Version 11 업데이트 사항 정리개발 블로깅/Next.js 2021. 6. 19. 16:58
21년 6월 16일에 Vercel에서 Next.js의 버전11 업데이트된 사항에 대해 공개했다. perfomance 최적화 이런건 물론이고(?), Conformance랑, Image 최적화 관련, Webpack5 관련 요소들이 새롭게 업데이트 됐다..🙌 Next.js가 갈수록 SEO 전용 프레임워크로 거듭나는 것 같다. 웹 바이탈(Web vital) 개선 요소들을 계속해서 공략해 나아가는 느낌이다. 업데이트 사항 Conformance: 최적의 UX를 제공할 수 있는 최적화된 솔루션을 제공하는 시스템 Improved Performance: Cold Start up Time(Next.js 빌드 및 실행할 때 걸리는 시간?) 최적화. `next/script`: 성능 향상을 위한 third-party 우선순위 ..
-
[2021.06.11] Production Environment에서 SourceMap 보안 이슈 해결개발 블로깅/오늘의 TIL 2021. 6. 11. 19:07
내가 직접 작업하는 프로젝트에 Build 후 Production 환경에 업로드 시 Source map File이 함께 올라가는 이슈가 있었다. 원래 Production 환경에 소스코드를 배포할 때, Webpack Build를 통해 기존 코드를 Uglify하게 만들어 업로드를 한다. 그러나 Source Map 파일이 Production 환경에 같이 올라가면, Source Map 파일을 통해 Uglify JS 파일들이 기존에 어떻게 작성되어있는지 트래킹이 가능하게 되어버리는 보안 이슈가 발생한다. 이러한 기존 코드를 파악하지 못하도록 일반적으로는 Source Map을 따로 업로드를 하지 않는 것이 권장된다. Next.js 환경에서는 Production Build 시에는 Source Map File을 생성하지..