분류 Reactjs

Next.js의 기본 성능

컨텐츠 정보

  • 조회 317 (작성일 )

본문

Next.js는 여러 성능 최적화가 포함 된 독자적인 React 프레임 워크입니다. 프레임 워크의 기본 아이디어는 기본적으로 이러한 기능을 포함하여 애플리케이션을 시작하고 가능한 한 성능을 유지하는 것입니다.


이 소개에서는 프레임 워크가 제공하는 많은 기능을 개략적으로 설명합니다. 이 컬렉션의 다른 가이드에서는 기능을 더 자세히 살펴 봅니다.


Chrome은 Next.js와 협력하여 빠른 서버 렌더링 React 애플리케이션을 구축하려는 모든 개발자의 프레임 워크를 개선합니다. 최근에 module / nomodule 지원 및 개선 된 세분화 된 청킹 전략과 같은 여러 가지 새로운 최적화가 추가되었습니다. 


무엇을 배우게 될까요? 


Next.js는 기본적으로 여러 성능 최적화를 제공하지만 이 가이드는 이를 더 자세히 설명하고 이를 사용하여 빠르고 성능이 뛰어난 환경을 구축하는 방법을 보여줍니다.


이 컬렉션은 React에 대한 기본 지식이 있다고 가정합니다. 그렇지 않다면 React의 시작하기 페이지를 확인하세요. 


Next.js로 빌드 된 애플리케이션에서도 작동하는 일반적으로 React 사이트에 추가 할 수 있는 많은 최적화가 있습니다. Next.js가 구체적으로 제공하는 것에 초점이 맞춰져 있으므로 다루지 않을 것입니다. 일반적인 React 최적화에 대해 자세히 알아 보려면 React 컬렉션을 확인하세요.


Next.js는 React와 어떻게 다른가요? 


React는 컴포넌트 기반 접근 방식을 사용하여 사용자 인터페이스를 더 쉽게 구축 할 수 있는 라이브러리입니다. 강력하지만 React는 특히 UI 라이브러리입니다. 많은 개발자가 모듈 번들러 (예 : 웹팩) 및 트랜스 파일러 (예 : Babel)와 같은 추가 도구를 포함하여 완전한 빌드 도구 모음을 갖습니다.


React 컬렉션에서는 React 앱을 빠르게 가동하기 위해 Create React App (CRA)을 사용하는 접근 방식을 취했습니다. CRA는 단일 명령으로 완전한 빌드 도구 체인을 제공하여 React 애플리케이션을 설정하는 번거로움을 없애줍니다.


CRA에 포함 된 몇 가지 기본 최적화가 있지만 이 도구는 간단하고 직접적인 설정을 제공하는 것을 목표로 합니다. 개발자는 구성을 꺼내고 수정할지 여부를 결정할 수 있습니다.


새로운 React 애플리케이션을 만드는데도 사용할 수 있는 Next.js는 다른 접근 방식을 취합니다. 다음과 같이 많은 개발자가 원하지만 설정하기 어려운 여러 공통 최적화를 즉시 제공합니다.


  • 서버 측 렌더링
  • 자동 코드 분할
  • 경로 미리 가져 오기
  • 파일 시스템 라우팅
  • CSS-in-JS 스타일링 (styled-jsx)

설정 


새 Next.js 애플리케이션을 만들려면 다음 명령을 실행합니다.


npx create-next-app new-app

npx는 npm 5.2.0 이상과 함께 자동으로 설치되는 패키지 실행기입니다. 시스템에 전역으로 설치할 필요없이 CLI 명령 (예 : create-next-app) 실행을 포함하여 패키지 관리와 관련된 많은 프로세스를 단순화합니다. 


그런 다음 디렉터리로 이동하여 개발 서버를 시작합니다.


cd new-app
npm run dev

Next.js를 기존 React 애플리케이션에 추가 할 수도 있습니다. 방법을 알아 보려면 수동 설정을 확인하십시오. 


편집 할 리믹스를 클릭하여 프로젝트를 편집 가능하게 만듭니다.


사이트를 미리 보려면 앱보기(View App)를 누릅니다. 그런 다음 전체 화면(Fullscreen)을 누릅니다.fullscreen 


pages/디렉토리는 index.jsx라는 단일 파일로 생성됩니다. Next.js는 이 디렉토리 내의 모든 페이지가 별도의 경로로 제공되는 파일 시스템 라우팅 방식을 따릅니다. 이 디렉토리에 about.js와 같은 새 파일을 생성하면 새 경로 (/about)가 자동으로 생성됩니다.


다른 React 애플리케이션처럼 컴포넌트를 생성하고 사용할 수도 있습니다. components/디렉토리는 이미 index.js에서 가져온 단일 구성 요소 인 nav.js로 생성되었습니다. 기본적으로 Next.js에서 사용되는 모든 가져 오기는 해당 페이지가 로드 될 때만 가져 오므로 자동화 된 코드 분할의 이점을 제공합니다.


또한 Next.js의 모든 초기 페이지 로드는 서버 측에서 렌더링됩니다. DevTools에서 네트워크 패널을 열면 문서에 대한 초기 요청이 완전히 서버 렌더링 된 페이지를 반환하는 것을 볼 수 있습니다.


The Preview tab of the Network panel shows that Next.js returns             visually complete HTML when a page is requested. 

네트워크 패널의 미리보기 탭은 페이지가 요청 될 때 Next.js가 시각적으로 완전한 HTML을 반환함을 보여줍니다.


서버 측 렌더링이 사용자에게 더 나은 경험을 제공하는 방법을 알아 보려면 서버 렌더링을 확인하십시오. 


이는 Next.js가 자동으로 제공하는 많은 기능 중 일부에 불과합니다. 대부분은 사용자 정의가 가능하며 다양한 사용 사례에 맞게 수정할 수 있습니다.


https://web.dev/performance-as-a-default-with-nextjs/