우리가 Next.js를 사용해야 하는 이유

 

안녕하세요 웹 36기 YB 조혜린입니다

이번 합동 세미나 초기 세팅을 하면서 next.js를 접하게 되었는데요...

next.js는 서버랑 관련있는 거니까 저랑은 깊게 관련 없는 줄만 알고 살아왔지만..

프론트엔드 개발 시장에서 next.js 공부가 필요하다는 걸 깨닫고 이번 아티클 주제로 작성하게 되었습니다

---

 

사실 어떤 기술을 공부하던 제일 중요한게

왜 사용했는가?를 알아야 합니다

 

'왜?' 라는 질문에 대한 답변 안에 그 기술의 핵심이 담겨있겠죠?

 

먼저 next.js를 사용하는 이유로 널리 알려진 것은 바로 

next.js의 SSR 방식 지원때문이였습니다.

 

 

렌더링 방식에는 크게 SSR과 CSR이 있는데요

 

요즘 개발의 추구

CSR

Client-side-rendering의 약자로 렌더링이 클라이언트 쪽에서 일어난다는 뜻입니다.

서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 클라이언트를 이것을 받아 렌더링을 시작합니다. 

(react나 vue같은 라이브러리를 사용해서 웹페이지를 유저 브라우저에서 실시간으로 만들어 주는 것)

 

CSR 과정

 

1. 유저가 웹사이트로 요청을 보냄

2. CDN이 HTML, JS 파일로 접근할 수 있는 링크를 클라이언트로 보냄

3. 클라이언트는 HTML과 JS를 다운받는다. ➡️ 이때 유저는 아무것도 볼 수 없음 (CSR이 초기 렌더링이 오래 걸리는 이유!)

4. 브라우저가 JS 다운

5. 다운이 완료된 JS 실행, 데이터를 위한 API가 호출됨

6. 서버가 API로부터 요청에 응답

7. 페이지와 상호작용 가능한 상태로 완성

 

 

CSR 장점

CSR을 사용하면 페이지 전환이 부드러워지고 따라서 예쁜 사이트를 만들 수 있습니다

 

 

CSR 단점

 

1. 구글 검색 노출의 어려움

CSR에서는 초기 HTML에 실제 콘텐츠가 포함되어 있지 않습니다

초기 HTML은 처럼 텅 빈 컨테이너만 있고

콘텐츠는 모두 JavaScript가 실행된 후 렌더링 됩니다 

 

검색 엔진 크롤러는 JavaScript를 완전히 실행하지 못하거나 느리게 처리합니다.

그 결과로 크롤러가 페이지를 방문할 때에는 실제 컨텐츠가 없는  <div id="root"></div> 이런 형태만 보고 떠나기에 검색 결과에 노출되지 않거나 순위가 낮아집니다...

 

2. 첫 페이지의 느린 로딩 속도

서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 
수 있는게 없어서 사용자 입장에서는 웹사이트를 이탈할 가능성이 굉장히 크겠죠?

 

 

사이트 수익성의 문제로 직결

구글 검색 노출이 어렵고 첫 페이지 로딩 속도가 느린 이 두개의 치명적인 단점이 사이트 수익성에 매우 악영향을 끼칩니다..

 

웹사이트의 구글 검색 노출이 낮으니까 트래픽을 잡기 위해 광고비도 많이 들고

그래서 투자대비 수입 지표가 낮아지기에 수익성이 떨어지는 거죠.. ㅠ

 

웹사이트를 만드는 이유가 대부분이 수익성 때문이기에 이 두가지 단점이 굉장히 치명적이였고...

 

이 두가지 단점을 해결할 수 있는 SSR이 요즘 떠오르는겁니다

 

 

---

 

SSR

SSR은 Server-side-rendering의 약자로

html 웹페이지를 서버에서 만든다라고 간단하게 보면 될 것 같습니다.

 

html 웹페이지를 서버에서 미리 다 만든 다음에 보내준다는 개념이기 때문에

유저에게 자바스크립트 코드를 많이 보낼 필요가 없어서 조금 더 가볍고 구글 검색 노출도 CSR에 비해 굉장히 잘됩니다.

 

 

많은 사람들이 next.js는 SSR, CSR 관점에서만 생각하게 되는데 이외에도 많은 것들이 있습니다

어떤 개발자 분은 Next를 SSR, CSR관점에서만 설명할 수 있다면 Next를 아예 잘 모르는 것이나 마찬가지라고...!

 

