Next.js 제대로 알고 쓰자

1. SSR vs CSR

그렇다면 SSR과 CSR의 차이점이 어떻게되는지 알아보도록 하겠습니다.

2. Next.js 핵심기능

그렇다면 Next.js에서는 어떠한 기능들을 제공해주는지 알아보도록 하겠습니다.

코드 스플리팅

일반적인 리액트 싱글페이지에서는 초기 렌더링 때 모든 컴포넌트를 내려받습니다. 하지만 규모가 커지고, 용량이 커지면 로딩속도가 지연될 수 있는 문제점이 있습니다. Next는 이러한 문제점을 개선해서 필요에 따라 파일을 불러올 수 있게 여러 개의 파일을 분리하는 코드 스플리팅을 사용하였습니다. 폴더 구조를 보시면 pages 폴더 안에 각 page 즉, 라우트들이 들어가며, Components 폴더에는 React 컴포넌트들이 들어가게 되는데요. 예를 들어, 브라우저가 실행되고, 사용자가 접속을 하게 되면, 첫 페이지인 index page만 불러오게 되고, 그 이후에 다른 페이지로 넘어갔을 때는 해당 페이지만 불러오게 됩니다.

간단한 클라이언트 사이드 라우팅 제공

Next.js는 정말 간편한 라우팅을 제공해줍니다.

커스텀 API 서버 (as - 라우트 마스킹)

Next는 커스텀 서버를 통해서 라우트를 마스킹을 할 수 있습니다.

getInitialProps()

Next의 핵심기능인 getInitialProps 함수를 통해 데이터를 가져올 수 있습니다. 밑에 코드를 보시면 React의 ComponentDidMount 는 렌더링이 두 번 되지만, Next에서는 데이터를 미리 갖고 오기 때문에 한 번에 렌더링이 가능합니다.

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store