Next.js

리액트에서 페이지가 넘어가는 것 처럼 보이는 것은 사실 페이지가 실제로 넘어가는 것이 아닌, 하나의 페이지에 컴포넌트만 변경되는 것이다.
Next.js는 빠른 페이지 로드를 위한 코드 스플리팅이 가능하고, SSR을 페이지 단위로 지원한다.
리액트로 UI를 구축한 후, Next.js의 기능을 통해 추가적인 기능(UX 경험 개선, SSR 지원 등)과 최적화를 시킬 수 있다.

Next는 CSR과 SSR의 단점을 보완하기 위한 리액트 기반 프레임워크이다.
사전 렌더링을 통한 빠른 페이지 로드와 검색 엔진 최적화, 라우팅 시스템, 내장 CSS 및 Sass 지원 등의 다양한 장점을 가지고 있다.
보통은 Next하면 SEO에 좋다. 라는 내용으로 잘 알려져 있다.

CSR

CSR 방식은 브라우저가 어떤 요청을 하든 하나의 html, css, js만 내려보내주게 된다.
화면은 보이지만 데이터가 없는 상태이다.
즉, 브라우저에는 현재 데이터가 없는 상태이기 때문에 프론트단에서 로딩창 같은 것을 띄우고 있게 될 것이다.
그 상태에서 한번 더 브라우저가 요청을 보내는데 이번에는 백엔드 서버에 요청을 보내서 백엔드 서버가 DB에서 실제 데이터(게시글 등)를 가져온 후 바로 백엔드 서버에서 브라우저로 넘겨주게 된다.
이때 로딩창이 없어지고, 백엔드 서버에서 받은 데이터를 화면에 띄우게 된다.
이 방식이 vue나 react와 같은 SPA가 구동하는 방식이다.
페이지 로딩으로 인해 검색 엔진 최적화(SEO)가 좋지 않다.

SSR

전통적인 방식. 브라우저가 페이지를 요청하면 프론트 서버에서 백엔드 서버에 데이터를 달라고 요청하고 백엔드에서 받아온 데이터를 html과 데이터를 합쳐서 브라우저로 보내주게된다. (완성된 페이지를 브라우저에 보여줌)

CSR과 SSR의 장단점

• SSR은 화면이 한번에 그려진다는 장점이 있지만, 사용자가 버튼 클릭 등의 행위를 하더라도 반응이 즉각적이지 않을 수 있다.
• CSR은 로딩창을 통해 유저 이탈을 막을 수도 있다. (화면이 3초 이상 나타나지 않으면 유저가 이탈할 수도 있는데, 로딩창이라도 띄워주면 이탈을 막을 수도 있다.)
• CSR은 사용자가 빠른 인터랙션이 필요할 때 좋지만, 모든 페이지를 다 불러와야 하므로 오히려 느려질 수 있다. 또, 검색엔진(SEO)을 고려해야 한다면 SSR이 더 적합하다.

Next를 쓸 필요 없는 서비스는 무엇이 있을까?
코드 스플리팅, 서버 사이드 렌더링이 필요없는 페이지인 어드민 페이지와 같은 경우엔 굳이 next.js 를 쓰지 않아도 된다.

---

참고 자료
제로초 노드버드 Next.js 역할 소개
next.js 기본 개념 알아보기
Next.js 공식문서