Next.js란 뭘까?

Daehyeon Yun·2024년 8월 7일

목록 보기

10/14

📖 Reference
📎 https://codingapple.com/unit/nextjs-0-ot/
📎 https://kyounghwan01.github.io/blog/React/next/basic/#next-js가-제공하는-주요-기능
📎 https://m.hanbit.co.kr/channel/category/category_view.html?cms_code=CMS7641364152
📎 https://subtlething.tistory.com/115

🤔 Next.js란?

리액트를 위해 만들어진 오픈소스 JS 웹 프레임워크

리액트에는 존재하지 않는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)등을 지원

리액트는 클라이언트 사이드에서 작동하는 라이브러리입니다. 이 때문에 리액트를 사용한 서비스는 SEO 의 효과를 거의 볼 수 없었으며 애플리케이션 실행 초기에 성능 부담이 발생하는 문제가 발생합니다.

위와 같은 문제를 해결하기 위해 개발된Next.js 는 서버 사이드 렌더링을 지원하며 수많은 내장 컴포넌트와 플러그인이 존재해 소규모 웹사이트뿐만 아니라 상용 애플리케이션에도 즉시 적용할 수 있습니다.

💡 Next.js에서 지원하는 기능

정적 사이트(SSG)와 증분 정적 콘텐츠를 생성
타입스크립트 기본 지원
자동 폴리필(polyfill) 적용
이미지 최적화
웹 애플리케이션의 국제화 지원
성능 분석

위 나열한 강력한 기능들로 인해 Next.js 는 규모에 상관없이 리액트가 다양한 웹 애플리케이션을 만들 수 있는 도구가 될 수 있도록 만들어졌습니다.

👩‍👩‍👧‍👦 Next.js와 비슷한 프레임워크

Next.js 외에도 JS 영역에서 서버 사이드 렌더링을 지원하는 프레임워크들이 존재합니다.

Next.js 외에도 다른 프레임워크들이 서버 사이드 렌더링을 지원한다해서 무조건 사용해서는 안됩니다. 해당 프레임워크와 렌더링 방식이 프로젝트의 목적과 방향에 따라 얼마나 부합하는지 고려하고 선정하는 것이 바람직합니다.

Gatsby → Gatsby는 Next.js 대신 사용할 수 있는 프레임워크입니다. 특히 정적 사이트(SSG)를 만드는 것에 특화되어 있습니다.
Razzle → Razzle은 Next.js 만큼 유명하진 않지만 서버 사이드 렌더링을 통한 애플리케이션 개발이 가능합니다. → 또한 create-react-app 도구를 쉽게 사용하여 서버와 클라이언트의 복잡한 설정을 추상화하고 간단히 만들 수 있습니다.
Nuxt.js → Vue를 이용한 웹 애플리케이션 개발에서 리액트의 Next.js에 해당합니다.
Angular Universal → Angular를 이용한 웹 애플리케이션 개발에서 리액트의 Next.js에 해당합니다.

🔁 React에서 Next.js로 넘어가기

Next.js의 기본 철학은 리액트와 비슷합니다.

Next.js는 설정보다 관습(Convention-over-configuration) 이라는 취지로 만들어진 프레임워크입니다. 따라서 Next.js의 특정 기능을 사용하고자 한다면 복잡한 설정 없이 해당 기능을 사용할 수 있는 가장 쉬운 방법을 찾을 수 있습니다.

설정보다 관습(Convention-over-configuration)이란 개발자가 해야 할 결정의 수를 줄이면서 유연성은 잃지 않도록 하는 소프트웨어 설계 패러다임입니다.

단일 Next.js 애플리케이션에서 별도의 설정 파일을 만들 필요 없이 원하는 페이지에 SSR 혹은 정적 페이지 생성을 적용할 것인지 지정할 수 있습니다.

원하는 페이지에 특정 함수를 export 할 시 Next.js 가 알아서 모든걸 처리합니다.

