Next.js와 반응? 경쟁이 아니라 파트너십입니다

게시 됨: 2023-02-07

최신 웹 개발자를 위한 JavaScript 라이브러리와 프레임워크는 부족하지 않습니다. 가장 보편적인 라이브러리 중 하나는 Facebook(현재 Meta)이 기능이 풍부한 애플리케이션을 구축하는 데 도움을 주기 위해 만든 React입니다. React 애플리케이션은 전통적으로 웹 브라우저에서 실행되지만 Next.js 프레임워크는 React 기능을 JavaScript 런타임 환경 Node.js를 통해 서버 측으로 확장합니다.

이 기사에서는 다음 프로젝트에 적합한지 결정할 수 있도록 Next.js와 React를 살펴볼 것입니다.

Next.js와 React: 차세대 JavaScript

2022 SlashData 설문 조사에 따르면 전 세계에 1,700만 명 이상의 JavaScript 프로그래머가 있으며 Python 및 Java와 같은 인기 있는 언어를 포함하는 팩을 이끌고 있습니다. JavaScript는 클라이언트 측과 서버 측 모두에서 사용할 수 있으며 이러한 다재다능함은 개발자가 하나의 프로그래밍 언어를 사용하여 완전한 애플리케이션을 구축할 수 있음을 의미합니다.

다양한 언어를 사용하는 프로그래머의 수를 보여주는 차트는 많은 사람들이 Next.js와 React에 대해 궁금해하고 있음을 시사합니다.
2022년 프로그래머가 사용하는 언어에 대한 슬래시/데이터 조사. (출처: Statista)

React와 같은 JavaScript 라이브러리와 Next.js와 같은 프레임워크의 도입으로 이러한 개발이 더욱 향상되었습니다. 이러한 라이브러리 및 프레임워크는 프런트엔드 및 백엔드 통합을 단순화하는 기능을 제공합니다. 또한 개발자는 npm(Node.js 패키지 관리자)과 같은 패키지 관리자를 사용하여 JavaScript 기능을 확장하여 JavaScript 라이브러리 및 도구를 설치할 수 있습니다. 이러한 리소스는 직접 작성해야 하는 코드의 양을 줄이는 정교한 기능을 제공합니다.

JavaScript의 확장성은 가장 일반적인 도구에 대한 포괄적인 지식이 웹 개발자로서의 성공의 열쇠임을 의미합니다.

Next.js가 무엇인가요?

Vercel이 2016년에 처음 출시한 Next.js는 고성능 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 오픈 소스 React 프레임워크입니다. 이후 Twitch, TikTok, Uber 등의 주요 기업에서 채택했습니다.

Next.js는 빠르고 SEO 친화적인 애플리케이션을 구축하기 위한 최고의 개발자 경험 중 하나를 제공합니다. 다음은 Next.js를 탁월한 프로덕션 프레임워크로 만드는 몇 가지 기능입니다.

  • 하이브리드 렌더링 기능
  • 자동 코드 분할
  • 이미지 최적화
  • CSS 프리프로세서 및 CSS-in-JS 라이브러리에 대한 내장 지원
  • 기본 제공 라우팅

이러한 기능은 Next.js 개발자가 구성 및 도구 사용에 상당한 시간을 절약하는 데 도움이 됩니다. 다음과 같은 프로젝트를 지원할 수 있는 애플리케이션 빌드로 바로 이동할 수 있습니다.

  • 전자상거래 상점
  • 블로그
  • 대시보드
  • 단일 페이지 애플리케이션
  • 상호 작용 사용자 인터페이스
  • 정적 웹사이트

반응이란 무엇입니까?

React는 동적 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다. 웹 인터페이스 생성 외에도 React Native를 사용하여 모바일 애플리케이션을 구축할 수 있습니다.

