전체 글153 [Next.js]Next.js의 Caching next.js는 상당히 복잡한 캐싱 전략을 가지고 있다. next.js에서는 대부분의 영역에서 fetch 함수를 기반으로 캐싱을 한다.-> next.js에서의 fetch는 우리가 흔히 아는 브라우저의 fetch와는 비슷하면서도 다르다.-> 브라우저의 fetch api를 기반으로 nxt.js에서 확장하여 만든 새로운 next.js만의 fetch api이기 때문 1. Full Route Cache 빌드 시점에 페이지를 렌더링하고 그 결과를 캐싱(저장)이를 통해 서버는 매 요청마다 페이지를 다시 렌더링 할 필요없이, 미리 생성된 html과데이터에 빠르게 접근할 수 있기에 -> 페이지 로딩 속도 향상 이 과정에서 next.js는 react api를 활용하여 렌더링 작업을 수행.1-1 React Server Co.. 2024. 10. 7. [Server Problem Solve]서버가 아주 맛탱이가 가버렸다. 최근들어 혼자 운영중인 개인서버의 오류가 급증한다. 어떤 오류인지 로그도 확인하고, 디스크 용량도 확인하고 , mapper가 잘못되었는지, 아니면 서비스 내부 로그도 다 확인했는데 문제는 각 problem들이 각각 다른 원인을 가리키고 있다. 원인이 다양할 수도 있고, 몇가지 원인이 추측이 될 뿐.. 2024. 10. 3. [Next.js]Next.js의 Deep Dive priority, placeholder, blurDataURL을 활용 가능하다. 2024. 10. 2. [Next.js] Next.js의 Image 동작원리 딥 다이브 Next.js의 Image태그 이미지 최적화는 정말 편하고, 편하면서도 복잡하기도 하지만 우리가 명심해야할 것은Next.js의 이미지 최적화는 마법이 아니다. 추가적인 리소스를 사용하여 빠르게 보이게 하는 것이다. Next.js의 이미지 최적화를 이용하게 되면, 이미지를 다운 받을 때 변환도 하고, 저장도 해놓는다.유저가 웹 사이트에 접속 시 저장한 해당 이미지를 보여주도록 하는 것https://github.com/vercel/next.js/blob/canary/packages/next/src/server/image-optimizer.ts next.js/packages/next/src/server/image-optimizer.ts at canary · vercel/next.jsThe React Frame.. 2024. 10. 2. [Next.js]Next.js의 ASSET 최적화 했을 때와 안했을 때의 time difference 1. Asset 최적화를 했을 때 import Image from "next/image"; Image className="rounded-sm object-scale-down" width={80} height={80} src={product.images} alt={product.title} />Nextconfig 내 remotePatterns등의 설정 /** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false, images: { remotePatterns: [ { .. 2024. 10. 2. [Next.js] Loading UI 간단히 Loading UI에 대하여 학습한 내용을 간결하게 정리하고자 한다. 2. Loading UINext.js 14의 App Router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능 사용자가 웹 애플리케이션을 사용할 때 비동기 작업이 완료될 때까지 기다려야 하는 상황에서 유용2-1 Loading UI는 왜 중요한가? 1. 사용자 경험 개선 : 로딩 중인 상태를 명확히 표시하지 않으면 ,사용자 입장에서는 현재 어떤 상황이 일어나는지 알 겨를이 없기 때문에, 이는 웹사이트를 이용하는 클라이언트의 입장에서는 불안감과 , 사용자 경험을 하락시킨다.이러한 요인은 불필요한 클릭, 페이지 이탈 가능성을 높인다. 이러한 상황에 Loading UI 를 적절히 활용하게 될 경우 사용자 유.. 2024. 10. 1. 이전 1 ··· 5 6 7 8 9 10 11 ··· 26 다음
