Development/NextJS

Next.js는 SSR(Server Side Rendering)을 쉽게 구현할 수 있는 개발 환경을 제공하는 React의 프레임워크이다.  NextJS가 등장한 이유는 이전 브라우저의 동작방식을 보면 알수있다. 과거의 대부분 웹사이트들은 SSR과 MPA(Multi Page Application) 방식으로 동작해왔었다  하지만  페이지 이동 시에 깜빡거리는 현상과 같은 문제들로 인해 사용자 경험이 좋지 못했고 스마트폰의 시대가 도래하면서 앱과 같은 사용성 측면에서 수요가 커져갔다. 이런 시기에 AJAX와 jQuery가 등장했고 커뮤니티에서도 많이 사용되면서 클라이언트에서 비동기적으로 JSON 형태의 데이터만을 서버에 요청하고 받아와서 사용자에게 데이터와 함께 웹 페이지를 보여주는 방식이 대세가 되었다. 하..

Next 13 이후에 바뀐 점app router / pages router 두 가지로 구성되어 있다.app router 도입 이유pages router의 구조상 기존 문제를 개선할 수 없었기에 새로 도입디렉토리 기능공통 레이아웃 기능페이지별 권한 체크 (어드민/로그인 유저 등) → app router 미들 웨어로 가능react 18 버전 사용 → 서버 컴포넌트 적극 활용 서버 컴포넌트란?next 서버에서 리액트를 미리 렌더링해서 프론트 혹은 브라우저, 클라언트로 데이터를 보내줄 때 완성된 HTML을 미리 보내주는 것 장점 HTML 로딩 시간, JS 용량 감소단점 Next 서버 자체의 부담 증가 → 이에 따라 ‘캐시’ 적극 활용 Nextjs란?React 위에서 돌아가는 프레임워크React는 라이브러리로써 ..