[Next] Next.js 란?

 

NEXT.js 란?

Vercel이 개발한 오픈소스 자바스크립트 프레임워크로 리액트를 더 편리하게 이용할 수 있도록 기존에 제공하지 않던 추가적인 기능을 제공한다. 즉, 리액트의 확장판이라고 할 수 있다. 

 

둘의 차이점을 꼽자면 넥스트는 프레임워크이고 리액트는 라이브러리 라는 점이다. 

 

💡 프레임워크 vs 라이브러리는 무슨 차이가 있을까?

기능 구현의 주도권이 누구에게 있는가?

• 프레임워크 : 프레임워크 자신이 주도권을 가짐
  • 예를들어 페이지 라우팅을 구현해야 한다고 할 때 프레임워크가 정해 놓은 기능을 이용해서 정해 놓은 방법대로 구현해야함.
  • 자유도 낮음
  • 많은 기능이 미리 제공됨
  • 쉽게 말해 자동차처럼 특화된 기능이 있고 해당 기능과 연관된 기능도 함께 제공되어 정해진 용도로만 활용이 가능함
• 라이브러리 : 프로그래머가 주도권을 가짐
  • 예를들어 위와같이 페이지 라우팅을 구현해야 한다고 할때 react-router-dom을 설치해서 사용해도 되고 다른 도구를 사용하고 싶다면 그 도구를 사용해도 되는 것 처럼 어떤 걸 쓰던 자유로움
  • 자유도 높음
  • 대다수의 기능 미리 제공안됨
  • 쉽게 말해 망치 처럼 특화된 기능이 있으나 그 외의 기능은 제공하지 않아 사용자가 원하는 용도로 사용 가능함

 

NEXT.js가 프레임워크로서 제공하는 다양한 기능

• 폴더 구조 기반의 페이지 라우팅
• 이미지, 글꼴, 스크립트 최적화
• 서버 사이드 렌더링 등..

 

즉, NEXT.js가 프레임워크로서 제공하는 기능을 정해진 방법 내에서 사용하고 활용하면 된다.

 

서버 사이드 렌더링(Server Side Rendering, SSR)

NEXT.js는 기존 리액트의 클라이언트 사이드 렌더링 방식을 기술적, 비즈니스적으로 효율적이게 만들기 위해서 클라이언트 사이드 렌더링 방식과 서버 사이드 렌더링 방식을 함께 사용한다. 

 

❓그럼 NEXT는 왜 서버 사이드 렌더링 방식을 사용하는 걸까?

먼저, 기존 리액트앱에서 사용하던 CRS 방식을 살펴보자.

1. 리액트 앱은 CRS 방식으로만 동작하기 때문에 브라우저가 리액트앱에 처음 접속할 때 비어있는 HTML 파일을 서버로 부터 전달 받는다. 
2. 브라우저는 빈 HTML 파일을 화면에 렌더링 시킨다.
3. 그 후, 브라우저는 리액트 앱이라고 불리는 번들링된 JavaScript 파일을 전달 받는다.
4. 모든 파일을 전달 받은 후가 되서야 컨텐츠를 화면에 렌더링 시킨다. 

이 방식은 장점도 있지만 단점도 있다. 

이처럼 사용자의 입장에서는 처음에는 빈 화면을 보다가 시간이 조금 흐른 뒤 화면을 볼 수 있다는 것이다. 즉, 인터넷이 조금 느리거나 서버가 불량할 경우 불편함을 느낄 수 있다. 

 

또한 페이지 마운트 이후에 API를 호출해서 추가로 데이터를 렌더링 하는 경우에는 로딩을 한번 더 겪어야 하기 때문에 초기 페이지 로딩이 더 길어질 수 있다는 단점이 있다. 

 

이러한 단점을 보완하기 위해서 NEXT는 CSR방식과 SSR방식을 같이 사용한다. 

 

서버 사이드 렌더링과 클라이언트 사이드 렌더링 

1. 초기 접속 시 완성된 HTML 파일을 서버에서 직접 렌더링해서 한번에 브라우저에 보내준다.
2. 그 후, 브라우저는 바로 완성된 화면을 렌더링 시켜 화면에 보여준다.
3. 그리고나서 필요한 JavaScript 파일들은 리액트 서버와 비슷하게 번들 파일과 묶어 보내준다. 

 

 

✨ 정리하자면

NEXT.js는 초기 페이지 접속 시에는 SSR 방식으로 페이지를 서버측에서 미리 완성해서 보내주기 때문에 초기 페이지 로딩이 빨라진다. 그러면서 동시에 자바스크립트 번들 파일도 함께 전달하기 때문에 서비스 내부에서의 파일은 CRS 방식으로 처리해서 쾌적한 페이지 이동까지 제공한다. 즉, 리액트 렌더링 방식의 단점은 보완하고 리액트의 장점은 가져온 프레임워크라고 할 수 있다. 

 

검색 엔진 최적화(Search Engine Optimization, SEO)

구글, 네이버, 다음등의 검색 포털 서비스 검색 결과에 더 잘 노출되게 하는 것

 

그래서 어떻게 검색 결과가 잘 노출된다는건데?

대다수의 검색엔진 포털 사이트는 검색엔진이라는 로봇을 가지고 있는데 이 로봇은 다양한 사이트들을 탐방하면서 현재 이 사이트가 어떤 정보를 제공하는지 수집한다. 

 

이 수집된 정보는 데이터베이스에 저장해주고 사용자가 연관된 정보를 검색하면 정보를 가지고 있던 데이터베이스가 그 동안 수집되어 있던 정보를 노출시켜 주는 것이다.

 

결국 이 로봇이 내 사이트가 제공하는 정보를 잘 수집하는것이 중요하다는 것인데, 

구글을 제외한 대대수의 검색 엔진들은 특정 웹 페이지에 대한 정보를 수집할 때 단순히 처음에 요청받은 HTML 파일만 보고 해당 정보를 파악한다. 

 

따라서 CRS 방식으로 동작하던 기존의 리액트 앱들은 빈 HTML 파일을 전달하기 때문에 빈 정보가 수집되고 검색엔진이 제대로된 정보를 수집하지 못하는 일이 발생한다. 즉, 검색 결과에 포함되지 못한다는 것이다. 

 

 

결론적으로,

SSR 방식을 사용하는 넥스트앱에서는 처음부터 서버에서 모든 HTML 파일을 전달하기 때문에 정보들을 로봇에 제공이 되고 그 결과 검색 결과에 노출되는 것이다.

 

 

📌

프로젝트로 배우는 React.js & Next.js 마스터리 클래스