Next.js와 Nuxt.js의 서버 측 렌더링, 용어의 차이를 표에 정리해 보았습니다.

소개

안녕하세요, dtakkiy입니다!

나는 프론트 엔드 개발을 vue.js를 기반으로 한 Nuxt.js에서 시작했습니다.
그리고 현재 React.js를 기반으로 Next.js 개발을 배우고 있습니다.
Next.js의 문서를 읽는 데 있어서, 아무래도 Nuxt.js와 비교해 기술을 이해하려고 하는 자신이 있었습니다.
단지 제품이 다르기 때문에 당연한 일입니다만, 비슷한 개념이 있음에도 불구하고, 양자로 사용되는 말은 꽤 다릅니다.

그래서 이번에는 내가 문서를 읽을 때, 특히 이해하기 어려웠던 서버 사이드 렌더링으로 짜내고 Next.js와 Nuxt.js에서 사용하는 단어를 비교표로 정리해 보았습니다.
또 SPA 등의 오해하기 쉬운 관련 용어의 해설도 넣어 보았습니다.

또한 비교표에서 사용한 단어는 각 공식 문서의 표기를 이용하고 있습니다.

공식 문서

next.js

nuxt.js

쓰기시 버전

next.js: version 10.2

nuxt.js: version 2.14

비교표 및 관련 용어

비교표

꽤 간단하게 정리했습니다.

Next.js에서는 기본적으로 Static Generation가 선택되는 반면 Nuxt.js에서는 SSR가 선택됩니다.

관련 용어 해설

이어서 오해하기 쉬운 관련 용어의 해설을 합니다.

rendering(렌더링): 어떤 데이터를 바탕으로 표시 내용을 생성하는 것.

Pre-rendering(프리렌더링): 사전에 서버측에서 HTML을 생성하는 것. 도입에 의해, 일반적으로 클라이언트 측에서 표시가 고속화된다. 일반 React.js와 Vue.js에서는 프리 렌더링이 수행되지 않고 클라이언트에서 렌더링됩니다.

SPA: Single page Application의 약어. 일반적으로 여러 페이지가 아니라 단일 페이지로 구성된 웹 응용 프로그램을 의미합니다. 대표적인 앱으로는 Facebook 메신저 등이 있다.

PWA: Progressive Web Apps의 약자. 웹 앱이면서 네이티브 앱과 동일하게 동작하는 애플리케이션. 푸시 알림이나 오프라인에서의 동작 등 네이티브 앱 특유의 기능을 이용할 수 있다.

결론

어땠습니까?
독자 쪽의 서버 사이드 렌더링의 기술 이해의 도움이 되면 다행입니다.