2024-04-16 TIL

NextJS 기본 컴포넌트

NextJS는 컴포넌트를 생성하면 서버 컴포넌트로 작용한다.

그 증거로 console.log를 찍어보면 브라우저 console에 찍히는 것이 아닌 서버가 실행 중인 터미널에서 찍힌다.

폴더구조 기반 라우팅 (보호파일명)

폴더구조 기반 라우팅이 가능하며, 내부에서 작동하는 파일명에 따라 next가 자동으로 역할을 부여할 수 있다.

layout, error, loading 등이 있다

a태그를 사용한 라우팅 시 문제점 (feat. ssr, csr, spa)

ssr 환경에서 a태그로 페이지 이동 시, 새로고침이 일어나면서 다시 서버에서 html 파일을 받기 위해 서버로 요청을 보내게 되는데 이 때, 불필요한 깜빡거림이나 데이터 재요청으로 인해 유저경험을 해칠 수 있다.

 

csr인 리액트에서는 초기 렌더링 시, 이미 html과 js 파일이 넘어와 있는 상태이기 때문에, 불필요한 깜빡거림처럼 유저경험을 해치는 일이 없이 클라이언트 사이드에서 필요한 내용만 업데이트하기 때문에 SPA로 동작하여 유저경험에 대한 문제가 없었다.

 

이처럼 기본적으로는 ssr 방식을 사용하면 SPA 으로 동작할 수 없지만 NextJS는 초기 페이지 렌더링은 ssr 방식을 사용하고, 그 후 페이지 내부에서는 csr 방식을 혼합해서 사용하는 Univasal Redering 방식을 채택하여 SPA로 동작한다.
 

첫 접속을 했을 때는 서버로부터 렌더링 된 파일을 받아서 보여주지만, 그 이후로 페이지 내부에서 라우팅되는 것은 클라이언트 사이드에서 UI를 업데이트 한다. 하지만 라우팅을 a 태그로 하게 되면 클라이언트 사이트에서 UI를 업데이트하지 못하고 위와 같은 문제가 발생하는데 이 문제를 해결하기 위해서 next 내장 Link 컴포넌트를 사용해 라우팅이 이루어지면 페이지를 이탈하지 않고 spa 처럼 동작한다.

 

원리는 Link 태그 클릭 시, 서버에서 보낸 파일을 바로 렌더링하지 않고 클라이언트 사이드로 보낸 후, 클라이언트 사이드 자바스크립트 코드가 처리하는 방식으로 진행된다.

RootLayout의 metadata

root layout 파일 내부에 있는 metadata는 이름이 정해져있고, metadata의 내용에 따라 html head가 생성된다.

rootLayout 컴포넌트는 서버 컴포넌트이기 때문에 동적으로 metadata를 구성할 수 있고, 동적으로 html head의 내용이 생성되기 때문에 SEO 적용에 용이하다.

페이지 별로도 metadata를 통해 SEO를 적용할 수 있는데 이 때, 우선 순위는 하단과 같다.

page.tsx > 중첩 레이아웃 > root layout