개발자

SSR을 사용하지 않는 next.js 앱의 장점은 뭐가 있나요?

2024년 03월 03일조회 1,794

SSR을 사용해 next.js 앱을 만들었는데 서버 컴포넌트쪽 인증을 처리하지 못해 전체 앱을 CSR로 전환하자는 의견이 나왔습니다. SEO도 필요하지 않은 앱이라 SSR을 사용하지 않으면 라우팅을 제외하곤 next.js의 어떤 장점을 살릴 수 있는지 잘 모르겠습니다. SSR을 적용한 컴포넌트를 CSR로 전환할바에 앱을 리액트로 변환하는게 프론트 서버를 신경써야하는 단점도 없어질 것 같고 시간도 비슷할거 같아서요. 추가적으로 only CSR로 next.js 사용하시는 분도 계실까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

인기 답변

김하림님의 프로필 사진

1. 정적 내보내기(`next export`)를 활용하면 정적인 콘텐츠가 있는 페이지의 경우 첫 페이지 로딩 속도가 빨라진다는 장점이 있습니다. 2. Next.js에서 내부적으로 제공하는 다양한 라이브러리를 사용할 수 있습니다. 대표적으로 App/Page Router가 내장되어 있어서 React Router를 설치할 필요가 없습니다. 또, 다국어 처리를 위한 i18n 이나 next/image 같은 이미지 최적화 라이브러리도 유지보수를 오피셜로 하고 있기 때문에 좀 더 안정적인 서비스 운영이 가능합니다. 3. Next.js 깃허브 examples를 들어가보면 유명한 라이브러리를 연동한 기본적인 연동 예제(ex: zustand, apollo, jest ...)를 제공하기 때문에 다양한 라이브러리와 연동이 쉽습니다. 전체적인 상황을 봐야하겠지만, 굳이 새 프로젝트를 만들어야 하는 상황이 아니라면 CSR로 Next.js를 운영하는 것도 프레임워크의 지원을 받을 수 있는 이점이 있기 때문에 좋은 선택입니다.

정주영님의 프로필 사진

App/Page Route가 내장되어있어 빠르게 페이지단위로 대규모 작업을 나눠서 할 수 있다는 장점과 이는 react-route를 대신해 자동으로 폴더별로 라우팅이 됩니다. App/api로 백앤드 API를 만들고 호출하기 쉬워진점(현업에서는 실제로 풀스텍으로 사용하지는 않는거 같습니다), SSR을 사용하지 않는다고 해도 랜더링방식과는 별개로(ssr,isr,csr,ssg) 미리 Nextjs가 전페이지를 돌아보며 프리랜더링 할 수 있는 모든것을 서버에서 랜더링하여 내려주게 되어 빠르게 ui를 사용자에게 제공하는것 직접 구현하지 않아도 코드 스플리팅이 된다는것 등이 있을거 같네요. 추가로 vercel에 배포가 쉬워진것?(CI/CD)

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 03일

Next.js를 CSR(Client Side Rendering)로만 사용해도 효과적인 이유는 크게 세 가지입니다. 1. Automatic Code Splitting: 자동 코드 분할을 통해 각 페이지가 필요한 것만 로드됩니다. 이렇게 되면 앱의 전체 크기가 크더라도 필요한 페이지만 빠르게 로드되어 초기 전송 시간이 줄어들고, 따라서 앱의 성능이 향상됩니다. 2. Easy routing and Link component: Next.js의 라우팅 시스템은 매우 직관적입니다. pages 디렉토리 내에 있는 모든 JS 파일은 자동으로 route 역할을 합니다. 또한 <Link> 컴포넌트를 사용하여 쉽게 네비게이션을 구현할 수 있습니다. 3. Built-in CSS support: Next.js는 내장된 CSS와 Sass 지원을 포함해 여러 스타일링 옵션을 제공합니다. SSR이 꼭 필요하지 않은 경우에도 위와 같은 이유로 Next.js는 좋은 프레임워크 선택이 될 수 있습니다. 그러나 추가적으로 SSR 대신 Static Site Generation(SSG)과 ISR(Incremental Static Regeneration) 방식을 고려해보시는 것도 추천드립니다. 두 방법 모두 SEO에 유리하며, 동시에 최초 요청자에게도 정적 파일을 제공함으로써 빠른 응답 속도를 보장할 수 있습니다. 더 나아가 ISR은 데이터가 변경될 때 자동으로 재생성되므로 실시간성을 유지하면서도 앱의 성능과 안정성을 향상시킬 수 있습니다. 세부적인 상황에 따라 다르겠지만, 일반적으로 웹앱을 처음부터 React로 전환하는 것은 시간이 오래 걸릴 수 있으며, 이미 사용하던 next.js에서 벗어나는 것에 대한 비용 역시 고려해야 합니다. 그러므로 개발 상황과 요구사항에 따라 적절한 결정을 내리셨으면 좋겠습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!