NestJS - NextJS를 사용하는 이유?!

리액트 학습이 끝나고 나니 추가로 학습을 해야할 수많은 프레임워크들이 보이기 시작했습니다.

NextJS, Gatsby 등 앱을 개발해야한다면 RN(React Native), Flutter 와 같은 프레임워크들을 학습해야합니다. 이런 프레임워크들은 왜 필요할까요?

 

 

1. Server Side Rendering(SSR)

리액트의 경우 CSR로 이루어져 있습니다. 풀어쓰면 Client Side Rendering(CSR)이라는 뜻인데, 무슨 말일까요?

사용자가 리액트로 작성된 페이지에 접근하면 그떄부터 javascript를 다운로드받고 페이지를 작성하기 시작하면서 HTML구성요소와 CSS, 이미지등 페이지를 작성하는 방식을 말합니다.

이렇게 작성된 페이지의 경우 불안정한 네트워크 환경이거나 javascript를 제한두는 환경에서는 흰페이지의 빈 화면만 사용자는 멀뚱멀뚱 보고 있게 됩니다.

 

아래는 제가 리액트로 작성하고 배포한 페이지를 소스보기한 코드입니다.

소스 정렬을 해봐도 총 22줄밖에 안나오고 div태그 하나밖에 없는걸 볼 수 있습니다.

 

NextJS를 사용하게되면 개발자가 원하는 형태로 CSR, SSR로 구성하여 페이지 동작 방식을 결정할 수 있습니다.

 

1-1. SSR vs CSR

- SSR :

과거에 작성된 대부분의 웹페이지는 SSR방식으로 만들어져 있다.

사용자가 브라우저를 통해 웹 페이지에 접근하면 서버를 통해 요청을하고 요청에 따라 서버는 DB에서 데이터를 가져오거나 통신등 백엔드 처리를 한 뒤 데이터를 노출시키는 형태로 동작되었다. (스프링을 해보셨다면 JSP가 어떻게 노출되는지 생각해보시면 됩니다!) 

대신 초기 로드속도가 빠르고, 검색엔진과 같은곳에 페이지 노출도 쉽다는 장점이 있다.

하지만 페이지를 이동하게 되면 모든 요소를 다시 렌더링하는 비효율적인 방식으로 동작한다.

(헤더, 푸터, 사이드가 공통적으로 작성된 페이지의 경우 해당 요소는 변경될 필요가 없지만 이동때마다 다시 그린다.)

 

- CSR :

모바일이나 패드같은 다양한 인터페이스들이 생기면서 다양한 화면에서 최적화된 페이지를 보여주기 위해 React, Vue와 같은 언어들이 탄생되었고, 이런 언어들은 CSR로 구성되어 동작합니다.

사용자가 페이지에 접근하면 프론트에 대한 리소스만 받아와서 페이지를 렌더링 하기 시작합니다.

데이터와 같은것을 제외한 페이지 관련된 모든것을 받아오기 때문에 초기 로드는 느리다는 단점이 있지만, 한번 페이지가 로드된 후에는 필요한 부분만 변경되는 형태로 구성되어 있기때문에 렌더링에 최적화가 되어있습니다.

 

 

2. 검색엔진 노출(SEO)

NextJS를 사용하게되면 검색엔진 최적화에 적합하여 내가 작성한 사이트를 관련된 키워드로 검색되었을 때, 상위로 노출시키기 좋습니다.

 

아래는 구글의 검색엔진 동작 방식의 흐름도입니다.

구글봇은 페이지를 크롤링 렌더링 대기열에 담아두고 robots.txt를 읽고 크롤링을 허용한 사이트인지 체크를합니다.

허용된 사이트라면 HTML을 파싱하여 구조를 파악하고 ... ...

 

자세한 내용은 아래URL을 참고해주세요. 

자세한 내용 : https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=ko 

자바스크립트 검색엔진 최적화의 기본사항 이해하기 | Google 검색 센터  |  문서  |  Google Develope

 

위에서 언급한대로 리액트의 경우 CSR이며, 페이지에 사용자가 접근하기 전까진 생성되어 있는 노드나 데이터가 없습니다. 검색엔진 측면에서는 빈 페이지를 보기때문에 최적화된 데이터 처리가 어렵습니다.

 

 

3. Static Site Generator(SSG)

Static Site Generator는 정적인 HTML, CSS, Javascript파일을 생성하는 소프트웨어들을 말합니다.

정적인 파일을 생성해서 사용하기 때문에, 웹 서버의 보안에 유리하고, 브라우저에서 다운로드 속도가 빠릅니다.

NextJS로 작성한 페이지는 리액트로 구성하더라도 기본적인 HTML과 같은 기본적인 구조를 가지고 있기 때문에, 아무리 극한으로 느린 네트워크이더라도 페이지의 뼈대(마크업)정도는 보고 있을 수 있습니다.

 

 

# NestJS로 얻을 수 있는 이점

1. 정적인 페이지를 얻을 수 있다.(초기 로드 속도 최적화)

2. SEO에 유리하다.(검색엔진 노출)

3. 페이지 이동시 CSR로 동작하여 SPA장점을 가져갈 수 있다.