React 사용의 몇 가지 이점은 다음과 같습니다.

  • 향상된 성능: React는 DOM의 각 구성 요소를 업데이트하는 대신 가상 DOM을 사용하여 변경된 구성 요소만 업데이트합니다.
  • 강력한 구성 요소 기반: 구성 요소를 생성하면 반복적으로 재사용할 수 있습니다.
  • 손쉬운 디버깅: React 애플리케이션은 상위 구성 요소에서 하위 구성 요소로만 단방향 데이터 흐름을 사용합니다.

Next.js와 반응

개발자는 종종 같은 목적으로 Next.js와 React를 사용하지만 둘 사이에는 몇 가지 근본적인 차이점이 있습니다.

사용의 용이성

Next.js와 React로 시작하는 것은 쉽습니다. 각각은 Node.js용 npm의 일부인 npx 를 사용하여 터미널에서 단일 명령을 실행해야 합니다.

Next.js의 경우 가장 간단한 명령은 다음과 같습니다.

 npx create-next-app

create-next-app 에 대한 추가 인수가 없으면 대화형 모드로 설치가 진행됩니다. 프로젝트 이름(프로젝트 디렉토리에 사용됨)과 TypeScript 및 코드 린터 ESLint에 대한 지원을 포함할지 여부를 묻는 메시지가 표시됩니다.

다음과 같이 표시됩니다.

npx로 생성 중인 Next.js 애플리케이션의 스크린샷.
대화형 모드에서 Next.js 애플리케이션 만들기.

React 인스턴스를 초기화할 때 가장 간단한 명령에는 프로젝트 디렉터리의 이름이 포함됩니다.

 npx create-react-app new-app

이렇게 하면 필요한 모든 초기 구성 및 종속성을 포함하는 폴더가 생성됩니다.

npx로 생성 중인 React 프로젝트의 스크린샷.
터미널 명령줄에서 React 프로젝트 만들기.

둘 다 쉽게 시작할 수 있지만 Next.js는 React 위에 구축된다는 점을 기억하세요. 따라서 먼저 React를 배우고 작동 방식을 이해하지 않고는 Next.js를 배울 수 없습니다. 다행스럽게도 React는 완만한 학습 곡선을 자랑하며 초보자에게 적합합니다.

React가 상대적으로 구조화되지 않았다는 점도 중요합니다. React 라우터를 설치 및 설정하고 데이터 가져오기, 이미지 최적화 및 코드 분할을 처리하는 방법을 결정해야 합니다. 이 설정에서는 추가 라이브러리 및 도구를 설치하고 구성해야 합니다.

대조적으로, Next.js는 이러한 도구가 미리 설치되고 미리 구성된 상태로 제공됩니다. Next.js를 사용하면 pages 폴더에 추가된 모든 파일이 자동으로 경로 역할을 합니다. 이 기본 제공 지원으로 인해 Next.js는 매일 작업하기가 더 쉬워져 애플리케이션의 로직 코딩을 즉시 시작할 수 있습니다.

세계를 지배하는 자신만의 애플리케이션을 계획하고 계십니까? 이 가이드는 귀하의 프로젝트에 적합한 옵션을 선택하는 데 도움이 될 것입니다 ️ Click to Tweet

Next.js 및 반응 기능

Next.js는 React를 기반으로 하기 때문에 둘은 몇 가지 기능을 공유합니다. 그러나 Next.js는 한 단계 더 나아가 라우팅, 코드 분할, 사전 렌더링 및 즉시 사용 가능한 API 지원과 같은 추가 기능을 포함합니다. 이는 React를 사용할 때 직접 구성해야 하는 기능입니다.

데이터 가져오기

React는 클라이언트 측에서 데이터를 렌더링합니다. 서버는 정적 파일을 브라우저로 보내고 브라우저는 API에서 데이터를 가져와 애플리케이션을 채웁니다. 이 프로세스는 앱이 느리게 로드되기 때문에 앱 성능을 저하시키고 사용자 경험을 저하시킵니다. Next.js는 사전 렌더링을 통해 이 문제를 해결합니다.

