Next.js 13 - 0. Next.js 란 무엇인가?

Next.js - React 기능을 기반으로 한 Full Stack Web Application Framework

• Web Application - 웹앱을 만드는 도구라는 의미이다.
• Framework - 웹앱을 만드는 데 필요한 큰 틀은 Next.js가 이미 만들어뒀고 규칙에 맞게 코드를 작성하면 준수한 웹앱이 만들어진다는 의미이다.
• Full Stack - 프론트엔드, 백엔드 기능을 모두 가지고 있다. (프론트엔드 - React, 백엔드 - Express.js와 비슷한 형식의 시스템) -> React와 백엔드를 통합하기 위해 복잡하고 부자연스러운 과정 거치지 않아도 된다.

---

SSR

Next.js는 기본적으로 SSR을 지원한다.

JS 기반의 애플리케이션은 JS로 동작하기 때문에 JS를 다운로드한 후에 브라우저에서 JS가 실행되어야 화면에 UI가 표시된다. JS가 동작하지 않는 환경에서는 화면이 표시되지 않기 때문에 검색엔진과 같은 로봇들이 컨텐츠를 이용할 수 없다. JS를 다운로드하고 실행하기 전까지는 화면이 표시되지 않는 문제가 존재한다. 이를 Client Side Rendering이라고 한다.

 

반면 Server Side Rendering은 서버쪽에서 JS를 실행한다. 브라우저로는 완성된 html을 전송하기 때문에 JS를 실행할 수 없는 환경에서도 잘 동작한다. 따라서 검색엔진 친화적이다. 다운로드 받는 즉시 실행되어 사용자도 즉시 화면을 볼 수 있는 경험이 가능하다.

 

---

Next.js 13

Next.js 13 버전에서는 App router, Server Component 기능 등 다양한 게 추가되었고 앞으로 살펴볼 예정이다.

---

참고자료

생활코딩 - Next.js 13

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