.png)
해당 게시글은 Next.js에 대한 설명과 특징에 대해 다룹니다.
SSR?
next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현해 주기 위한 프레임 워크 입니다. 여기서 SSR(Server Side Rendering)에 대해 간단히 설명 하자면 사용자가 웹페이지에 접근할때 view와 html과 같은 리소스를 서버딴에서 렌더링 시켜주는 작업을 말합니다. 외부 서버를 통한 data fetch 또한 ssr을 통해서 진행 시킬 수 있죠
여기서 주의할 점은 view에 관한 rendering을 front 측 서버에서 시켜주기 때문에 서버 사이드 렌더링이지 실제 데이터베이스와 연동하여 작업되는 서버는 별도라고 생각하셔야 합니다. 물론 next.js같은 경우 next 자체 어플리케이션에서 express와 같은 nodejs 서버를 구축 할 수는 있지만 이것 자체를 서버 사이드 렌더링이라고 생각하시면 안됩니다.
SSR의 특징으로는 다음과 같은 것들이 있습니다.
- 초기 로딩 속도가 빠르다.
- 모든 검색 엔진에 대한 SEO(검색 엔진 최적화)가 가능하다.
- SSR을 이용한 프로젝트는 복잡해 질 수 있다.
- 서버에 매번 요청을 보내기 때문에 서버에 대한 과부화가 커진다.
초기 로딩 속도가 빠르다.
SSR의 경우 view를 서버에서 렌더링 해서 가져오기 때문에 초기 로딩 속도가 빠릅니다.
하지만, 페이지 이동과 같은 이벤트가 일어날때 마다 api를 호출시키고 렌더링 하기 때문에 csr과 같은 매끄러운 사용자 경험을 주기는 힘들다는 한계(화면 깜빡임 등)가 있습니다. 때문에 next.js에서는 ssr, csr를 적절히 사용할 수 있도록 해야 합니다.
모든 검색 엔진에 대한 SEO(검색 엔진 최적화)가 가능하다.
SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화를 말합니다.
검색 엔진 최적화는 검색 엔진에 우리 서비스를 노출 시키는 전략을 이야기 하기도 합니다. ssr이 seo 장점이 있다는 이유를 간략히 설명하자면 기존에 CSR을 비교해 봤을때, CSR은 초기에 한번만 로딩 된 후에는 모든 DOM이 js로 구현되기 때문에 페이지 이동이 매끄럽고 사용자 경험을 개선할 수 있습니다. 하지만, 중요한 점은 검색 엔진의 웹 크롤러들 모두가 js 언어를 아는 것이 아니기에 seo 측면에서는 단점을 가지고 있습니다. 하지만 SSR에 경우 html css javascript를 서버 사이드에서 렌더링 시키고 반환 자체는 html 문서로 하기 때문에 seo 최적화에 대해 장점을 가지고 있다고 할 수 있지요.
SSR을 이용한 프로젝트는 복잡해 질 수 있다.
SSR을 사용해 React와 같은 프로젝트를 구현 할 경우 프로젝트의 복잡도가 높아질 수 있습니다. 단순히 렌더링만 시켜주는 작업을 할경우에는 큰문제가 되지 않지만 리덕스, 리액트 라우터와 같은 라이브러리와 함께 연동하면서 서버에서 데이터를 가져올 경우에는 복잡해 질 수 있습니다.
서버에 매번 요청을 보내기 때문에 서버에 대한 과부화가 커진다
SSR은 매번 요청할 때마다 새로고침하게 되고 서버 요청을 자주 보내기 때문에 서버에 대한 과부화가 높아지게 됩니다.
Next.js
Next.js가 react에 SSR 작업을 도와주는 프레임워크라는 것을 알았고 SSR에 대해 간단히 알아 보았습니다.
지금부터는 Next.js의 핵심 기능에 대해 알아보겠습니다.
코드 스플리팅
일반적인 리액트 싱글페이지는 초기 렌더링때 모든 컴포넌트를 내려 받습니다. 하지만 이는 프로젝트 규모가 커지고 용량이 커짐에 따라 로딩 속도가 지연 될 수 있습니다. Next.js는 이런 문제를 개선하기 위해 코드 스플리팅 사용했습니다. Next.js의 폴더 구조를 보면 pages 폴더 안에 각 page가 들어 있고 이 page들은 라우트 역할을 합니다. 또, Component에는 React 컴포넌트들이 들어 가게 되는데 예를 들어, 브라우저가 실행되고 처음 사용자가 접속하면 index page가 불러 지고 페이지 이동에 따라 해당 페이지에 관련된 컴포넌트만 불러오게 되는 겁니다.
프로젝트 폴더 구조
|- .next
|- component
| |- Header.js
| |- Footer.js
| |- NavBar.js
|- node_modules
|- libs
|- pages (_)가 붙지 않은 파일은 각각의 파일이 하나의 경로(route)에 매핑되는 페이지에 해당
| |- index.js 경로 /에 해당하는 페이지
| |- question/js 경로 /question에 해당하는 페이지
| |- _error.js / 에러가 났을 경우 처리해주는 페이지 (없을 경우 next.js 기본 값을 사용)
|- public
...간단한 클라이언트 사이드 라우팅 제공
Next.js는 간편한 라우팅을 제공해 주는데, 사용방법은 Router, Link를 모두 import해서 사용할 수 있습니다. 먼저 Link에서는 href, as props가 있는데 href는 해당 페이지로 이동시켜 주는 역할을 하고 as는 href의 URL을 조금더 직관적으로 만들어주는 역할을 해줍니다. Router는 링크와 마찬가리로 해당 페이지로 이동시켜주는 역할을 하는데 개발자에게 제어권을 좀더 넘겨줘서 Redirect도 쉽게 가능합니다. 무엇보다 next.js에서 Link 태그는 csr 방식으로 작동하기 때문에 csr 작동이 필요한 경우 손쉽게 사용할 수 있습니다.
getInitialProps()
getInitialProps() 함수를 통해 데이터를 가져올 수 있습니다. getInitialProps함수를 항상 데이터 fetch에 사용하는 것은 아니지만 주로 데이터 fetch를 위해 사용합니다. getInintalProps는 csr과 비교하여 설명하자면 기존에 csr은 렌더링이 모두 마친 후에 axios를 호출하여 데이터를 가져왔기 때문에 데이터 연산작업이 추가적으로 들어가지만 getInitialProps함수의 경우 view가 렌더링 되기 이전에 미리 서버에 데이터를 fetch하기 때문에 실제 화면을 보여주는 과정에서는 따로 데이터 fetch 작업 없이 렌더링만 시켜주면 되기 때문에 속도가 빨라질 수 있습니다.
