Next.js Vs React 둘은 무엇일까?

React, Next.js 서론

React, Next.js를 들어 보았는가?

프론트엔드 개발자를 지향한다면 React, Next.js 둘 중 하나는 꼭 들어봤을 것이다. 이 둘은 프론트엔드를 하는데 안 들어봤다면 공부를 안 한 것이다. 사실 React, Next.js는 그냥 개발 도구라고 생각하면 된다. 

 

React 로고

React 란 무엇인가? 

사용자 인터페이스를 만들기 위한 라이브러리가 바로 React 이다.

단어를 한번 풀고 넘어가자

 

사용자 인터페이스 : 사용자 인터페이스(UI)는 사용자가 어떻게 시스템 또는 소프트웨어와 상호 작용하는지를 나타내는 것

라이브러리 : 다양한 기능을 제공하고 코드를 구성하는 데 도움을 주는 코드 모음

 

한마디로 정리하자면 우리가 웹브라우저에 띄우는 모든 것을 담당하는 것을 React라고 할 수 있다.

 

 

 

 

next.js 로고

Next.js 란?

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크 라고 한다.

리액트에는 없는 서버 사이드 렌더링 server-side rendering(SSR), 정적 사이트 생성 static site generation(SSG), 증분 정적 재생성 incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공

 

여기서도 단어를 해석해 보자

프레임 워크 : 새로운 애플리케이션을 보다 효율적으로 개발할 수 있도록 하는 재사용 가능한 소프트웨어 구성 요소의 모음

서버사이드 렌더링 SSR : 새로운 애플리케이션을 보다 효율적으로 개발할 수 있도록 하는 재사용 가능한 소프트웨어 구성 요소의 모음  

 

 

Next.js 속 React

사실 Next.js는 React가 이미 포함되어 있다. 

그렇기 때문에 react를 공부했다면 자연스럽게 Next.js로 넘어갈 수 있다. 

CSR vs SSR

SSR 과 CSR

둘을 사용해 봤다면 SSR이냐 CSR이냐 이 두 가지 말을 많이 들어봤을 것이다. 이 둘을 정리하자면

 

SSR은 Server Side Rendering이라는 단어의 약자로

서버에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. 

 

그럼 CSR은 무엇이냐?  Client Side Rendering이라는 단어의 약자로 

SSR과 다르게 클라이언트에서 렌더링이 일어나며 서버 측에서 HTML과 JS를 받아서 웹브라우저에서 렌더링이 된다.

 

 

자그러면 React는 CSR이며 Next.js는 SSR 기술이 사용되는데 둘의 차이를 하나 공부한 셈이다.

 

 

조금 더 자세히 설명해 보겠다.

 

CSR(client Side Rendering)

 

CSR 실행 순서

자 간단하게 정리를 해보자

 

1. User가 웹사이트를 클릭한다.

2. 그럼 Html 파일과 Js 링크를 클라이언트로 보내준다.

3. 클라이언트에 전달되는 순간 렌더링 준비가 되어있어 HTML은 즉시 렌더링된다.

-> 위 경우 사이트 자체조작이 불가능하게 된다.

4. 클라이언트가 Js링크를 받을걸 열어 JS를 다운로드한다.

5. 다운로드하여지고 있는 사이에 유저는 콘텐츠를 볼 수 있지만 사이트를 조작할 수 없다.

-> 이때 사용자 조작을 기억하고 있는다.

-> 짧은 시간이라 유저는 거의 인지하지 못한다.

6. 브라우저가 js 프레임워크를 실행한다.

7. js가 성공적으로 실행되면 기억하고 있던 사용자 조작이 실행되고 웹페이지는 상호작용 가능한 상태가 된다.

 

위과정이 CSR 과정이다.

자 여기서 외우자. CSR은 React에서 사용하는 기술이다.

 

이 정도까지 떠먹여 줬으면 외워야 한다. 

 

자 이과정의 특징은 뭘까?

서버에서는 그냥 코드 덩어리를 보내주고 그 작업을 내 컴퓨터에서 하게 되니 당연히 모든 작업을 하기 전까지는 우리는 웹 페이지를 볼 수가 없다.

 

 

 

 

SSR (Server Side Rendering)

SSR 실행 순서

1. 유저가 웹사이트를 클릭한다

2. CSR과 달리 즉시 렌더링 가능한 HTML 파일을 제작한다.

3. 클라이언트에 전달되면 이미 렌더링 준비가 되어있어 HTML이 즉시 렌더링된다.

4. 클라이언트가 JS를 다운로드한다

5. 다운로드하는 사이에 유저는 콘텐츠를 볼 수 있지만 사이트를 조작할 수는 없다.

-> 이때 사용자가 조작한 것을 기억한다.

6. 브라우저가 JS 프레임워크를 실행한다.

7. JS가 실행되면 기억하고 있던 사용자 조작이 실행된다. 

-> 이때 웹페이지는 상호작용이 가능한 상태가 된다.

 

SSR의 특징은 뭘까?

서버에서 렌더 한 상태로 클라이언트에 전달되기 때문에 JS가 다운로드되는 동안 사용자는 미리 볼 수 있다. 

 

 

 

 

CSR vs SSR 차이

1. CSR 보다 SSR이 로딩 속도가 빠르다.

CSR을 사용한 네이버 블로그 로딩속도

 

위의 이미지는 CSR기술이 사용된 기존 네이버 블로그이다. 

페이지가 노출되는 과정을 시간순으로 찍은 스크린 샷인데. 

 

SSR을 사용할 경우 서버에서 렌더링이 된 이후 HTML을 보내주기 때문에 렌더링속도가 훨씬 빨라지게 된다.

 

 

2. SSR은 서버의 자원을 더 잡아먹는다.

서버에 요청할 때마다 무조건적으로 요청을 하기 때문에 당연히 자원을 잡아먹을 수밖에 없다.