Next js 면접 스터디
-
Next js 란 무엇인가요 ?
Next js 는 리액트 기반의 풀 스택 프레임워크로,
SEO, 이미지 및 폰트 최적화, 하이브리드 렌더링 등을 지원하여
리액트 단일로는 구현이 힘든 복잡한 웹 어플리케이션 개발을 간편화 할 수 있습니다. -
Next js 는 React 의 어떤점을 보완해주나요 ?
Next js 는 복잡한 설정을 하지 않아도 프레임워크를 사용하기가 쉬우며,
자바스크립트를 이용한 풀 스택 개발이 가능하고,
추가적으로 설정해주지 않아도 자체적으로 SSR 과 코드 스플리팅을 지원하며,
하이브리드 렌더링을 지원하여 서비스 의도 맞춘 웹 개발이 가능합니다.
- CSR 의 특징, 장/단점에 대해서 설명해주세요.
클라이언트 사이드 렌더링은 클라이언트에서 서버로부터 받은 애플리케이션 코드를
DOM 요소로 변환하여 브라우저에 렌더링 하는 방식입니다.
한번 로딩을 한 이후에는 페이지를 벗어나지 않고 애플리케이션을 이용할 수 있는
SPA 방식으로 작동하기 때문에 빠른 UX 를 제공합니다.
또한, 필요할 때 부분적으로만 데이터를 가져올 수 있으므로 서버의 부하가 상대적으로 적습니다.
하지만, 첫 페이지 로딩시간이 길며 자바스크립트의 활성화가 필수적이고,
클라이언트에서 렌더링 하기 이전에는 빈 HTML 을 검색엔진이 서치하게 되므로
SEO 최적화가 어렵습니다. 그리고 클라이언트에서 모든 자바스크립트 코드를 취급하므로
보안에도 상대적으로 취약합니다.
- SSG 의 특징에 대해서 설명해주세요.
CSR 의 단점을 보완하기 위해 서버에서 렌더링을 하는 방식 입니다.
그 중 SSG는 빌드 시점에 React 코드를 HTML 로 변환하여 정적인 사이트를 생성하는 방식입니다.
페이지 로딩이 빠르며 SEO 최적화나 보안강화, CDN에 캐시가 가능하다는 장점을 가지고 있지만,
정적으로 페이지를 생성해놓는 방식이기 때문에 실시간으로 데이터를 업데이트 할 수 없고,
사용자별로 정보를 제공하는 페이지를 제공하기 까다롭다는 단점이 있습니다.
- ISR(Incremental Static Regeneration)의 특징에 대해서 설명해주세요.
SSG 의 단점을 보완하기 위해서 SSG 와 동일한 원리로 정적인 사이트를 생성하지만
주기적으로 데이터를 업데이트 하여 재렌더링 하는 방식입니다.
SSG 의 장점을 모두 가지고 있으며 추가적으로 주기적으로 데이터를 업데이트 할 수 있다는
장점이 있습니다.
그러나 이러한 주기적인 업데이트가 실시간이라고 할 수는 없으며,
정적으로 사이트를 생성하는 것은 동일하기 때문에 사용자별 정보 제공이 어렵습니다.
-
SSR의 특징에 대해서 설명해주세요.
미리 정적으로 렌더링을 하는 SSG, ISR과 달리 SSR은 클라이언트 요청시 렌더링을 진행합니다.
때문에 실시간으로 데이터를 처리할 수 있으며 사용자별 정보제공이 가능합니다.
그러나 요청시마다 렌더링을 해야하므로 상대적으로 느릴 수 있으며,
서버에 과부화가 걸릴 수 있습니다. 이를 오버헤드가 높아진다고도 합니다.
또한, 요청시 마다 렌더링을 하는 방식이므로
비슷하게 서버에서 렌더링을 하는 SSG, ISR과 달리 CDN에 캐싱을 할 수 없습니다. -
Next js 의 하이브리드 웹 앱이 무엇인가요 ?
하나의 페이지 내에서도 컴포넌트 별로 다른 렌더링 방식을 사용할 수 있는
Next js 의 장점입니다.
이러한 장점을 이용해서 필요한 부분에 필요한 렌더링을 진행할 수 있기 때문에
최적화된 웹 어플리케이션을 사용자에게 제공할 수 있습니다. -
next js 의 하이드레이션에 대해서 설명해주세요.
Next.js의 하이드레이션은 서버에서 렌더링된 HTML을 클라이언트에 전송한 후,
자바스크립트를 통해 해당 페이지를 완전히 인터랙티브하게 만드는 과정을 말합니다.
이를 통해 첫 페이지 로딩 시간을 줄이고, 사용자 경험을 향상시킬 수 있습니다.
