React와 Next.js, JSP·Thymeleaf와 뭐가 다를까?

React와 Next.js, JSP·Thymeleaf와 뭐가 다를까?

 

 

음.. 이번에 새롭게 프로젝트를 시작할까 하는데, React를 사용해보려고 합니다. 정확하게 아는것이 없어서 조금 정리를 해보면서 시작할까 하네요. 일단 jsp와 thymeleaf를 주로 사용해왔기에 비교하면서 정리해보겠습니다.

​

1. JSP와 Thymeleaf (서버 중심 렌더링, SSR)

• JSP, Thymeleaf는 서버에서 완성된 HTML을 만들어 클라이언트(브라우저)로 내려주는 방식입니다.
• 즉, 사용자가 페이지를 요청하면 서버(Spring)가 DB에서 데이터를 가져와 HTML에 꽂아 넣고, 완성된 페이지를 돌려줍니다.

​

• 서버가 주도적으로 화면을 그림
• SEO(검색엔진 최적화)에 강함 (HTML이 완성된 상태라서 검색엔진이 읽기 쉬움)
• 하지만 페이지가 바뀔 때마다 새로고침이 필요해서 "앱처럼 부드럽게 동작"하진 않음

​

예시:

사용자가 /quiz 접속 → 서버에서 문제를 DB에서 가져옴 → Thymeleaf 템플릿에 데이터 삽입 → 완성된 HTML 반환

---

2. React (클라이언트 중심 렌더링, CSR)

• React는 Facebook(현 Meta)에서 만든 UI 라이브러리입니다.
• 서버는 보통 **데이터(JSON)**만 내려주고, 브라우저가 React를 이용해 화면을 동적으로 조립합니다.

​

• 브라우저(클라이언트)가 주도적으로 화면을 그림
• 화면의 일부만 교체 가능 → 새로고침 없이 "앱 같은 부드러운 UX" 가능
• SEO에는 약점이 있음 (검색엔진이 JS를 실행 못하면 내용이 안 보일 수 있음)

​

예시:

사용자가 /quiz 접속 → 서버에서 { question: "...", options: [...] } JSON 응답 → React가 받아서 화면에 그려줌

---

 

3. Next.js (React 프레임워크)

• React는 UI만 담당하는 "도구"라면, Next.js는 그 위에 얹는 프레임워크입니다.
• 스프링부트가 스프링을 더 쉽게 실무에서 쓰도록 도와주는 것처럼, Next.js는 React를 더 강력하게 만들어줍니다.

​

• SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성) 지원 → SEO 문제 해결
• 폴더 기반 라우팅 (파일만 만들면 자동으로 페이지 생성)
• API Routes 지원 (간단한 백엔드 기능 제공)
• 첫 화면은 서버에서 빠르게 주고, 이후에는 React처럼 부드럽게 동작하는 "하이브리드 방식"

---

4. 정리

구분	JSP / Thymeleaf	React	Next.js
렌더링 주체	서버	클라이언트	서버 + 클라이언트 혼합
응답 형태	완성된 HTML	JSON 데이터	HTML(SSR) + JSON
SEO	강함	약함	강함 (SSR/SSG)
UX	새로고침 필요	앱처럼 부드러움	빠른 초기 로딩 + 앱 UX
성격	서버 사이드 템플릿 엔진	UI 라이브러리	React 프레임워크

---

5. 마무리

• JSP/Thymeleaf는 서버에서 모든 걸 처리하는 전통적인 방식
• React는 브라우저에서 화면을 조립하는 최신 방식
• Next.js는 React의 단점을 보완하고, SEO/SSR까지 챙긴 실무용 프레임워크

​

약간 스프링과 비교해서 보면 아래처럼 생각해도 될거같아요.

→ React는 "스프링"

→ Next.js는 "스프링부트"