Next.js의 기본을 배우자 (4): Next.js 작동 방식을 알아보자(2)

오늘은 저번 글에 이어서 작동방식을 마무리 하겠습니다!

 

https://nextjs.org/learn/foundations/how-nextjs-works/buildtime-and-runtime

Learn | Next.js

nextjs의 기초로 배우는 부분이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~

 

빌드 시간 및 런타임

빌드 시간(또는 빌드 단계)은 프로덕션용 애플리케이션 코드를 준비하는 일련의 단계에 지정된 이름입니다.

애플리케이션을 빌드할 때 Next.js는 코드를 프로덕션에 최적화된 파일로 변환하여 서버에 배포 하고 사용자가 사용할 수 있습니다. 다음과 같은 파일들이 최적화가 됩니다.

• 정적으로 생성된 페이지용 HTML 파일
• 서버에서 페이지를 렌더링 하기 위한 JavaScript 코드
• 클라이언트에서 페이지를 대화형으로 만들기 위한 JavaScript 코드
• CSS 파일

런타임(또는 요청 시간)은 애플리케이션이 빌드 및 배포된 후 사용자의 요청에 대한 응답으로 애플리케이션의 실행시간을 나타냅니다.

클라이언트 및 서버

웹 응용 프로그램에서 클라이언트는 응용 프로그램 코드에 대한 요청을 서버에 보내는 브라우저를 나타냅니다. 그런 다음 서버에서 받은 응답을 사용자가 상호 작용할 수 있는 인터페이스로 바꿉니다.

서버는 애플리케이션 코드를 저장하고, 클라이언트로부터 요청을 수신하고, 일부 계산을 수행하고, 적절한 응답을 다시 보내는 데이터 센터(data centre)의 컴퓨터를 나타냅니다.

 

렌더링이란 무엇일까?

React에서 작성한 코드를 UI의 HTML로 변환하는 작업이 있습니다. 이 프로세스를 렌더링이라고 합니다.

렌더링은 서버 또는 클라이언트에서 수행될 수 있습니다. 빌드 시 미리 발생하거나 런타임 시 모든 요청에서 발생할 수 있습니다.

Next.js에서는 서버 측 렌더링 , 정적 사이트 생성 및 클라이언트 측 렌더링 의 세 가지 유형의 렌더링 방법을 사용할 수 있습니다 .

 

사전 렌더링

서버 측 렌더링 및 정적 사이트 생성은 결과가 클라이언트로 전송되기 전에 외부 데이터를 가져오고 React 구성 요소를 HTML로 변환하기 때문에 사전 렌더링 이라고도 합니다 .

 

클라이언트 측 렌더링(Client-Side Rendering)과 사전 렌더링(Pre-Rendering)

표준 React 애플리케이션에서 브라우저는 UI를 구성하기 위한 JavaScript 지침과 함께 서버로부터 빈 HTML 셸을 받습니다. 초기 렌더링 작업이 사용자의 장치에서 발생하기 때문에 이것을 클라이언트 측 렌더링(Client-Side Rendering)이라고 합니다.

 

대조적으로 Next.js 는 기본적으로 모든 페이지를 사전 렌더링(Pre-Rendering)합니다. 사전 렌더링은 HTML이 사용자 장치에서 JavaScript로 모두 수행되는 대신 서버에서 미리 생성됨을 의미합니다.

실제로 이것은 완전히 클라이언트 측 렌더링된 앱의 경우 렌더링 작업이 완료되는 동안 사용자에게 빈 페이지가 표시됨을 의미합니다. 사용자가 구성된 HTML을 볼 수 있는 사전 렌더링된 앱과 비교해보면 아래 이미지와 같다.

두 가지 유형의 사전 렌더링에 대해 논의해 보겠습니다.

 

서버 측 렌더링(Server-Side Rendering)

서버 측 렌더링을 사용하면 페이지의 HTML이 각 요청에 대해 서버에서 생성됩니다. 페이지를 대화형으로 만들기 위해 생성된 HTML, JSON 데이터 및 JavaScript 지침이 클라이언트로 전송됩니다.

클라이언트에서 HTML은 빠른 비대화형 페이지를 표시하는 데 사용되는 반면 React는 JSON 데이터 및 JavaScript 지침을 사용하여 구성 요소를 대화형으로 만듭니다(예시로 버튼에 이벤트 핸들러 연결). 이 과정을 수화(hydration) 라고 합니다 .

Next.js에서 getServerSideProps 를 사용하여 서버 측 렌더링 페이지를 선택할 수 있습니다.

 