사전 렌더링을 통해 서버는 애플리케이션을 브라우저에 보내기 전에 필요한 API를 호출하고 데이터를 가져옵니다. 이와 같이 브라우저는 렌더링 준비가 된 웹 페이지를 수신합니다.

사전 렌더링은 정적 사이트 생성(SSG) 또는 서버 측 렌더링(SSR)을 참조할 수 있습니다. SSG에서 HTML 페이지는 빌드 시 생성되며 여러 요청에 재사용됩니다. Next.js는 데이터가 있거나 없는 HTML 페이지를 생성할 수 있습니다.

다음은 Next.js가 데이터 없이 페이지를 생성하는 방법의 예입니다.

 function App() { return <div>Welcome</div> } export default App

외부 데이터를 사용하는 정적 페이지의 경우 getStaticProps() 함수를 사용하십시오. 페이지에서 getStaticProps() 를 내보내면 Next.js는 반환하는 소품을 사용하여 페이지를 미리 렌더링합니다. 이 함수는 항상 서버에서 실행되므로 페이지에서 사용하는 데이터를 빌드 시 사용할 수 있는 경우 getStaticProps() 를 사용하십시오. 예를 들어 CMS에서 블로그 게시물을 가져오는 데 사용할 수 있습니다.

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

페이지 경로가 외부 데이터에 의존하는 상황에서는 getStaticPaths() 함수를 사용하십시오. 따라서 게시물 ID를 기반으로 경로를 생성하려면 페이지에서 getStaticPaths() 를 내보냅니다.

예를 들어 아래와 같이 pages/posts/[id].js 에서 getStaticPaths() 를 내보낼 수 있습니다.

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths() 는 종종 getStaticProps() 와 쌍을 이룹니다. 이 예에서는 getStaticProps() 를 사용하여 경로에 있는 ID의 세부 정보를 가져옵니다.

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

SSR에서는 요청한 시간에 데이터를 가져와서 브라우저로 보냅니다. SSR을 사용하려면 렌더링하려는 페이지에서 getServerSide() props 함수를 내보냅니다. 서버는 모든 요청에서 이 함수를 호출하므로 SSR은 동적 데이터를 소비하는 페이지에 유용합니다.

예를 들어 뉴스 API에서 데이터를 가져오는 데 사용할 수 있습니다.

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

데이터는 모든 요청에서 가져오고 소품을 통해 뉴스 구성 요소로 전달됩니다.

코드 분할

코드 분할은 코드를 브라우저가 요청 시 로드할 수 있는 청크로 나누는 것입니다. 서버는 사용자에게 필요한 것만 전송하므로 초기 로드 중에 브라우저로 전송되는 코드의 양이 줄어듭니다. Webpack, Rollup 및 Browserify와 같은 번들러는 React에서 코드 분할을 지원합니다.

Next.js는 기본적으로 코드 분할을 지원합니다.

Next.js를 사용하면 각 페이지가 코드 분할되고 애플리케이션에 페이지를 추가해도 번들 크기가 늘어나지 않습니다. Next.js는 동적 가져오기도 지원하므로 런타임 중에 JavaScript 모듈을 가져오고 동적으로 로드할 수 있습니다. 번들이 지연 로드되기 때문에 동적 가져오기는 더 빠른 페이지 속도에 기여합니다.

예를 들어 아래의 홈 구성 요소에서 서버는 초기 번들에 영웅 구성 요소를 포함하지 않습니다.

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

대신 영웅 구성요소가 로드되기 전에 서스펜스의 대체 요소가 렌더링됩니다.

Next.js와 React의 API 지원

