✍배우게 된 계기

약 1년 반 전부터 열심히 웹에 대해 배우기 시작했고 최근에는 React를 열심히 배우고 있었다. 그러다가 다른 프레임워크에도 관심이 생겨 찾아보게 된 것이 바로 Next.js였다.

Next.js?

넥스트는 버샐(vercel)에서 만든 리액트 기반의 프레임워크로 개발자에게 뛰어난 생산성과 편의성을 제공한다. 리액트 기반이기 때문에 리액트에 관한 지식이 필요하다.

넥스트를 사용하는 이유? (리액트의 단점)

• 페이지를 불러올때 모든 자바스크립트 파일을 한번에 불러옴 (⏰시간이 오래걸림)
• 검색 엔진 최적화(SEO)에 좋지 못함

✅ 해결법: 서버 사이드 렌더링(SSR)을 사용하면 해결됨.

서버 사이드 렌더링(SSR)?

장점

• 사이트에 접속시 렌덩링된 html을 불러온다. → 반응X but, 속도가 빨라보임
• 검색 엔진 봇에 렌더링 된 html을 제공하여 SEO에 좋음

단점

• 페이지 이동 시 새로운 페이지를 요청하기 때문에 이동 시에 깜빡임이 존재
• 페이지 이동시 템플릿을 중복해서 로딩하고 SSR이 서버에 부담을 주기 때문에 성능↓

그래서 넥스트는?

넥스트는 SPA(리액트)와 SSR(서버 사이드 렌더링)의 단점을 해결하기 위해서 리액트(SPA)에 서버 사이드 렌더링 기능을 더하여 두가지 장점을 모두 합쳤다.

넥스트의 특징

1. 사전 렌더링 및 서버 사이드 렌더링

넥스트는 빌드 시에 모든 페이지를 미리 렌더링 한다. 이렇게 만든 HTML은 사용자에게 빠르게 보일뿐 아니라 SEO에도 좋다. 또 HTML을 불러온 후에는 페이지에 필요한 최소한의 JS만 불러오기 때문에 React보다 빠르다. 서버의 데이터를 필요로 하는 페이지에 대해서는 요청 시에는 SSR을 통하여 HTML을 생성한다.

2. Hot Code Reloading 지원

Next 개발 환경에서는 코드가 변경되면 응용 프로그램을 자동으로 다시 로드한다. (React에서도 지원하는 기능이다)

3. 자동 코드 분할

이 기능 덕분에 모든 코드가 번들로 묶여 페이지와 함께 제공되고 그로 인해 불필요한 코드가 로드되지 않는다.

4. 🔨No Config

넥스트는 기본적으로 웹팩과 바벨을 이용한 설정이 다 되어있기 때문에 빠르게 개발을 시작할 수 있다.

5. Typescript 내장

넥스트는 타입스크립트에 관한 설정을 따로 할 필요가 없으며 타입스크립트를 잘 지원하고 있다.

6. 📂파일기반 라우트

넥스트에서는 파일 시스템 기반 라우팅을 사용하기 때문에 폴더의 경로의 따라 페이지의 경로가 설정되어 빠르고 관리가 편하다는 장점이 있다. (하지만 가장 적응하기 어려웠다.)

👍느낀점

이런식으로 넥스트를 알아가다 보니 왜 그렇게 많은 회사들이(Netflix, Uber등)이 넥스트를 선택했는지 알것 같았고 넥스트와 더 친해지기 위해 다음 프로젝트는 넥스트로 진행해 봐야겠다.