본문 바로가기

Programming/Next.js11

[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.
[Next.js] 4가지 주요 렌더링 기법 1. CSR(Client Side Rendering)2. SSG (Static Site Rendering)3. ISR (Incremental Static Regeneration)4. SSR (Server Side Rendering) 2024. 9. 30.
[Next.js] Page Router vs App Router 2024. 9. 28.
[Next.js]Next.js 1. Next.jsHigh-Quality 웹 어플리케이션을 만들 수 있는 웹을 위한 React Framework 2. Next.js의 장점1. SSR, SSG, ISG -> 사용자 입장에서 초기 로드 시간 단축 , 코드 스플리팅, 이미지 최적화까지 다 해줌2. Search Engine Optimization -> 서버 사이드 렌더링을 통해 웹 페이지가 초기 로드 시 완전히 렌더링 되므로,위와 일맥상통 하는 것이지만, 검색 엔진이 쉽게 콘텐츠를 인덱싱 할 수 있다. 정적 사이트 생성으로 미리 생성된 html파일을 제공하고, seo 성능 극대화3.개발자 경험 - 자동 코드 분할, 핫 리로딩, 타입스크립트 지원, API 라우트 지원 -> 백엔드와의 통합을 쉽게-> 환경 설정이 적다 4. 확장성과 유연성서버리스.. 2024. 9. 28.

티스토리툴바