Next JS가 뭔데? 먹는건가?

nutella_bro·2022년 5월 11일
2

Next JS

목록 보기
1/1

NEXT JS

우선 Next JS에 대해 설명을 하기 전, React를 모르는 리.알.못 이라면 스크롤을 내리기 전에 당장 유튜브에 가서 리액트 완강을 조지고 와야 이해가 빠를것이다.

Next JS는 기본적으로 리액트를 사용하여 개발할때, 더 편리하고 빠르게 개발을 할 수 있도록 도와주는 일종의 프레임워크이다.

일반 순수 리액트와 크게 다른점은, SSR 지원, 자동 Routing, 그리고 폴더 구조가 정해져 있다는 점이 있다.

👀 그래서 그걸 왜 씀?

사람들 그리고 더 나아가 기업들이 Next JS를 많이 선택하는 이유는 (내 개인적인 생각이다) SSR과 어느정도 틀이 잡혀있는 폴더 구조 때문일것이다.

리액트를 쓰면서 가장 불편했던 점 중에 하나가, SSR이 아니기 때문에, 초기 로딩 속도나 SEO, 즉 검색엔진 최적화가 안된다는 점일것이다.

또한, 사람마다 그리고 기업마다 다양한 폴더 구조를 사용하기 때문에, 프로젝트가 커지거나 협업을 하여 작업을 하게 된다면 혼란이 생길 수 도 있다.

이 외에도 다양한 이유가 있지만, 이번 포스트는 Next의 입문자분들을 위한 글이기 때문에, 일부는 생략하도록 하겠다.

🤔 SSR이 뭔데?

우선 SSR에 관한 개념을 알기 전에, MPA, SPA, CSR, SSR에 대해서 알아야 한다.

위에서 말한 MPA, SPA, CSR, SSR은 웹사이트의 구동 방식이다.

더 자세한 설명을 하기에 앞서, 알아야할 필수 정보들이 있다.

MPA는 SSR 방식으로 화면을 렌더 시키고, SPA는 CSR 방식으로 페이지를 렌더 시킨다.

MPA (Multi Page Application)

MPA(Multi Page Application)은 이름에서도 알 수 있듯이, 여러 페이지로 구성된 웹사이트를 말한다.

새로운 페이지를 띄우거나, 유저 인터렉션에 대응하여 새로운 섹션을 추가하거나 변경해야한다면, 서버로 요청을 보내, 새로운 파일들을 받아와 웹사이트 전체를 새롭게 렌더하는 방식이다.

MPA의 구동 방식은:

  1. Client에서 Server로 현재 화면에 필요한 파일들을 요청한다.
  2. Server는 해당 파일들을 반환하고, Client는 전달받은 파일 그대로 출력한다.
  3. 유저 Interaction / 페이지 Navigation이 발생한다.
  4. Client에서 새로운 파일들을 요청한다.
  5. Server는 해당 파일들을 다시 새롭게 반환한다.
  6. Client는 웹사이트 전체를 새로 렌더링하여 새롭게 전달받은 파일들을 출력한다.

SPA (Single Page Application)

SPA(Single Page Application)는 웹사이트의 모든 페이지를 하나의 페이지에 담아 화면을 바꿔가면서 특정 영역(컴포넌트)만 새롭게 전달받아 보여주는 방식이다.

SPA는 첫 진입시, 웹사이트 전체 페이지를 로드 시킨 이후, Ajax를 이용하여 필요한 부분만 새롭게 그려나간다.

SPA의 구동 방식은:

  1. 첫 로딩시 Client에서 Server로 요청을 날린다.
  2. Server는 웹사이트 전체 문서를 보내고 Client는 전달 받은 문서를 렌더 시킨다.
  3. 유저 interaction / 페이지 navigation이 발생한다.
  4. Client에서 Ajax를 사용하여 새로운 영역에 필요한 파일 및 섹션을 요청한다.
  5. Server는 전체 문서가 아닌 필요한 일부 부분들만 전달한다.
  6. Client는 새롭게 받은 영역들을 기존 파일에 bind하여 렌더 시켜준다.

CSR (Client Side Rendering)

클라이언트 사이드 렌더링은 말 그래도 Client단에서 렌더링을 하는 방식이다.

보통 Client에서 렌더링을 할 경우에는, 브라우저에서 자바스크립트를 사용하여 HTML 문서를 렌더링 한다.

React를 이전에 사용 해봤다면, 단 하나의 index.js 파일만 서버에서 전달 받는것을 확인할 수 있다.

