본문 바로가기

Next

(4)

Next.js Image 알아보기 Next.js에서는 이미지에 대한 최적화를 기본으로 제공한다 Next.js를 쓰지 않았을 때는 Lazy loading등 성능을 위해 고려해야할 사항이 많았는데 Next.js에서는 기본으로 제공을 해준다고한다. 한번 살펴보면서 공부해보자 Image 컴포넌트에 내장된 최적화는 아래와 같다 향상된 성능 - 최신 이미지 형식을 사용하며 각 디바이스에 맞는 올바른 크기의 이미지를 제공한다 시각적 안정성 - 자동으로 CLS (Cumulative Layout Shift) 를 방지해준다 빠른 페이지 로드 - 이미지가 뷰포트에 들어 왔을 때만 로드되기 때문에 초기 페이지 로드 속도가 빠르다 유연한 에셋 - 외부에 저장된 이미지의 경우에도 크기 조정이 가능 필수 props src 정적으로 가져온 이미지 파일 외부 URL ..

Next.js의 Pre-rendering Next.js는 모든 페이지를 Pre-rendering한다 즉, Next.js는 클라이언트측의 자바스크립트가 로드되기 전에 미리 HTML을 생성한다 Pre-rendering은 더 나은 성능과 SEO에 최적화 되어 있다. Static Generation , Server-side Rendering Next.js에는 Static Generation, Server-side Rendering 두가지 형태의 Pre-rendering 방식을 제공한다 두가지 Rendering 방식의 차이점은 페이지에 대한 HTML을 언제 생성 하느냐에 따른 차이이다. Static Generation - HTML은 빌드 시 생성되며 사용자 요청에 따라 재사용된다. Server-side Rendering - HTML은 사용자 요청마다 생..

Next.js의 _app과 _document 알아보기 Next.js에는 _document, _app 두개의 기본 페이지가 있다 _app, _document는 프로젝트에 공통적으로 적용 되어야할 내용들을 작성해야한다. App App 컴포넌트는 앱이 시작할 때 가장 먼저 호출되는 컴포넌트이다. 프로젝트의 글로벌 작업들을 수행하기에 적합한 컴포넌트이다 예시 페이지 변경 시에도 레이아웃과 상태값을 유지 componentDidCatch를 통한 에러 핸들링 페이지에 추가 데이터 삽입 Global CSS 추가 Header, Footer와 같은 공통 레이아웃 추가 const App = ({ Component, pageProps }) => { return ( ); }; export default App; 기본적인 _app 컴포넌트의 구조이며 props로 Component와..

Next.js 알아보기 Next.js의 개념에 대해 알아보는 글 최근에 알게 된 정보들을 정리하는 느낌으로 작성해보려 한다 Next.js는 vercel 팀에서 만든 React Framework이다. 서버사이드 렌더링을 함으로 얻는 이득 ? CSR의 단점 CSR의 경우 모든 JS 파일을 로드한 이후에 사용자가 웹을 보게 된다 → 즉 JS 파일을 로드하기 전 까지 사용자는 많은 시간을 대기해야 한다 👉 서버사이드 렌더링 즉 서버에서 자바스크립트를 로딩하고 유저가 볼 수 있는 html (미리 데이터가 렌더링된 페이지)을 볼 수 있기 때문에 유저가 페이지를 확인하는 시간을 단축 시킬 수 있다. CSR의 단점 SEO - CSR의 경우 자바스크립트가 로드 되지 않은 경우 웹페이지를 볼 수 없다 -> 비어있는 (index.html) 구글 ..

이전 1 다음

티스토리툴바