Nuxt, Next, Nest 차이점

 

Nuxt

범용 렌더링을 지원하는 Vue 애플리케이션을 만드는 프레임워크

• Nuxt는 Vue를 기반으로 하는 범용 애플리케이션을 위한 프레임워크이다.
• 서버 측에서 렌더링 된 Vue 응용 프로그램을 설정하는 모든 구성을 처리한다.
• Nuxt는 정적으로 렌더링 된 응용 프로그램도 지원한다.
• 여기에는 웹 팩, babel 및 노드에 대한 설정도 포함된다.

 

---

 

Next

범용 렌더링을 지원하는 React 애플리케이션을 만드는 프레임워크

• React를 활용하는 범용 애플리케이션을 구축하기 위한 프레임워크이다.
• 그리고 여기서 우리는 이 이름들이 왜 그렇게 비슷한지 알 수 있다.
• Next는 Nuxt가 수행하는 작업을 수행하지만 React 애플리케이션의 경우이다.

 

---

 

Nest

추가 구조 및 지원을 갖춘 노드 애플리케이션 개발을 위한 프레임워크

• Nest는 Next와 Nuxt와 전혀 유사하지 않다.
• 위에서 언급한 바와 같이, Next와 Nuxt 이 두 기술은 프런트 엔드 서버 쪽에 초점을 맞추고 있다.
• 또한 특정 프런트 엔드 프레임워크인 React와 Vue를 각각 지원한다. 
• 이와는 대조적으로, Nest는 프런트 엔드 코드에 전혀 관심이 없는 서버 측 프레임워크이다.

 

• Nest의 목표는 백엔드를 빠르게 개발할 수 있도록 돕는 것이다.
• 자바스크립트와 타입스크립트를 모두 지원한다.
• Nest는 앞쪽 끝과 관련이 없지만, 구조가 Angular와 비슷하다고 설명된다.

 

---

 

Client vs. Server-side Rendering

이미지 참조 : Walmart Labs Engineering Blog

1. 서버로부터 응답이 송신되고
2. 브라우저는 JS를 다운로드하여
3. 페이지를 렌더링하는 프레임워크를 실행하여
4. 페이지가 표시 및 대화 가능하게 한다.

 

 

1. 서버가 렌더링을 위해 브라우저에 직접 HTML 응답을 보낸다는 것을 의미
2. 이 시점에서 페이지를 볼 수 있다.
3. 동시에 브라우저는 페이지를 대화 가능하게 하기 위해
4. JS를 다운로드하고 프레임워크를 실행한다.

 

현장 성능에는 여러 척도가 있지만, 그중 하나가 "처음 페인트 칠할 시간"이다.
이것은 페이지에 볼 것이 얼마나 빨리 있는지 보고 있는 것
이 메트릭 및 기타 메트릭에서는 SSR의 성능이 더 뛰어난 경우가 많다.
특히 SSR 대 CSR의 고려 사항이다.

정적 사이트는 이러한 계산의 일부가 아니다(대개 가장 성능이 뛰어난 사이트)
이제 두 경우(Next 및 Nuxt) 모두 초기 앱 로드는 서버 측에서 렌더링된다.
그다음에는 클라이언트 측 렌더링을 사용한다.

이것이 바로 범용 렌더링입니다.

범용 자바스크립트 프레임워크란 무엇인가?
Nuxt와 Next는 "범용 자바스크립트 프레임워크"로 묘사된다.
그게 무슨 의미죠? 이것이 의미하는 것은 범용 렌더링을 지원한다는 것입니다.

 

 

 

출처 : tenmilesquare