[TIL] React.js와 Next.js의 차이점 - Library vs Framework, CSR vs SSR

💡 TIL 20230815

라이브러리 vs 프레임워크, CSR vs SSR

---

1. 라이브러리(React) vs 프레임워크(Next.js)

React에서는 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있다.

 

1) 📚 라이브러리

React는 JavaScript Library

• 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임
• 응용 프로그램이 라이브러리를 사용한다.
• 개발자로서 사용하는 것

 

2) 🛠️ 프레임워크

Next.js는 React Framework

• 코드를 작성하는 기본 틀을 제공하여 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경
• 응용 프로그램은 프레임워크에 의해 사용된다.
• 개발자가 코드를 불러오는 것
• 코드를 적절한 위치에 잘 적기만 한다면 framework는 내가 쓴 코드를 불러와서 동작하게 만들어줌
• 기본적으로 지어진 집같은 개념으로, 코드를 적절하게 넣어주면서 집을 완성시키는 것이지만, 집 자체를 수정할 수는 없다(=framework 자체를 수정할 수는 없다).

 

 

---

2. CSR vs SSR

유저, 브라우저, 서버를 나누어서 생각하면 이해하기 쉽다.

 

1) 🖥️ CSR

Client Side Rendering - React.js

여기서 말하는 클라이언트는 '브라우저'를 뜻한다.

즉, 유저가 보는 UI를 만드는 모든 과정을 브라우저가 한다.

1. 유저가 브라우저를 통해 앱에 접속하면,
2. 앱은 브라우저에게 자바스크립트 정보가 들어있는 빈 HTML 문서를 전달한다. 즉 브라우저에게 자바스크립트 파일을 전달한다.
3. 브라우저는 JS 파일을 다운로드하고, 동시에 유저는 빈 화면(접속에 대한 응답)을 보게 된다.
4. 브라우저에서 JS 파일의 다운로드가 끝나면, 리액트 코드가 있는 JS 파일을 실행한다.
5. 브라우저에 있는 리액트 코드가 UI를 렌더링한다. (동적 렌더링)
6. 유저는 앱이 보여주고자 했던 화면을 볼 수 있게 된다.

 

2) 🔙 SSR

Server Side Rendering - Next.js

서버에서 UI를 구성한 후 유저에게 응답해 화면을 보여준다.

1. 유저가 브라우저를 통해 앱에 접속하면,
2. 서버에서 리액트를 실행한다.
3. 리액트가 실행되면, 리액트는 UI를 렌더링한다.
4. 렌더링 된 결과를 통해 브라우저에게 HTML을 제공한다. 이 때 유저는 앱의 초기화면(접속에 대한 응답)을 보게 된다.
5. 이후 브라우저는 리액트 코드가 있는 JS 파일을 다운받고 실행시킨다. 이 때부터는 일반적인 리액트 앱과 같이 CSR의 동작(동적 렌더링)을 하게 되고, 이 과정을 hydration이라고 한다.

hydration의 과정을 다시 정리하면,

• next.js는 react.js를 백엔드에서 동작시켜서 페이지를 미리 만들어서 컴포넌트들을 렌더링한다.
• 렌더링이 끝나면 HTML이 되고 next.js는 그 HTML을 페이지의 소스코드에 넣어준다.
• 그럼 유저는 JS와 react.js가 로딩되지 않았더라도 컨텐츠를 볼 수 있다.
• 그 후에 react.js가 로딩되었을 때, 먼저 존재하는 소스코드들과 연결 되어서 일반적인 react.js 앱이 되는 것이다.

hydration 과정에 대해서는 아래 블로그에서 너무나도 자세히 설명되어있어 참고하면 좋을듯 하다.
Next.js의 렌더링 과정(Hydrate) 알아보기

 

 

---

참고 사이트

[NextJS] NextJS 시작하기 - 2. React.js와 Next.js의 차이점 (framework vs. library, CSR vs. SSR)