Next.js을 사용하는 기업이 날로 늘고 있다. 왜 Next.js의 인기가 많은지 이해하고, 장점을 이해해보도록 하자.

Next.js

리액트 기반의 프레임워크로 React(SPA)의 단점을 커버해 주는 역할을 의미합니다.

SPA

---

장점

1. SPA는 사이트에 접속할 때 하나의 페이지를 불러옵니다.
   • 하나의 페이지에는 모든 JS 파일이 포함됩니다.
2. SPA는 페이지를 이동하게 되면, 받아온 파일을 이용하여 UI를 변화시키고, 필요한 데이터는 서버에서 JSON 파일로 받아와 UI를 빠르게 변화시킬 수 있습니다.
   • 빠른 변화를 가져올 수 있어 사용자 경험에 좋습니다.

단점

1. 처음 페이지를 불러올 때 모든 코드를 불러와야 하기 때문에 시간이 오래 걸립니다. = 초기 로딩속도 느림
2. 빠른 검색 엔진 최적화(SEO) 에 좋지 않습니다.

⇒ SSR 방법으로 이 단점을 해결할 수 있습니다.

---

SSR

---

1. 사이트에 접속할때 렌더링된 html을 불러오게 됩니다.
2. JS 파일을 불러올 때까지 반응을 하지 않지만, 빠르게 화면을 보이게 할수는 있습니다.
3. 페이지 이동 시 새로운 페이지를 요청하기 때문에 화면이 깜빡입니다.
4. 템플릿을 중복해서 로딩하여 서버에 부담을 줍니다.

Next.js 기능

---

1. 서버 사이드 렌더링
   • Next.js 는 빌드시에 모든 페이지를 미리 렌더링 합니다.
     • 처음 페이지를 불러올 때 사용자에게 빠르게 보이게 됩니다.
     • 미리 렌더링 되어 SEO(빠른 검색 엔진 최적화) 에도 좋습니다.
   • HTML을 불러온 후에는 최소한의 JS 코드를 불러와 페이지를 사용합니다
     • 서버의 데이터를 필요로 하는 페이지는 요청 시에 SSR을 통해 HTML을 생성합니다.
2. HOT Code Reloading을 지원합니다.
   • 코드가 저장되면 프로그램을 다시 로드합니다.
3. 자동 코드 분할
   • 자동 코드 분할 기능으로 불필요한 코드가 페이지에 로드되지 않습니다.
4. TypeScript가 내장되어 있습니다.
5. router 기능이 내장되어 있습니다.
   • 파일 시스템 기반 라우팅을 사용함으로, 폴더의 경로에 따라 페이지의 경로가 설정됩니다.
6. styled-jsx 를 지원합니다.