이와 같이, 단 하나의 자바스크립트 파일을 초기 렌더때 불러와, 인터렉션이 일어나거나, 새로운 페이지가 필요할때 전체 페이지를 다시 불러오는 방식이 아니라, 필요한 부분들만 컴포넌트 별로 업데이트가 된다. React에서 새로운 페이지 렌더시, 전체 웹사이트가 Reloading이 되지 않는이유이다.

즉, Client단에서 렌더링을 하게 된다면 매번 Server와 상호작용 하는것이 아닌, Client에서 모든 업데이트가 처리 된다는 것이다.

CSR과 SSR 둘다 장단점이 확실하지만, CSR은 초기 렌더가 느린 대신, Navigating 속도나 인터렉션 응답이 빠른 편이다.

SSR (Server Side Rendering)

서버 사이드 렌더링은 앞서 살펴본 Client Side Rendering과 다르게, 서버에서 파일들을 받아와 Client 단에서는 단순히 출력만 하는 방식이다.

SSR이 구동하는 방식은 아래와 같다.

Client는 우선 현재 경로에 해당하는 페이지를 띄우기 위하여, 서버로 해당 파일과 리소스들을 요청한다.

Server는 완전한 HTML 파일, JS 파일, CSS 파일 등 여러 리소스를 전달하고, Client단 브라우저는 전달 받은 파일들을 유저가 보고 있는 화면에 출력을 한다.

또한, 페이지 Navigating 및 각종 인터렉션이 발생하면, 필요한 파일과 리소스들을 서버에 요청을 하여 다시 렌더 시킨다.

React와는 다르게, 현재 해당하는 페이지만 전달 받아, 브라우저에서는 단순히 출력을 한다. 브라우저는 매번 Server에 현재 경로의 파일들을 요청하기 때문에, 초기 렌더시에는 매우 빠르지만, 파일의 크기 및 인터넷 속도 등 여러가지 변수에 따라 로딩 속도가 영향을 받는다.

🌐 자동 Routing

기존 React 개발을 해보신 분들이라면 다 아는 사실이지만, React에서는 router 관련 패키지를 따로 설치하여, 직접 router 설정을 해줘야만 했었다. 가장 흔히 쓰이는 React-navigation과 React-router을 설치하여, 각각의 경로에 해당하는 파일들을 매칭시켜 정의를 했어야만 라우팅이 가능했다.

하지만, 놀랍게도 Next JS에서는 파일 혹은 폴더명만 지정을 하면 자동으로 라우팅 처리를 해준다!!

이것은 Next의 폴더 구조와도 깊은 연관이 있다. Next 서버가 내 코드를 읽고 자동으로 Routing 설정 등 많은 것들을 해줘야 하기 때문에, 개발자들은 정해진 패턴으로 코드를 짜야했고, 이로 인해서 Next의 폴더 구조가 확립이 된것이다.

위에 보이는것과 같이, Pages 밑에 폴더 혹은 파일명만 지정을 하면, 그 이름에 맞게 라우터를 자동으로 설정해준다. 이것은 기존 퓨어 React를 사용하여 개발을 하시는 분이라면 신세계일 것이다.

이렇게 되면, 나중에 프로젝트가 커졌을 경우나, 협업을 해야할 일이 생기면, 프로젝트의 구조나 파일들을 더욱 쉽게 찾고 수정이 가능해진다. 즉, 장기적인 측면에서는 유지보수가 훨씬 쉬워진것이다.

💭 개인적인 후기

우선 React를 사용하던 입장으로서, 사실 새로운 프레임워크로 갈아탄다는것은 꽤나 부담이 되는 일이였다.

익숙하지 않은 프레임워크로 작업을 하게 되면, 적응을 하는 기간도 있을것이고, 무엇보다도 익숙하지 않기 때문에 개발 속도가 현저히 줄어들것이다.

위와 같은 이유 때문에 스택을 교체하는것이 조금 꺼려지던 것은 사실이다.

하지만, Next를 사용함으로 인해서, 너무 당연한것들이 당연해지지 않았다. 예를 들면 라우터를 설정하는 것과, React Helmet을 사용하여 SEO 작업을 하는것 등등, 삶의 질이 훨씬 올라갔다.

물론 SSR이 무조건적으로 좋은것은 아니다. 예를 들어, 소규모 프로젝트를 할때에는 때때로 CSR 방식을 사용중인 React를 써야할 경우가 있다. 이것은 사실 사람마다 그리고 상황마다 케바케이기 때문에 여러 가지 스택을 경험해보고 진행중인 프로젝트나 앞으로 진행할 프로젝트들을 개발할때 가장 적합한 방식을 사용하는것이 옳다.

나와 같이 귀차니즘에 쩔어 익숨함을 고집하지 않고, 여러분들은 더 좋은 스택을 경험했으면 한다.

profile
Front-end Developer

0개의 댓글