Next.js 사용하는 이유
1.NextJs는 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서 자바스크립트를 로딩하는 시간이 줄어들게 된다.
2. 클라이언트 사이드 랜더링의 경우 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에 첫 로딩 시간도 오래걸리고 SEO에 취약하다. 하지만 NextJs인 서버 사이드 랜더링의 경우 pre-rendering을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, SEO에서도 강점을 나타낸다.
dynamic Routes(동적 라우팅)
- 미리 정의된 URL이 아니라 사용자가 접근한 경로 또는 특정 값에 따라 동적으로 변화하는 주소를 의미한다.
- 단일 페이지, 하나의 컴포넌트를 사용하여 변화하는 데이터를 수용할 수 있는 페이지를 제작할 수 있다.
이런식으로 대괄호 안에 작성하면 각각의 유저이름이 들어간 페이지를 만들 수 있다.
Link
페이지 컴포넌트 간의 연결을 위해 사용한다.
a 태그를 생성하여 웹 사이트가 크롤링될 수 있고 따라서 SEO에 적합하다.
페이지를 다시 로드하지 않고 SPA가 동작하는 것처럼 보이게 만든다.
JS가 로드된 상태에서 선택된 페이지에 필요한 내용만 추가적으로 가져온다.
Next.Js에서는 a태그는 새로고침을 유발하므로 때문에 필요하지 않은 JS 파일까지 불러와 Link 컴포넌트를 사용하는 것이 더 좋다.
useRouter
현재 페이지의 라우터 정보를 가져올 수 있게 해주는 기능 이 Hook을 사용하면 현재 페이지의 URL, 쿼리 파라미터, 라우트 매개변수 등과 같은 라우터 정보에 접근할 수 있다.
useRouter를 사용하여 현재 페이지의 라우터 정보를 가져와서 해당 정보를 기반으로 동적으로 컴포넌트를 렌더링하거나 상태를 업데이트 하는 등 다양한 작업 수행 가능
useRouter를 콘솔창에 찍었을 때 이렇게 사용할 수 있는 메소드들이 나옵니다.
.push()와 .replace() 의 차이점
주소가 localhost:3000 -> localhost:3000/login -> localhost:3000/i/flow/login 으로 들어갔을 때 .push()는 이전에 주소값을 지워서 뒤로가기 했을 때 localhost:3000으로 가지만 .replace()는 뒤로가기 했을때 localhost:3000/login으로 갑니다.
