![]()
앱 라우터와 페이지 라우터의 차이점? 왜 앱 라우터를 썼나?Next.js에는 App router와 Page router 두 가지 라우팅 방식이 있다. Page router는 기존의 방식이며, 리액트의 최신 기술인Server Component와 Suspense를 사용할 수 있는 App router가 최근에 등장했다. Next13.4부터 App router가 안정화 되었고 많은 변화가 생겼으며, 아래와 같은 자세한 차이점으로 앱 라우터를 쓰는 것이 좋다는 점을 재발견했다. 1. 라우팅 디렉토리 및 파일Next.js가 파일 기반 라우팅 시스템인 점은 동일하나, 페이지 라우터의 page 디렉토리가 app 디렉토리로 바뀌었으며, _app, _document는 layout.js로 대체되었다. layout.js는 중..
![]()
Next.js? 왜 쓰는 것일까? Next.js는 클라이언트 사이드 렌더링(CSR) 방식인 React를 서버 사이드 렌더링(SSR) 방식으로 구현할 수 있도록 도와주는 프레임워크이다. 리액트를 쓰면서 왜 굳이 또 Next.js 프레임워크를 사용하는 것일까? Next.js를 통해 얻는 가장 큰 장점은, 검색 엔진 최적화(Search Engine Optimization)를 위한 서버 사이드 렌더링(Server Side Rendering)을 가능하게 하기 때문이다. 거기에 프리 렌더링을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로 사용자에게 더 좋은 경험을 주는 점도 Next.js를 사용하는 이유이다. 프리 렌더링은 서버 사이드 렌더링(SSR) 뿐만 아니라 정적 사이트 생성(SSG)으로도 ..