React는 자바스크립트 라이브러리이며 Next.js는 프레임워크입니다.

Next.js는 클라이언트와 서버에서 실행할 수 있는 코드에 다양한 기능을 제공하여 애플리케이션을 만들 수 있게 합니다.

서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node에서 실행되기에 fetch, window, document 와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없습니다.

Next.js는 프로그레시브 웹 앱이나 오프라인 웹 앱 등을 쉽게 만들 수 있습니다.

내장 컴포넌트와 최적화 기능을 사용할 수 있습니다.

🤖 최종 정리 : 도와줘요 Copilot

React와 Next.js의 장단점과 특징이 무엇일까?

React.js

React.js는 라이브러리입니다.
React는 CSR(Client Side Rendering) 기반입니다. 브라우저에서 렌더링 작업을 수행하며, JS 파일을 다운로드한 후 실행해야 화면이 보입니다.
React는 UI를 작은 컴포넌트로 나누어 관리합니다.

Next.js

Next.js는 React의 프레임워크 입니다.
Next.js는 SSR(Server Side Rendering) 기반입니다. 서버에서 렌더링 작업을 수행하며 모든 컴포넌트와 페이지는 서버에서 이미 렌더링된 HTML이 존재합니다. 따라서 초기 로딩 시간이 줄어들어 UX가 향상됩니다.
Built-in Optimizations , Dynamic HTML Streaming, React Server Components 등 Next.js는 React의 기능을 확장합니다. 💡 Built-in Optimizations : Next.js에서 제공하는 기능 중 하나입니다. 이는 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 최적화하는 데 도움이 됩니다.
- Automatic Code Splitting : Next.js는 페이지를 자동으로 코드 조각으로 분할합니다. 분할한 코드 조각 중 필요한 부분만 로드합니다. 따라서 초기 페이징 로딩 속도가 향상됩니다.
- Prefetching : 사용자가 다음 페이지로 이동할 때 브라우저가 해당 페이지의 리소스를 미리 가져옵니다. 이는 사용자 경험을 향상시키며 빠른 페이지 전환을 가능하게 합니다.
- Static Site Generation(SSG) : Next.js는 미리 렌더링된 정적 HTML 파일을 생성하여 서버에 제공합니다. 이는 초기 로딩 속도를 유의미하게 줄여줍니다.
- Incremental Static Regeneration(ISR) : Next.js는 정적 페이지를 일정 시간마다 다시 생성하여 최신 데이터를 반영합니다. 이는 동적 데이터를 사용하는 사이트에서도 빠른 성능을 유지할 수 있도록 해줍니다.’
  
  💡 Dynamic HTML Streaming
  
  : Next.js에서 제공하는 기능 중 하나입니다. 웹 페이지를 렌더링하는 동안 HTML을 스트리밍하는 방식입니다. 간단히 말하자면, 서버에서 페이지를 렌더링하는 동안 브라우저로 HTML을 조금씩 보내는 것을 말합니다. 이로 인해 초기 로딩속도가 빨라지며 사용자 경험이 향상됩니다.
  
  💡 React Server Components
  
  : React 생태계의 새로운 추가 기능입니다. 서버 측에서만 실행되는 컴포넌트를 생성할 수 있는 기능을 말합니다. 이러한 컴포넌트를 Server Components 라고 합니다.
  
  기존 클라이언트 측만 존재하는 React 애플리케이션에서는 SEO와 성능 사이에서 트레이드오프를 해야했지만, 서버 컴포넌트의 등장으로 서버 렌더링과 클라이언트 측 상호 작용의 최상의 부분을 결합하여 애플리케이션의 사용자 경험을 개선할 수 있게 되었습니다. 이를 통해 초기 로딩 속도를 향상시키며 동적 데이터를 렌더링하는데 도움이 될 수 있습니다.

Daehyeon Yun

열심히 살아야지

이전 포스트

CSR vs SSR (SPA와 MPA)

다음 포스트