먼저 next.js의 공식 문서 두고 갑니다

https://nextjs-ko.org/docs

 

 

공식문서에서의 Next.js

공식문서에는 Next.js를 뭐라고 정의할까요?

React framework for building full-stack web applications

Next.js가 단순히 SSR을 제공하는 프레임워크가 아니라 React를 이용해서 웹 애플리케이션을 만들기 위한 프레임 워크임을 나타내고 있다는 것입니다. 

 

그렇다면 여기서 React를 사용하는 것이랑 무엇이 다른가?라는 의문이 들 수 있습니다.

 

 

React의 공식문서에서는 React를 뭐라고 정의할까요?

A Javascript libaray for building user interfaces

React는 UI를 구축하기 위한 자바스크립트 라이브러리라고 합니다.

 

React 자체는 UI 컴포넌트 작성에 중점을 두고 라우팅, 데이터 패칭, 빌드 설정 등 애플케이션 개발에 필요한 다른 부분들은 포함하지 않습니다! 

 

Next는 이처럼 React에서 해결하지 않는 문제점을 해결하기 위해서 필요한 나머지 부분들을 긁어주는 역할을 합니다

 

 

 

Next.js의 기능들

• User Interface - React를 사용하여 UI를 구축
• Routing - 페이지 기반 라우팅(이전버전), app 기반 라우팅을 제공함으로써 간편한 라우팅 설정
• Data Fetching - 서버 측 데이터 패칭, 클라이언트 측 데이터 패칭 등 다양한 패칭 방법을 지원
• Rendering - SSR, SSG, CSR 등 다양한 렌더링 방식을 제공

 

주요 기능들만 여기에 작성하였지만 이외에도 next는 많은 기능을 제공하고 있고,

그 중 하나가 SSR, CSR인 것입니다

 

(면접 질문에서 next.js가 정확히 무엇인지 물어본다면 SSR, CSR뿐만 아니라 다른 것들도 정확하게 이해하고 답변할 수 있도록!)

 

 

---

 

 

next.js를 살짝 맛만 보자면

 

저희가 next.js를 사용하지 않을 때에는 항상 라이브러리를 사용해서 라우팅을 진행하였는데 next.js는 폴더 구조에 따라 라우팅이 됩니다!

여기 있는 코드의 경로는 ➡️ pages/index.js

 

위에 첨부한 사진을 보면 파일의 경로가 pages/index.js인 걸 확인할 수 있습니다.

또한 이 홈페이지의 주소는 localhost:3000인 걸 확인할 수 있죠? 

 

 

이 파일의 경로는 pages/posts/first-post.js입니다.

이 홈페이지의 주소 보이시나요?? localhost:3000/posts/first-post 입니다!

 

이처럼 그냥 파일 구조를 생성했을 뿐인데 주소가 라우팅이 된 것을 확인할 수 있습니다!

(처음에 이거 했을 때 굉장히 신기방기..)

 

---

 

next.js를 쓰면 좋은 부분

- next.js는 풀스택 프레임워크로 next.js로 프론트엔드, 백엔드 전부 다 개발 가능

- react 문법을 그대로 사용 가능

- react 신기술을 그대로 도입하고 있기에 기존 리엑트 개발자들의 쉬운 입문

- CSR(클라이언트 사이드 렌더링)도 자유롭게 가능

 

하지만 장점이 있다면 단점도 있는법..

next.js의 단점은 뭐가 있을까요?

 

 

next.js의 단점

- 폴더 기반 라우팅을 하다보니까 예약 파일이 많아서 프로젝트가 커질 때 파일의 복잡성

- 클라이언트 컴포넌트랑 서버 컴포넌트를 구분해서 코드를 작성해야 O

- 그래서 컴포넌트.js 파일 엄청 많아짐..

 

- 전반적으로 프레임자체가 풍부한 서버 기능이 있지 X (html 렌더링 하나만을 잘 하는 느낌이지만 이게 제일 중요하기 때문에 큰 문제 X)

 

---

이번 아티클에는 전반적으로 next.js의 필요성과 장단점에 대해서 알아보았는데요

앞으로 합동세미나를 진행하면서 next.js와 친숙해지고 난 다음번에는 next.js를 잘 사용하는 방법에 대해서 설명해보도록 하겠습니다!

멋진 개발자를 위하여 ~~