Next.js를 공부하기 전에
Next.js
Next.js는 React 로 만드는 서버 사이드 렌더링 프레임워크이다.
간단하게 짚고 가야할 단어가 두 가지 있다.
서버 사이드 렌더링과 프레임워크 이다.
서버 사이드 렌더링(SSR)
일반적인 리액트 프로젝트는 클라이언트 사이드 렌더링(CSR)이다. CSR의 특징은 사용자가 보는 화면을 브라우저가 모두 만든다. 브라우저는 리액트 프로젝트로부터 자바스크립트를 가져와서 브라우저에 화면을 구성한다.
브라우저가 가져온 자바스크립트는 클라이언트 사이드, 즉 사용자가 가진 자바스크립트이며, 브라우저가 이 자바스크립트를 바탕으로 UI를 만든다. 그렇기 때문에 웹 브라우저는 브라우저가 HTML 문서를 가져올 때 텅 빈 <div> 만 최초에 가져온다.
만약 인터넷 속도가 느리다면 아래와 같은 문제가 발생할 수 있다.
사용자가 어떤 웹 페이지를 진입하면 브라우저는 자바스크립트를 불러올 때 까지 텅 빈 <div> 을 가진 HTML 문서를 보여주게 된다. 즉, 사용자는 자바스크립트의 로드 전 까지 흰 화면만 보게 되는 것이다.
서버 사이드 렌더링은 이 문제를 근본적으로 해결할 수 있다.
Next.js로 구현한 코드는 미리 렌더링(Pre-Render)되어 HTML 문서에 담겨진다. 그렇기 때문에 사용자가 웹 페이지에 진입하면 빈 화면에서 기다리지 않고 완성된 HTML 문서로부터 개발자가 의도한 화면을 노출시킬 수 있다.
Next.js 프로젝트에서 개발한 리액트 컴포넌트를 프론트 엔드에서 실행하는 것을 하이드레이션(Hydration)이라 부른다. Next.js는 코드를 이미 HTML로 렌더링한 상태에서 만약 리액트 컴포넌트와 자바스크립트가 로드되지 않았더라도 빈 화면이 아닌 기본 값으로 구성된 페이지를 볼 수 있다. 비로소 자바스크립트의 로드가 완료되었을 때 모든 요소들이 나타나게 되며 이제부터 리액트 앱처럼 작동할 수 있는 것이다.
또 하나의 장점은 위에서 말했듯 온전한 HTML 문서를 가져오기 때문에, HTML 문서의 <head> 영역에 포함되는 다양한 메타 데이터(페이지 상세 소개, 오픈 그래프 등)로 부터 검색 엔진 최적화를 경험할 수 있다.
프레임워크
프레임워크와 라이브러리는 굉장히 혼동되기 쉬운 단어다.
라이브러리는 대표적으로 리액트가 있고, Next.js는 프레임워크이다.
단순하게 비교해보면 자유도의 차이가 있다.
라이브러리는 개발자인 내가 직접 사용하는 것이다. 예를 들면 리액트 라이브러리를 불러와서 이 리액트 라이브러리를 사용하여 웹 앱을 만드는 것이다. 다시 말하자면, 리액트는 내가 원하는 이름으로 라우팅을 할 수 있고, 여러가지 컴포넌트들도 내 마음대로 만들 수 있다. 이 자유도는 오직 개발자인 나에게만 있다. 리액트는 라이브러리이다.
프레임워크는 코드를 불러오는 것이다. 내가 작성한 코드를 적절한 위치에 잘 적기만 하면 프레임워크는 내 모든 코드를 불러와서 보여준다. 프레임워크는 이 적절한 위치에 따라 내 코드가 노출되는지 되지 않는지 갈리게 된다. 예를 들면 집과 같다. 집은 이사를 가기 전 까진 빈 집이다. 그러나 거실, 화장실, 욕조, 베란다, 현관 등 이미 환경은 만들어져 있다. 화장실에 컴퓨터가 있어선 안되고, 현관에 침대가 있어선 안되는 것 처럼 정해진 규칙에 따른 적절한 위치에 나의 코드를 넣어야 프레임워크가 이를 보여주게 된다. 그래서 라이브러리보다 비교적 자유도가 낮은 것이다.
Next.js는 create-next-app 으로 프로젝트를 생성하게 되면 이미 어느정도 구색이 갖춰진 프로젝트 폴더를 확인할 수 있다. 내가 만든 웹 페이지를 라우팅을 포함하여 노출시키려면 export 한 파일을 프로젝트의 page 폴더에 노출시키면 끝이다. 라우팅은 파일의 이름으로 생성되며, 그 파일의 이름이 페이지의 URL이 된다.
또한 Next.js는 404 페이지도 이미 프로젝트를 생성할 때 부터 갖고 있으며, 이를 커스텀할 수 있다.
리액트에선 react router dom 을 설치해야 하고, 새로운 404 페이지를 만들어야 하는 등 많은 작업이 필요한데 이를 생략할 수 있는 것이다.
새로운 프로젝트를 시작하면서 본격적으로 Typescript 와 Next.js를 공부하고 있다. 리액트와 자바스크립트에 너무나도 익숙해져 조금 부침이 있지만 공부하는 과정에서 위와 같은 정보들을 알게 되면서 점점 재미가 붙고 있다.
하루 빨리 체화해서 능숙하게 다루고 싶다.
References