Next.js API 라우팅 기능을 사용하면 동일한 코드베이스에서 백엔드 및 프런트엔드 코드를 작성할 수 있습니다. /pages/api/ 폴더에 저장된 모든 페이지는 /api/* 경로에 매핑되며 Next.js는 이를 API 엔드포인트처럼 취급합니다.

예를 들어 다음과 같이 현재 사용자의 이름을 반환하는 pages/api/user.js API 경로를 생성할 수 있습니다.

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

https://app-url/api/user URL을 방문하면 사용자 이름 개체가 표시됩니다.

 { username: 'Jane' }

API 경로는 액세스 중인 서비스의 URL을 숨기거나 전체 백엔드 애플리케이션을 코딩하지 않고 환경 변수를 비밀로 유지하려는 경우에 유용합니다.

성능

Next.js는 단순화된 프로세스로 더 나은 성능의 앱을 만드는 능력에서 의심할 여지 없이 뛰어납니다. SSR 및 SSG Next.js 애플리케이션은 CSR(클라이언트 측 렌더링) React 애플리케이션보다 성능이 좋습니다. 서버에서 데이터를 가져오고 브라우저가 렌더링하는 데 필요한 모든 것을 전송함으로써 Next.js는 API에 데이터 가져오기 요청을 할 필요가 없습니다. 이는 더 빠른 로드 시간을 의미합니다.

또한 Next.js는 클라이언트 측 라우팅을 지원하기 때문입니다. 브라우저는 사용자가 다른 경로로 이동할 때마다 서버에서 데이터를 가져올 필요가 없습니다. 또한 Next.js 이미지 구성 요소는 자동 이미지 최적화를 가능하게 합니다. 이미지는 뷰포트에 들어갈 때만 로드됩니다. 가능한 경우 Next.js는 WebP와 같은 최신 형식의 이미지도 제공합니다.

Next.js는 또한 글꼴 최적화, 스마트 경로 미리 가져오기 및 번들링 최적화를 제공합니다. 이러한 최적화는 React에서 자동으로 사용할 수 없습니다.

지원하다

React는 Next.js보다 오래 사용되었기 때문에 더 광범위한 커뮤니티를 가지고 있습니다. 하지만 많은 React 개발자들이 Next.js를 채택하고 있어 커뮤니티가 꾸준히 성장하고 있습니다. 개발자는 처음부터 솔루션을 구축할 필요 없이 발생하는 문제에 대한 기존 솔루션을 더 쉽게 찾을 수 있습니다.

Next.js는 또한 이해하기 쉬운 포괄적인 예제와 함께 훌륭한 문서를 제공합니다. 인기에도 불구하고 React 문서는 탐색할 수 없습니다.

Team Next.js 또는 Team React입니까? 이 게시물에서 두 가지 인기 있는 옵션을 살펴보세요 . 트윗하려면 클릭하세요.

요약

Next.js 또는 React를 선택하면 애플리케이션의 요구 사항에 따라 달라집니다.

Next.js는 성능을 향상시키는 구조와 도구를 제공하여 React의 기능을 향상시킵니다. 라우팅, 코드 분할 및 이미지 최적화와 같은 이러한 도구는 Next.js에 내장되어 있으므로 개발자가 수동으로 구성할 필요가 없습니다. 이러한 기능 덕분에 Next.js는 사용하기 쉽고 개발자는 비즈니스 로직 코딩을 즉시 시작할 수 있습니다.

다양한 렌더링 옵션으로 인해 Next.js는 서버측 렌더링 애플리케이션 또는 정적 생성과 Node.js 서버측 렌더링을 결합하는 애플리케이션에 적합합니다. 또한 Next.js에서 제공하는 최적화 기능 덕분에 전자상거래 상점과 같이 속도가 빨라야 하는 사이트에 적합합니다.

React는 강력한 프런트 엔드 애플리케이션을 만들고 확장하는 데 도움이 되는 JavaScript 라이브러리입니다. 특히 JavaScript 배경이 있는 개발자에게는 구문도 간단합니다. 또한 애플리케이션에서 사용하는 도구와 이를 구성하는 방법을 제어할 수 있습니다.

세계를 지배하는 자신만의 애플리케이션을 계획하고 계십니까? React 및 Next.js를 지원하는 서비스를 위한 Node.js 애플리케이션 호스팅에 대한 Kinsta의 접근 방식을 자세히 알아보세요.