인프런 커뮤니티 질문&답변
작성한 질문수
스프링부트와 리액트 연동관련해서
해결된 질문
작성
·
54
0
스프링부트와 리액트를 연동하는 강의를 본격적으로 듣기전에 궁금한게 있어서 글을 남깁니다.
스프링부트로만 작업을 할경우 저희에겐 타임리프라는 SSR 기술이있어서 서버의 데이터도 쉽게 웹페이지에 전달할 수 있었습니다. 하지만 리액트의 경우 타입스크립트를 기반으로한 next.js 기술이 있는데 이 기술은 node.js를 상정하고 만들어진 기술인 것 같습니다.
이때 next.js 기술이 스프링부트의 타임리프를 대체할만한 SSR기술인지 아니면 next.js 같은 SSR기술이없어도 서버의 데이터를 쉽게 웹페이지에 전송할 수 있는지 궁금합니다. 기술이 필요하다면 어떤 종류의 기술을 익히는 것이 좋을지 알려주시면 너무 감사드립니다.
답변 2
0
Next.js는 자칭 풀스택 프레임워크라고 합니다. 즉 SSR과 CSR 모두를 활용할 수 있는 프레임워크라
프론트 엔드 APP 개발을 위한 화면에 대한 모든 것을 처리하는 역할이라고 볼 수 있을 듯 합니다.
타임리프를 이용해도 SSR을 할 수는 있지만 Next.js나 Remix등은 좀 더 사용자의 화면내에서의 활동이 많은 경우에 적합하다고 생각합니다. 음.. 궁색해 보이긴 하는데 인터넷의 모든 설명이 좀 그렇긴 합니다. (그렇다면 그냥 부트에 jQuery를 쓸때랑 차이가 없으니)
그래서 제 개인적으로는 SNS성격은 Next, Remix, React가 맞고, e커머스 쪽은 부트와 Next가 맞다고 생각합니다.
부트는 점 점 API 서버의 용도로 변해가고 있다고 보는게 맞다고 생각합니다.
제 생각에는 사용자가 접하는 모든 화면은 Next.js나 Remix 혹은 React의 CSR이 될 것이고, 데이터를 여기저기 제공하는 역할로 스프링 부트가 사용될 것이라고 생각합니다. Next.js가 데이터베이스를 연동할 수 있기는 하지만 이제 API를 이용한 호출이 보편화되었다고 생각합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이동건님.
React와 Spring Boot를 이용한 웹 애플리케이션 개발 과정에 대한 질문이시군요. Spring Boot에서의 SSR(Server-Side Rendering) 기술로는 주로 타임리프(Thymeleaf)를 사용하여 서버에서 HTML을 렌더링하는 방식입니다. 반면, React의 경우 클라이언트 사이드 렌더링(CSR)을 기본으로 하는데, 이를 보완하기 위해 서버 사이드 렌더링 기능을 제공하는 도구로 Next.js가 인기를 얻고 있습니다.
Next.js와 Spring Boot의 SSR 비교
Next.js: React 애플리케이션을 위한 SSR 프레임워크로, 사전 렌더링을 지원합니다. 이는 React 앱을 서버에서도 렌더링하여 더 나은 SEO와 첫 로드 속도 개선을 제공합니다. Next.js는 Node.js 환경을 기본으로 하기 때문에, Spring Boot와는 별개의 서버로 운영됩니다.
Spring Boot + Thymeleaf: 주로 서버에서 HTML을 랜더링하는 방식으로 운영됩니다. 이 방식은 한 번의 요청에 대해 페이지 전체가 전송되기 때문에, 데이터 갱신이나 UI 상호작용이 많은 경우 재렌더링 부담이 클 수 있습니다.
결론 및 추천하는 기술
만약 Spring Boot를 사용하면서 React의 장점을 함께 활용하고자 한다면, Next.js의 SSR 기능을 사용하거나, 어플리케이션의 주요 로직은 CSR 방식으로 React에서 수행하고, 필요한 초기 데이터만 SSR로 처리해 페이지의 초기 로딩 경험을 개선할 수 있습니다. 이는 SEO가 중요한 경우 특히 유용합니다.
Next.js는 SSR 외에도 Statics Generation(정적 사이트 생성) 등 다양한 방식을 지원하니 프로젝트 요구사항에 따라 적절히 활용할 수 있을 것입니다.
아래 링크에서 React와 Spring Boot 관련 질문과 답변을 참고하여 더 많은 정보를 얻으실 수 있습니다:
- 리액트와 Spring Boot 연동 방법 관련 질문
이동건님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.