[Next.js] 리액트로 만드는 서버사이드 랜더링!
Next.JS
Next.js 는 React로 서버사이드랜더링 (SSR)을 구현할 수 있는 라이브러리이다. 프론트엔드 생태계에서 아주 큰 지분을 차지하고 있는 Vercel이라는 회사에서 만들었고, 리액트에서 권고하는 툴체인 중 하나로 언급되는 툴이다. Next.JS 는 Node.js 환경에서 서버사이드 렌더링이 되는 웹사이트를 빌드할 때의 해결책으로 권고된다.
SSR 의 장점
서버사이드 랜더링의 장점으로는 SEO최적화와, 초기 랜더링 속도의 상승을 꼽을 수 있다. React로 만들어진 SPA 웹사이트의 특성상 자바스크립트(React 코드) 가 화면에 랜더링 되기 전까지는 아무것도 보이지 않는 흰 화면만 보이게된다. 서버로부터 완전한 자바스크립트 파일을 다 받아오기 전까지 화면이 표시되지 않기때문인데, 이는 UX 측면에서 좋지않다.
흰 화면이 표시되는 이유는 초기에 불러들이는 HTML 파일이 텅 비어있기 때문이다. 실제로 React 로 빌드한 앱의 HTML파일을 보면Root라는 ID를 가진 비어있는 파일만 보게된다.
이는 SEO에 문제를 유발하는데 구글, 네이버와 같은 검색엔진(의 봇)은 웹이라는 바다를 떠돌아다니면서 자신들의 검색사이트에 보여줄 정보를 찾아다닌다. 컴퓨터 프로그램이다보니 이들은 정보를 눈으로 보고 식별하는게 아닌, 코드와 컨텐츠의 문자를 보며 돌아다니는데 초기에 랜더링되는 정보가 비어있다보니 아무것도 보여줄 것이 없다고 판단하고 떠나버리는 것이다.
Next.js 프로젝트생성
Next.js 프로젝트 (설정들이 갖추어진 보일러플레이트)를 생성하는 방법은 간단하다 패키지 매니저를 이용해 생성하면 되는데
npx create-next-appyarn create next-app
Next.js 는 Typescript 또한 지원한다. typescript 를 이용해서 프로젝트를 생성하고싶다면 타입스크립트를 이용하는 프로젝트를 생성한다고 알려주면된다.
npx create next-app --typescriptyarn create next-app --typescript
next.js 를 성공적으로 설치했다면 위와같은 폴더 구성을 볼 수 있다. React를 기반으로 하기 때문에 리액트에서 했던 것처럼 개발을 진행하면 되는데 몇가지 다른점 들이있다.
바로 복잡한 라우팅을 직접 설정해줄 필요 없이 파일기반의 라우팅을 지원한다는 것이다. app을 생성하면 pages 폴더에 index.js(혹은 tsx) 와 _app.tsx 가 생성된 것을 볼 수 있는데, index.js 파일은 웹사이트의 Root 파일이 된다. 즉, 홈페이지가 되는것이다.
이 외에도 여러가지 다른점이 있지만, 천천히 배워가도록 해보자