next js 랜더링

리액트와 next.js의 차이점

리액트는 라이브러리이고 넥스트는 프레임워크 입니다.

• 라이브러리 : 소프트웨어의 구성요소 중 한 가지로, API를 기반으로 대상 환경(플랫폼:Linux, macOS, Windows)에서 바로 실행될 수 있도록 모듈화된 프로그램 모음이다. 라이브러리는 혼자서 동작하는 완전한 프로그램이 아닌, 특정한 부분 기능만을 수행하도록 제작된, 컴파일되어 기계어의 형태로 (또는 대상 플랫폼에 따라서는 바이트코드로) 존재하는 프로그램이다. 이 자체로는 사용자가 직접 일반적인 조작으로 실행할 수 없으며, 해당 라이브러리의 기능을 직접 호출하는 프로그램을 실행하거나, 사용자가 해당 라이브러리의 기능을 실행하는 API를 사용하는 프로그램을 직접 개발하면 실행할 수 있다.
  https://namu.wiki/w/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC
• 라이브러리 리액트 : 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다. 이와 더불어 타입스크립트나 Sass 같은 언어도 지원한다. 또한 Next.js 등의 등장으로 인해 SSG, SSR등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.

• 프레임워크 : 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조로, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다.
• 둘의 차이 : 보통 프레임워크라고 하면 여러 기능을 가진 클래스와 라이브러리가 '특정 결과물을 구현하고자' 합쳐진 형태라고 볼 수 있다. 따라서 프레임워크는 라이프 사이클이나 일종의 상태를 가지며 대부분의 프레임워크들은 다양한 기능들을 지원하기 위해 많은 라이브러리들을 가지고 있다. 다만 이 분류법도 예외가 있다.
  메서드 및 클래스화, 즉 모듈화를 하는 이유 중 하나가 재사용성인데, 프레임워크는 이 재사용성을 큰 그룹 단위로 묶어주었다고 보면 된다. 재사용 가능한 수많은 클래스들과 라이브러리들을 융합한 채로 처음부터 제공해 주기 때문에, 여러 개의 표준을 만들지 않아도 돼서 개발자의 피곤함을 덜어준다.
  예를 들어, 웹 프레임워크는 '웹 서버'를 구현하기 위한 목적으로 만들어진 프레임워크다. 웹 서버를 구현하기 위해선 페이지 구현, DB 관리, 유저 인증, API 서버, 라우팅, 사이트맵, 세션 관리 등 여러 기능이 들어있어야할 것이다. 각 기능을 보유한 라이브러리들을 한데 묶어 담은 것이 바로 프레임워크라고 보면 된다.
  현재는 만든사람이 라이브러리라고 하면 라이브러리이고 프레임워크라고 하면 프레임워크로 굳는 분위기 이다.

라고 합니다.
솔직히 위의 내용이 피부로 와닿지는 않습니다만,
리액트에서는 넥스트를 사용할 수 있지만 넥스트는 넥스트 같은 다른 프레임워크를 사용할 수 없다는 차이가 있다고 생각합니다.
리액트도 프레임워크라고 생각했었는데 쉽게 리액트를 처음 셋팅할줄 몰라서 그저 Create-react-app 이런 명령어를 치고 다운을 받았었는데..
이 명령어 또한 프레임워크라는 것을 깨닫고 뭔가 조금이나마 이해하게 된것 같습니다..

아래 넥스트의 랜더링 과정에서 알게된 차이점을 작성했지만 큰 차이점으로는 컴포넌트화 할지 아님 그저 반응형 없는 서버코드로 남고 html만 제공할 지 선택할 수 있게 된 점이라고 생각합니다.

이후 공부하면서 추가적으로 알게되는 내용은 별도 글로 정리해서 작성해보겠습니다.

next.js는 어떻게 랜더링하는가

랜더링이란?
코드를 브라우저가 읽을 수 있도록 일반적인 html 코드로 변환해주는 것을 의미합니다.

next.js의 랜더링 과정을 설명드리겠습니다.

1. next.js는 백엔드에서 우리의 코드를 먼저 랜더링합니다.
모든 컴포넌트를 랜더링하여 interactive한 기능이 전혀 없는 html로 변환시킨 후
사용자의 요청에 따라 html을 먼저 제공합니다.

• 그렇게 되면 리액트와 다르게 사용자의 네트워크 환경이 열악하다 하더라도 html 화면을 볼 수 있게 되는 장점이 있습니다.
  리액트는 아이디가 root인 div 태그 하나만을 두고 자바스크립트가 로딩된 후 모든 페이지가 랜더링됩니다.
  그러기에 자바스크립트가 랜더링 되지 않는 상황에서는 어떤것도 볼 수 없습니다...

2. 파일 최상단에 "use client" 를 적은 파일들만 componet가 hydrete 됩니다.

• 페이지들 중에서 어떤 페이지는 인터렉티브 해야하고 어떤 페이지는 그저 정보제공 페이지가 있을 수 있습니다.
  그러한 페이지들은 "use client" 코드를 작성하지 않음으로 컴포넌트화 시키지 않게되어 불필요한 과정을 생략할 수 있게 됩니다.
  간단한 예시로는 리액트 훅을 사용하게 되면 "use client"를 상단에 작성해야 합니다.
  "use client"를 작성하지 않는 컴포넌트는 위에서 말씀드렸듯이 리액트 컴포넌트화 되지 않습니다.
  이 뜻은 코드가 평범한 html코드로 변환되어 컴포넌트 함수 안에서 db와 소통을 해도 되고 app key를 작성해도 문제가 되지 않습니다
  이 장점은 매우 강력한 장점이라고 생각합니다.

긴 글 읽어주셔서 감사합니다!