Next JS React 차이 Server와 Client html 렌더링 차이

nextjs와 react를 접하면서 차이점이 난해하지만,
근본적인 차이점이 있다면 서버와 클라이언트 차이일 것이다.

nextjs는 서버 사이드 렌더링을 통해 웹페이지에 데이터를 표현하다면,
react는 클라이언트 사이트 렌더링을 통해 웹페이지에 데이터를 표현한다.

이렇게 작성하니 더 난해해지긴 하지만, 쉽게 풀어보면 다음과 같다.

웹브라우저의 기준에서 nextjs는 정적이고, react는 동적이다.

Next JS React 차이
Server와 Client html 렌더링 차이

react를 겪으며, 그냥 놀라운 점이 한가지가 아닌데, html 렌더링에 따라 차이가 있다.

html를 렌더링하는데 Server 또는 Client에서 하는 차이가 될 것이다.

서버 사이드 렌더링 SSR과 클라이언트 사이드 렌더링 CSR의 개념은 이미 이전부터 있었다.

SpringBoot3의 경우 tymeleaf를 통해 SSR을 구현할 수 있다.

MVC5는 자체 html 렌더링으로 SSR을 구현할 수 있다.

SSR을 사용함으로써 SEO에 유리하다는 얘기도 있다.

( 이것은 곧 서버에서 html를 렌더링하는 것이 검색엔진의 크롤링과 색인작업에 유리할 수 있다는 예상이 든다. )

거참 거창할 따름이다.

Server, Client 렌더링을 언급하기 전에 NextJS와 React에 대해 간단히 언급해 본다.

NextJS란? 웹개발 프레임워크

뭐가 됐든 프레임워크가 있다면 개발이 조금은 편해진다.

react를 공부했더니 NextJS가 나타났다.

그냥, 웹개발을 위한 프레임워크이다. 정도로만 파악하고 있을 뿐이지만, 순수한 react를 사용하는 것보다 수월하단 생각이 들었다.

뭔가, 좀 귀찮은 작업들을 안해도 되는 그런 것들 ??

그래서 정확한 개념을 찾아보았다.

NextJS 홈페이지에 접속해 보면 알 수 있는데,
React 기반의 웹프레임워크란 것을 알 수 있다.

굳이 React가 있는데도 웹프레임워크를 사용하는 이유는 여러가지가 있겠지만,
커뮤니티를 통해 알아본 결과 개발 편의성이 많이 개선되고 업그레이드 되었다는 점에 있다.

NextJS 슬로건

NextJS가 무엇인지 조금 더 상세한 정보를 알아보았다.

NextJS란 React 기반의 웹을 개발하고 서비스를 가능하게 한다.
리액트 기반 오픈소스 웹 개발 애플리케이션이며,
NodeJS 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다.
서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등이 가능하다.

자세한 안내서를 볼 수 있도록 공식홈페이지를 연결해 본다.

 

Getting Started: Installation | Next.js

React란? 사용자 UI 자바스크립트 라이브러리

React를 처음 접했을 때는 난해한 점이 한두개가 아니었다.

조금 익숙해지니 뭔가 비슷한 느낌을 받았다.

MVC5와 개발하는 과정이 비슷하달까?

콤포넌트 기반으로 화면을 구성하고 Route를 이용하여 URL을 관리한다.

일단, 이정도는 비슷해 보이지만, MVC5와 다른 점은 React는 순수 자바스크립트 기반이란 점에 있다.

MVC5 또한 콤포넌트 개발이 가능하지만, 어디까지나 서버 렌더링을 기본으로 하고 있지만,
React는 자바스크립트로써 개발이 가능하다.

이런 점에 있어 React와 MVC5는 비슷한 면이 있지만, 다른 것이라 볼 수 있다.

하지만, 정작 큰 개념으로 React는 사용자 인터페이스를 위한 자바스크립트 라이브러리란 점이다.
그렇기 때문에 React 개발은 자바스크립트를 기본으로 한다.

React가 UI 자바스크립트 라이브러리라고 하지만, 일반적인 자바스크립트가 아닌 콤포넌트 코드 구조는 공부가 필요한 부분이다.

React가 무엇인지는 이정도만 알고 지나가자.
겪다보면 참 번거롭기도 하고, 편하기도 하고, 뭔가 친해지기 어렵다고나 할까.

결론은
React 는 그냥 사용자 인터페이스 자바스크립트 라이브러리 ( User Interface Javascript Library )란 점이다.

SSR / CSR 렌더링 : Server / Client - Side Rendering

웹은 예전부터 존재했지만 지금처럼 발전하지 않은 상태였다.

비동기상태에서 웹페이지의 부분적인 렌더링은 고민의 대상이었고, AJAX 덕분에 어느정도 해소되었다.
지금에 이르러 웹의 개발적, 서비스적인 안정화는 거의 완성단계인 느낌.

그렇다보니 나오게 된 개념이 html 렌더링 개념이다.

html 렌더링은 웹브라우저에서 보여주는 html 문서를 어디에서 만들고 웹브라우저에 전달하는가에 있다.

여기서 구분되는 것이 SSR과 CSR이 있다.
이것을 영어로 풀면 다음과 같다.

• SSR : Server-Side Rendering
  • 서버에서 html를 생성하고 클라이언트에 전달하고 웹브라우저에서 html을 표시한다.
• CSR : Client-Side Rendering
  • 클라이언트에서 html를 생성하고 웹브라우저에서 html을 표시한다.

별것아닌 개념같지만, html을 생성하는 위치가 서버 또는 클라이언트 어디에 있는가에 따라 웹브라우저의 성능에도 영향이 미친다.

결과적으론 사람은 3초를 넘어가면 참을성이 점차 줄어드는 효과가 있기에 이런 점들을 고민하고 렌더링 시점을 결정하는 것도 방법이다.