[FE 면접/Next.js] Next.js란?

새로 진행하는 프로젝트에서 Next.js를 도입할 뻔(?) 했다. 타이트한 프로젝트 일정 때문에 Next.js의 러닝커브와 넥제 이외의 기술들을 습득해야 하는 상황에서 Next.js를 제대로 알고 사용할 수 있을까 고민이 되어 아쉽게 이번 프로젝트에서 사용은 못 하게 되었다. 하지만 언젠가 꼭 사용해보고 싶은 프레임워크이다!!

 

Next.js 가 SSR을 지원하기에 SEO 최적화를 할 수 있다, 또 많은 기업들에서 그러한 이유로 Next.js를 많이 사용한다 정도만 알고, 세세한 이유들은 잘 알지 못해서 이번주 주제로 Next.js에 대해 다뤄볼까 한다.

 

1. Next.js란 뭘까?

💡 Next.js?
Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크이다. 

React와의 가장 큰 차이점은

React는 라이브러리, Next.js는 프레임워크

라는 점이다.

 

그렇기 때문에 기존 리액트에서 제공하지 않는 SSR(서버사이드 렌더링), SSG(정적사이트 생성), ISR(증분정적 재생성) 등 다양하고 풍부한 기능을 제공한다.

 

클라이언트 렌더링

기존 react의 CSR 방식의 경우 클라이언트 사이드에서 렌더링이 되기 때문에, 빈 껍데기의 HTML 파일과 CSS 그리고 자바스크립트를 다운로드 받아 브라우저에서 해석하고 렌더링을 한다. 

서버와 완전히 분리되기 때문에 서버는 리소스를 넘겨주는 것 이외에는 어떠한 것도 관여하지 않게 된다.

그렇기 때문에 페이지 이동 시 깜빡임 없이 앱을 사용하는 것과 같은 사용자 경험을 제공한다는 장점이 있지만, 자바스크립트 리소스를 다운하고 해석하는 시간만큼 렌더링이 딜레이된다는 단점이 존재한다. 

 

서버 렌더링

그렇다면 서버가 렌더링에 관여하는 경우 어떤 차이가 있을까?

CSR에서 빈 HTML 파일을 브라우저가 채워나갔던 상황과는 달리 서버가 렌더링에 관여하게 될 때에는 꽉 채워진 HTML 파일을 커넥션 때 전달한다. 즉, 렌더링 된 HTML을 내려주어 브라우저가 바로 렌더링할 수 있게 하는 방식이다.

그렇기 때문에 브라우저는 정적페이지인 HTML을 렌더링하는데 시간을 쏟을 필요가 없고, interaction을 하기 위한 자바스크립트 파일만 다운받아서 실행하면 된다. 

서버에서 렌더링을 한 후 브라우저로 넘어오기 때문에 검색엔진이 HTML 파일을 해석할 수 있어 SEO 랭킹 점수를 높게 받을 수 있는 것이다.

 

정리하자면, CSR은 보여지는 시간(Time To View)과 인터렉션이 이루어지는 시간(Time To Ineteraction)이 동일하지만, SSR의 경우 보여지는 시간과 인터렉션이 이루어지는 시간 사이에 공백이 생긴다.

 

Next.js 에서 골라잡아

Next.js가 빛을 더욱 발하는 이유는 우리가 원하는 다양한 종류의 렌더링 패턴을 제공한다는 것이다.

같은 웹 사이트라도 어떤 페이지에서는 CSR을, 어떤 페이지에서는 SSR, SSG, ISR 등을 적재적소에 렌더링 패턴을 적용할 수 있다.

pre-rendering 뿐만이 아니라 페이지의 빠른 로드를 위한 자동 코드 스플리팅, pre-fetching 등의 복잡한 작업을 도와준다.

 

2. Next.js 가 제공하는 주요 기능

1. Automatic Routing

pages 폴더 밑에 폴더 및 파일을 구성하면 자동으로 라우팅 처리가 된다. 

react-router-dom 에서 하나 하나 명시해야 했던 라우팅을 파일 및 폴더 구성만으로 자동으로 라우팅 처리를 할 수 있다.

 

2. Server Rendering

서버사이드 렌더링을 한다.

React에서도 SSR 없이 SEO 최적화를 하려면 할 수 있다. 예를 들어, react-helmet,  react-snap 등 다양한 pre-rendering을 지원하는 라이브러리를 사용하면 SEO 최적화를 대응할 수 있다. 하지만, 어디까지나 완벽하지 않으며 굉장히 번거롭다. (직접 각각의 페이지에 메타태그를 주입해줘야 함)

그렇기 때문에 이미 진행된 react 프로젝트의 경우 위와 같은 라이브러리를 사용해서 대응을 할 수는 있지만, 만약 프로젝트 시작 전 프레임워크를 도입할지 고민을 하고 있거나, 시간적 여유가 있다면 SSR을 지원하는 Next.js로 시작하는 것도 좋다.

 

3. Code Splitting

코드 스플리팅이란 번들을 여러 조각으로 조각내서, 최초에 가장 필요한 부분에만 전송해주는 방식이다. 이로 인해, 어플리케이션 로드 타임을 줄여준다.

코드 스플리팅은 webpack, parcel, rollup 등의 모듈 번들러도 지원하는 기능이지만, next.js를 사용하면 별도의 설정없이 자동으로 프로젝트에 적용된다.

 

next.js는 리소스가 import된 것들을 분석하여, 로딩한 페이지가 꼭 필요로 하는 JS 파일만 로드한다. 그래서 첫 페이지 로드가 빠르고 나중에 꼭 사용되는 JS 파일들만 클라이언트 사이로 보낸다.

 

 

[참고]

https://blog.kmong.com/%ED%81%AC%EB%AA%BD-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%ED%8C%80%EC%97%90%EC%84%9C-next-js%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-5474e10bc72b

https://www.reason-to-code.com/blog/why-we-couldn't-feel-the-difference-of-nextjs/

https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80