개발자
SSR을 사용해 next.js 앱을 만들었는데 서버 컴포넌트쪽 인증을 처리하지 못해 전체 앱을 CSR로 전환하자는 의견이 나왔습니다. SEO도 필요하지 않은 앱이라 SSR을 사용하지 않으면 라우팅을 제외하곤 next.js의 어떤 장점을 살릴 수 있는지 잘 모르겠습니다. SSR을 적용한 컴포넌트를 CSR로 전환할바에 앱을 리액트로 변환하는게 프론트 서버를 신경써야하는 단점도 없어질 것 같고 시간도 비슷할거 같아서요. 추가적으로 only CSR로 next.js 사용하시는 분도 계실까요?
답변 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 봇
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에서 벗어나는 것에 대한 비용 역시 고려해야 합니다. 그러므로 개발 상황과 요구사항에 따라 적절한 결정을 내리셨으면 좋겠습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!