JSP와 SPA의 페이지 이동

과거의 습관: JSP에서의 리다이렉트

전통적인 JSP, Servlet 기반 웹 프로젝트에서는 페이지 전환이 필요할 때 아래와 같은 코드를 자주 사용했습니다.

<% response.sendRedirect("/login.jsp"); %>

혹은 JavaScript로 직접 URL을 바꾸는 방식도 흔했죠.

<script>
  location.href = "/home.jsp";
</script>

이 방식은 페이지 전체를 서버에 다시 요청해서 새로 고침합니다. 다시 말하면, HTML, CSS, JS, 이미지까지 모든 자원이 다시 로드되기 때문에 UX 관점에서 불편함이 있습니다.

---

왜 문제가 될까?

문제점	설명
전체 새로고침 발생	화면이 깜빡이며 사용자 경험이 떨어집니다
느린 페이지 전환	매 요청마다 서버에서 다시 렌더링
클라이언트 상태 유실	로그인 여부나 입력값 등이 초기화될 수 있습니다
SEO에 불리할 수도	불필요한 리다이렉트는 검색 엔진 최적화에 부정적인 영향을 줄 수 있습니다

---

Next.js & React에서의 전환 방식: Link 컴포넌트

React 기반 SPA(Single Page Application)에서는 페이지 전환조차도 컴포넌트 형태로 처리합니다. 이를 위해 Link 컴포넌트를 사용하면 새로고침 없이도 자연스럽고 빠른 이동이 가능합니다.

Next.js 예제

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>홈 화면</h1>
      <Link href="/about">
        <a>About 페이지로 이동</a>
      </Link>
    </div>
  );
}

작동 방식

• 실제 페이지 이동은 JavaScript로 이루어집니다
• 브라우저는 새로고침 없이 URL만 변경하고 해당 컴포넌트를 불러옵니다
• React의 Virtual DOM 덕분에 필요한 부분만 로드됩니다

---

실제 코드 비교

구분	JSP 방식	React 방식
코드	<% response.sendRedirect("/mypage.jsp"); %>	<Link href="/mypage"><a>마이페이지</a></Link>
동작	서버로 새 요청 (전체 새로고침)	클라이언트 라우팅 (부분 렌더링)
UX	깜빡임, 느림	부드러움, 빠름
상태 유지	어려움	가능함

---

어느 경우 Link 대신 리다이렉트가 필요할까?

• 로그인 후 자동 이동: router.push('/dashboard')
• 인증 실패 시 서버에서 리다이렉트: getServerSideProps or next.config.js
• 외부 URL로 이동: window.location.href

하지만! 사용자 UI 클릭으로 인해 이동한다면 **무조건 Link**를 사용해야 합니다.

---

정리

• 과거의 sendRedirect, location.href는 서버 중심 사고
• React/Next.js에서는 클라이언트 중심 전환 방식을 활용하자
• 새로고침 없는 페이지 전환 = 더 나은 UX + 빠른 반응성
• 이제는 Link 컴포넌트가 기본이다!