Main Feature
Next.js의 대표적인 장점
웹 프론트엔드 개발에서 높은 점유율을 가지고 있는 React 는 CSR(Client Side Rendering) 방식으로 동작한다.
이 동작 방법은 장점과 동시에 여러 가지 단점을 가지고 있다.
그래서 대부분의 프론트엔드 개발자들은 CSR, SSR 방식의 장점만을 유지하는 Next.js 를 사용한다.
Next.js 의 대표적인 장점은 SSR(Server Side Rendering) 과 SEO(Search Engine Optimization) 최적화이다.
하지만 프로젝트를 진행하면서 위와 같은 장점을 사용하지 않는다면 굳이 Next.js 를 사용해야될 필요가 있을까? 라는 궁금증이 생겼다.
그래서 본 포스팅은 이러한 궁금증을 해결하기 위한 목적으로 작성되었다.
우선 Next.js 대표적인 장점 SSR, SEO 는 다음과 같다.
Server Side Rendering
SSR 이란 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링하는 방식을 의미합니다.
여기서
렌더링(Rendering)이란HTML,CSS,JAVASCRIPT...등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미
SSR 의 초기 화면 동작 과정은 다음과 같다.
- 사용자는 최초 홈페이지에 접속하여 브라우저에 요청
- 클라이언트는 이를 확인하고 서버로 요청
- 서버에서 데이터를 포함한 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달
- 전달받은 클라이언트에서 스크립트가 실행되어 최종적인 화면을 브라우저에 페인팅
초기 화면 이후 페이지 이동, 동작 과정은 다음과 같다.
- 브라우저에서 클라이언트로 요청
- 요청 정보를 서버로 재요청
- 처리 완료 후 클라이언트로 응답
- 클라이언트는 브라우저로 처리된 사항 다시 페인팅
Search Engine Optimization
검색엔진 최적화는 웹 사이트 결과를 검색 엔진에게 더 잘보이도록 최적화하는 것을 의미한다.
CSR 을 이용하면 검색 엔진 봇이 초기 HTML을 빈페이지로 인식하여 데이터 수집이 어렵다고 판단해 검색 엔진 노출이 어렵다.
반면 Next.js 는 pre-rendering 방식으로 동작하기 때문에 HTML, CSS, JavaScript 로 만들어진 HTML 을 제공하여 SEO 문제를 해결한다.
pre-rendering이란 서버에서JavaScript로HTML컨텐츠를 채운 뒤 완성된 파일을 클라이언트에게 전달하는 과정을 의미
Other Feature
SSR,SEO를 제외한Next.js의 장점
Automatic Routing
Next.js 는 /pages 폴더를 제공하여 컴포넌트를 export 하면 폴더명이 페이지 Route 되는 직관적인 페이지 기반 라우팅 시스템을 제공한다.
http://localhost:3000 http://localhost:3000/account http://localhost:3000/friends
반면 React 는 다음과 같이 라우터의 필요하다.
<Switch>
<Route path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/friends" component={Friends} />
</Switch> Automatic Code Splitting
Next.js 는 Import 된 리소스를 분석하여, Automatic Code Splitting 을 사용해 로딩 페이지의 필수적인 .JS 파일만을 로드한다.
Code Splitting이란 페이지에서 반드시 필요한Javascript, 라이브러리를 렌더링 하는 과정으로 모든번들(Chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 효율적으로JavaScript로딩 시간을 개선할 수 있다.
그래서 첫 페이지 로딩 속도가 빠르며, 이후에 사용되는 .JS 파일들만을 클라이언트로 전달한다.
단, 사이트에서 절반 이상 자주 사용되는 .JS 파일은 main JS bundle로 이동된다.
Dynamic Import 를 이용한 Code Splitting 적용 방법은 다음과 같다.
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => 'Loading...',
})
export default function Home() {
return <DynamicHeader />
}Hot Code Reloading
Hot Loading 은 개발 환경과 관련된 Next.js 의 장점으로, 개발자가 코드를 수정하면 새로고침 과정이 생략되고 변경된 부분만 적용되는 기능이다.
React 에서도 제공하는 기능이지만, 선택적으로 부가적인 기능을 위해 react-hot-loader 라이브러리, react-hot-loader 라는 webpack 플러그인을 사용한다.
Conclusion
위에서 설명한 장점외에도 Single File Components, Ecosystem Compatibility, Dynamic Components, Prefetching, Static Exports, TypeScript Support...등의 있지만 Next.js만의 고유한 장점은 아닌 것 같다.
해당 포스팅을 통해 SSR, SEO 를 제외한 Next.js 의 장점을 공부하며 사용해볼 수 있었다.
그 결과 굳이 이 장점들을 위해 사용할 필요성을 느끼지 못했다.
하지만 사용하지 않을 이유로도 느껴지지 않았다.
그래서 앞으로는 위의 장점들을 어떻게 프로젝트에 녹일 수 있을지 고민해봐야겠다.
참고 자료
