React에서 Next.js로

베하~! 안녕하세요~ 1Tier팀 입니다.

프론트엔드&웹 개발에 관심이 있는 분들, 혹은 IT트랜드에 관심이 있으신 분들은 많이 들어보셨을 Next.js
Next.js가 무엇인지, 왜 이렇게 핫한지 한번 알아봅시다.

Next.js 탄생 배경

Next.js의 탄생 배경을 알고자 하면, 우선 웹 통신 중 렌더링에 대한 지식이 조금 필요하기 때문에 간단히 알아봅시다.
우선 웹 렌더링 방식에는 크게 두 가지가 있는데, 바로
Server-Side Rendering과 Client-Side Rendering 가 있습니다.

Client-Side Rendering VS Server-Side Rendering

Client-Side Rendering은 리액트나 뷰 같은 라이브러리를 이용하여 서버가 아닌 유저의 브라우저에서 실시간으로 만들어 주는 것으로, 브라우저가 유저에게 화면을 보여주는 주체가 됩니다.

Server-Side Rendering은 클라이언트에서 요청이 들어오면 서버에서 매번 화면을 만들어 제공하는 방식으로, 서버가 유저에게 화면을 보여주는 주체가 됩니다.

먼저 Client-Side Rendering을 하면 어떤 장점과 단점이 있는지 알아봅시다.

Client-Side Rendering 장점

1. 서버의 부하를 줄일 수 있다
2. 새로고침이 발생하지 않아 빠르고, 페이지 전환이 부드러워 진다

Client-Side Rendering 단점

1. 검색엔진 최적화에 대한 추가적인 작업이 필요하고 구글 노출이 어렵다
2. 첫 페이지 로딩 속도가 느리다

이러한 단점들은 수익성에 직결되는 문제가 있습니다.

그렇다면, Server-Side Rendering은 어떤 장점과 단점이 있을까요?

Server-Side Rendering 장점

1. 첫 페이지 로딩 속도가 Client-Side Rendering에 비해 빠르다
2. 일부 페이지에서 Client-Side Rendering이 하고싶다면 가능하다
3. 프론트엔드 전문 기술이 비교적 필요없어진다 (useState, state관리, Ajax, 비동기 등)

Server-Side Rendering 단점

1. 초기 로딩 이후 페이지 이동 시 요청마다 새로 페이지를 로드 하기 때문에 속도가 다소 느리다

그렇다면, 이러한 Client-Side Rendering의 단점을 보완하면서 Server-Side Rendering 처럼 속도도 빠르고 쉽게 개발할 수 있는 환경이 있으면 좋을것 같지 않나요?? 이 욕구를 충족시켜주는 것이 바로 React 기반 Server-Side Rendering Framework인 Next.js입니다.

가장 핫한 Web Frameworks - React

the state of frontend 2022

2022년도 가장 선호하는 웹 프레임워크로 단연, React가 압도적인 1위를 차지했습니다.
리액트가 선호받는 이유는 글의 주제를 조금 벗어나기 때문에 다음에 기회가 된다면 자세히 다뤄보겠습니다.

하지만 이 React에도 단점은 존재하고 프로덕션용이거나 프로젝트가 커질수록 다음과 같은 단점이 더 드러납니다.

1. 페이지 별 라우팅이 지원되지 않는다.
2. Data fetching 솔루션을 지원하지 않는다.
3. 대부분 Client-Side Rendering로 구현되어 있다.

이를 보완하기 위한 React Meta-Frameworks인 Next.js 가 개발되었습니다.

Next.js 요약

Next.js는 풀스택 프레임워크!

Next,js하나로 프론트엔드와 백엔드 모두 개발할 수 있습니다.
프론트엔드는 리액트 문법을 그대로 사용할 수 있으며 이러한 이유로 리액트 사용자가 선호하는 편입니다.

최신 버전은 파일과 폴더만 만들어주면 자동으로 페이지를 작성해주기도 하며
서버기능 구현, DB연결이 더욱 쉬워지고 내가 원하는 페이지는 Client-Side Rendering으로 구현할 수도 있습니다.

물론, 단점도 있습니다.
규모가 커질수록 폴더와 예약파일이 많아져 복잡도가 높아지고 리액트의 모든 기능을 제공하지는 않습니다.

다양한 렌더링 패턴 지원

SSG, ISG, SSR 다양한 렌더링 패턴을 지원합니다.

정적으로 페이지를 미리 만들어 두거나, 주기적으로 페이지를 만들어둘 수 있고, 요청시 페이지를 서버에서 만들 수도 있습니다.

다양한 렌더링 패턴을 지원할 수 있는 이유는, 서버에서 SWR 패턴을 구현했고 파일 시스템 기반의 라우팅과 서버리스 함수를 통해 백엔드를 구현했기 때문이죠
심지어 강력한 SEO까지 알아서 구현해줍니다.

Next.js v13의 등장

이러한 장점들에도 불구하고 v12에서는 페이지 단위로 렌더링을 결정해야 하고, 중첩된 레이아웃을 재사용하지 못하며, 데이터 변경을 위한 공식적인 지원이 없는 단점들이 있었지만

v13 부터는 새로운 라우팅 시스템, 레이아웃 재사용, 리액트18 부터 제공하는 서버 컴포넌트를 제공하고 리액트 코어팀과의 긴밀한 협업으로 더욱 리액트 친화적으로 발전했습니다.

이렇게 강력한 기능과 긴밀한 협업으로 더욱 리액트와 Next.js는 뗄 수 없는 프레임워크가 될 것 같습니다.

 

Next.js 공식 Docs URL : https://nextjs.org/docs