-
Next.js - 소개Dev/Next.js 2023. 5. 8. 20:46반응형
Next.js 는 React로 만드는 서버사이드랜더링(SSR) 프레임워크이다.
Next.js를 사용하면 어떠한 장점이 있고, 왜 사용하는 것일까?
우선, 클라이언트 랜더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 이러한 웹을 보게 된다.
그래서 처음(초기 랜더링)에 많은 대기시간을 가지는 문제점이 있다.
또한, SEO(search engine optimization,검색 엔진 최적화) 문제를 발생시킨다. 자바스크립트가 로드되지 않았을 때, 검색엔진이 스캔함으로써 아무 페이지도 걸리지 않게 된다.
Next.js를 사용하게 되면 pre-reloading을 통해 미리 데이터가 랜더링 된 페이지를 가져올 수 있게 해 주므로 사용자에게 더 좋은 경험을 선사한다. 그리고 검색 엔진에 잘 노출될 수 있도록 SEO문제도 해결할 수 있다.
참고로 Next.js는 SSR뿐만 아니라 정적 사이트 생성도 가능하게 해 주며, SSR과 CSR도 혼합하여 사용이 가능하다.
Next.js는 아래와 같은 기능을 제공한다.
- 페이지 기반 라우팅 시스템물론, dynamic route도 지원
- 프로젝트의 루트에서 /pages 폴더에서 컴포넌트를 export 하면 폴더명이 페이지 route가 된다.
- SPA의 장점을 유지
- 첫 페이지를 SSR 방식을 이용하여 처리 한 이후 다른 페이지로 이동할 때부터는 CSR 방식으로 브라우저에서 처리하기 때문에 SPA의 장점을 유지
- 코드 분할 지원
- dynamic import를 이용하여 필요에 따라 구성 요소 또는 모듈을 로드할 수 있도록 하여 초기 로딩 시간이 줄어들어 더 빠르고 반응성이 좋아진다. 이로써 서버 부하 감소 효과 기대
Next.js의 작동 방식은 아래와 같다.
- 초기에 사용자가 서버에 페이지 접속을 요청하면, 기본적으로 서버 측에서 React 코드를 실행한다.
- React.js를 서버 측에서 pre-rendering 하여 html을 생성하고 브라우저에게 보낸다.
- 브라우저에서 React를 사용해 웹 페이지를 완성한다.
다음 장에서는 Next.js 설치 및 기본 동작1편을 유튜브 영상을 바탕으로 간단한 사용법을 알아볼 것입니다 😀
잘못된 부분이나 보완할 점이 있으면 댓글 달아주시면 감사하겠습니다. 😉
반응형'Dev > Next.js' 카테고리의 다른 글
Next.js - 기본 동작 2편 (2) 2023.05.08 Next.js - 설치 및 기본 동작 1편 (0) 2023.05.08