인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 Vue.js의 기본 동작 방식이 CSR이고, Nuxt.js의 기본 동작 방식이 SSR 이라고 알고 있습니다. 요 부분은 정확히 다시 체크 해 보시면 좋을 것 같습니다. 상사분께 여쭤보는 것 말고도 인터넷의 기술 아티클들이나 AI 도구를 활용해보시면 좋을 것 같아요 😀

React.js 앱은 별도의 커스터마이징이나 도구를 사용하시지 않으면 기본적으로는 CSR 방식으로 동작합니다. 따라서 FCP(초기 로딩 속도)나 Open Graph 태그 적용 측면에서 다소 불리하다는 단점이 있는데요

이를 보통은 Next.js를 사용해 해결합니다. Next.js는 React.js를 포함하는 메타 프레임워크(쉽게 확장판 개념이라고 이해하시면 됩니다)로써 SSR 뿐만 아니라 이미지 최적화, 폰트 최적화, 페이지 라우팅 등등 굉장히 다양한 기능들을 추가로 제공합니다. 결론적으로 Next.js를 사용하면 React.js 앱을 더 강화해서 개발하실 수 있다고 이해하시면 좋을 것 같아요

보통 React.js를 현업에서 사용할 때에는 React.js가 제공하는 기능이 너무 한정적이기 때문에 추가 기능을 제공하는 여러 라이브러리를 조합해서 사용하곤 합니다. 그런데 너무 다양한 라이브러리가 하나의 프로젝트에 추가되다 보면 아무래도 라이브러리간의 호환성이나 효율측면에서 다소 복잡해 지는 면이 있습니다. 또 사람들마다 선호하는 라이브러리가 다르다보니 하나의 표준이 정해지지 않아서 생기는 불편함도 겪을 수 있죠

Next.js는 이런 상황에 표준을 제시하기 위해 등장한 프레임워크라고 이해하시면 좋을 듯 싶습니다. React.js가 제공하지 않는 아주 다양한 기능을 제공함으로써 하나의 표준이 되는 확장판 프레임워크라고 설명드릴 수 있을 것 같아요

Nuxt.js 가 SSR(Server-Side Rendering) 이고 vue.js 만 사용한 게 CSR(Client-Side Rendering) 아닌가요 ?

이와 비슷하게 리액트 진영에서도 Next.js 로 리액트를 작성하고 있지요..

Next.js 가 Nuxt 마냥 웹 프레임워크 역할을 하고, 리액트로 작성하지요

한입 Next.js 수강예정이시면 거기서 SSR, SSG, CSR, ISR 같은 개념은 제대로 배우실 겁니다.

안녕하세요, 인프런 AI 인턴입니다. 소히님.

리액트와 관련된 질문을 주셨군요. 리액트와 그것의 서버사이드 렌더링(SSR) 가능성에 관한 내용에 대해 간단히 설명드리겠습니다.

리액트와 CSR, SSR

• 리액트(React.js): 기본적으로 클라이언트 사이드 렌더링(CSR)을 지원하는 라이브러리입니다. 이는 클라이언트에서 모든 JavaScript를 받아와서 브라우저에서 렌더링을 수행하는 방식을 말합니다. 따라서 앱이나 웹사이트가 초기 로딩 시에는 더 많은 데이터를 받아야 해서 초기 페이지 로딩 속도가 느려질 수 있다는 단점이 있습니다.
  

Next.js의 역할

• Next.js: 리액트를 기반으로 하는 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 보다 쉽게 구현할 수 있게 해줍니다. 이는 SEO 개선과 초기 로드 속도를 최적화하는데 강점을 가지며, 페이지 별로 CSR, SSR, SSG를 혼합하여 사용할 수 있다는 유연성을 제공합니다.
  

이를 통해 소히님이 현재 진행 중인 프로젝트에서 SSR과 CSR의 차이를 이해하고, 향후 진행할 프로젝트에서 Next.js의 장점을 활용하여 더욱 성능 최적화된 애플리케이션을 개발하실 수 있기를 바랍니다.

추가적인 정보는 “리액트와 SSR/CSR의 차이”를 다루는 다음 링크에서 확인하실 수 있습니다:
- Next.js와 SSR의 적절한 사용

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.