next.js 14v 정리

next.js의 기본적인 렌더링 방식에 대한 이해

예전 page router 방식을 사용하던 next.js에서 app router 방식을 도입한 이유를 알기 위해서는 기존 page router 방식을 제대로 이해하고 있어야 그 이유에 대해 납득할 수 있다는 생각에 정리겸 아직 사용해보지 못한 기술들에 대해 정리하고자

Next.js 에서 제공하는 렌더링 기법중 SSR이 유명하지만, 웹사이트의 성능을 최적화 하는데는 SSG, ISR의 기법이 중요하다고 생각한다. 이는 서버에서 웹 페이지에 대한 요청을 하지 않고 프로젝트의 빌드타임에서 HTML파일이 생성되고 페이지를 요청할 시 서버를

page기반의 router 단점.페이지별 레이아웃 설정이 번거롭다데이터 페칭이 페이지 컴포넌트에 집중된다불필요한 컴포넌트들도 JS번들에 포함된다1의 내용:매번 레이아웃이 필요한 페이지에 Page.getLayout 이라는 것을 만들어 호출해야하기 때문이다.app rout

app router 버전의 페이지 라우팅 방식은 기존 page router 버전과 파일이름 작성 기능이 동일하지만, 몇가지 추가된 개념과 파일 네이밍이 존재한다.참고로 page.tsx, layout.tsx 는 예약어이다.app router 에서 이러한 구조를 가지고 있

서버 컴포넌트란? 요즘 react, next.js 에서 대두되는 서버 컴포넌트에 대한 개념을 정리하기 전에 왜 이런 컴포넌트들이 생기게 되었는지 알 필요가 있다. 먼저 이전에 page 라우터 버전의 next.js의 문제에서 서버 컴포넌트가 생긴 이유를 알 수 있다.

기존 page router 방식에서 pre-fetching이 일어나는 것은 페이지가 이동 가능성이 있는 페이지의 데이터를 미리 가져오는 것인데, 여기서 JS번들파일을 가져오고,app router 의 경우에는 RSC payload가 추가적으로 받아지게 된다. JS번들에는

next.js의 데이터 캐시는 api호출을 통해 불러온 데이터를 Next 서버에서 보관하는 기능이다영구적으로 데이터를 보관하거나, 특정 시간을 주기로 갱신시키는 것도 가능하다이 기능으로 불필요한 데이터 요청 수를 줄일 수 있다.fetch()를 사용해서만 가능Next.j

풀 라우트 캐시(full route cache)Next.js 서버에서 빌드타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능이다순서를 간단하게 그림으로 표현하면,이러한 방식으로 flow가 있으며, 기존 page router의 SSG 방식과 유사하다.static page만

next.js에서 지원하는 에러 핸들링에 대한 error.tsx기능은 매번 try-catch 로 에러 핸들링을 작성해야되는 불편함을 개선하여 나온 것이다.페이지 폴더에 error.tsx 파일을 만들고,이렇게 작성해주면 만약 에러가 났을 경우 page 컴포넌트대신 err

클라이언트에서 특정 form의 제출 이벤트가 발생했을 때, 서버에서만 실행되는 함수를 브라우저가 직접 호출하면서 데이터까지 폼 데이터 형식으로 전달해줄 수 있도록하는 것이다.기존에는 API를 통한 통신이 필요했지만 이러한 방법이 Next.js기능에 추가되었다.요약하면,

기본적으로 SEO 설정에 최적화를 하는 방법들은 여러가지가 있다.sitemap 설정rss 발행시멘틱 태그 설정메타 데이터 설정이중에서 메타 데이터설정에 대해 알아보자.이런식으로 작성할 수 있으며,개발자 도구의 element 탭에서 meta태그가 등록된 것을 확인할 수도