정적 사이트 생성(Static Site Generation)

정적 사이트 생성을 사용하면 HTML이 서버에서 생성되지만 서버 측 렌더링과 달리 런타임에 서버가 없습니다. 대신 애플리케이션이 배포될 때 빌드 시 콘텐츠가 한 번 생성되고 HTML이 CDN에 저장되고 각 요청에 재사용됩니다.

Next.js에서는 getStaticProps를 사용하여 페이지를 정적으로 생성하도록 선택할 수 있습니다.

 

Next.js의 장점은 정적 사이트 생성, 서버 측 렌더링 또는 클라이언트 측 렌더링 여부에 관계없이 페이지별로 사용 ​​사례에 가장 적합한 렌더링 방법을 선택할 수 있다는 것입니다. 특정 사용 사례에 적합한 렌더링 방법에 대해 자세히 알아보려면 데이터 가져오기 문서를 참조하세요.

 

네트워크란 무엇일까?

애플리케이션 코드가 저장되고 네트워크에 배포되면 실행되는 위치를 아는 것이 좋습니다. 네트워크를 '리소스를 공유할 수 있는 연결된 컴퓨터(또는 서버)'로 생각할 수 있습니다. Next.js 애플리케이션의 경우 애플리케이션 코드를 원본 서버 , CDN(콘텐츠 전송 네트워크) 및 Edge 에 배포할 수 있습니다 . 이들 각각이 무엇인지 봅시다:

 

원본 서버

앞에서 설명한 것처럼 서버는 응용 프로그램 코드의 원본 버전을 저장하고 실행하는 주 컴퓨터를 나타냅니다.

우리는 이 서버를 CDN 서버 및 엣지 서버(Edge sever) 와 같이 애플리케이션 코드가 배포될 수 있는 다른 장소와 구별하기 위해 출처 라는 용어를 사용 합니다 .

원본 서버는 요청을 받으면 응답을 보내기 전에 몇 가지 계산을 수행합니다. 이 계산 작업의 결과는 CDN(Content Delivery Network)으로 이동할 수 있습니다.

 

콘텐츠 전송 네트워크

CDN은 전 세계 여러 위치에 정적 콘텐츠(예: HTML 및 이미지 파일)를 저장하고 클라이언트와 원본 서버 사이에 배치됩니다. 새 요청이 들어오면 사용자와 가장 가까운 CDN 위치에서 캐시된 결과로 응답할 수 있습니다.

이렇게 하면 각 요청에 대해 계산을 수행할 필요가 없기 때문에 오리진의 부하가 줄어듭니다. 또한 응답이 지리적으로 더 가까운 위치에서 제공되기 때문에 사용자가 더 빠르게 작업할 수 있습니다.

Next.js에서는 사전 렌더링을 미리 수행할 수 있으므로 CDN은 작업의 정적 결과를 저장하는 데 적합하므로 콘텐츠 전달이 더 빨라집니다.

 

엣지 서버(Edge)​

엣지는 사용자에게 가장 가까운 네트워크의 프린지(fringe​)(혹은 엣지)에 대한 일반화된 개념입니다. CDN은 네트워크의 가장자리(엣지)에 정적 콘텐츠를 저장하기 때문에 "엣지"의 일부로 간주될 수 있습니다.

CDN과 유사하게 에지 서버는 전 세계 여러 위치에 배포됩니다. 그러나 정적 콘텐츠를 저장하는 CDN과 달리 일부 에지 서버는 코드를 실행할 수 있습니다.

즉, 사용자에게 더 가까운 Edge에서 캐싱과 코드 실행 을 모두 수행할 수 있습니다.

Edge에서 코드를 실행하면 전통적으로 클라이언트 측이나 서버 측에서 수행했던 작업 중 일부를 Edge로 이동할 수 있습니다( 여기에서 Next.js가 있는 예제 참조 ). 이렇게 하면 클라이언트로 전송되는 코드의 양이 줄어들고 사용자 요청의 일부가 원본 서버로 완전히 돌아갈 필요가 없으므로 애플리케이션의 성능이 향상되어 대기 시간이 줄어듭니다.

Next.js에서는 Middleware 를 사용하여 Edge에서 코드를 실행할 수 있으며 곧 React Server Components 를 사용하여 코드를 실행할 수 있습니다.

 

이렇게 Next.js 기초 과정이 끝이 났습니다.!

이제 이를 토대로 Next.js 앱을 만들어 봅시다!