router 와 window.location.href 차이

router 와 window.location.href 차이

Next.js 방식

router.push() / router.replace() / router.back()

 

• SPA 방식 이동 (Single Page Application)
• 페이지 전체 리로드 없이 클라이언트 쪽에서 부드럽게 이동
• 상태(state), 세션, 리액트 컴포넌트들 유지됨
• 빠름!
• Next.js 내부 라우팅 시스템을 사용해서 이동 (preloading 기능도 활용 가능)

➡️ 브라우저 새로고침 없이 URL만 바뀌고 화면 전환.

 

브라우저 기본 이동

window.location.href = '/dashboard';

• 완전한 페이지 리로드 발생 (서버로 새 요청 보냄)
• 브라우저가 새로 페이지를 요청함 (HTML 전체 다시 받아옴)
• 리액트 상태(state) 초기화됨
• Next.js 라우터를 거치지 않음 (앱처럼 부드럽지 않음)

➡️ 진짜로 새로고침하고 이동하는 느낌.

 

 

비교 항목                                                                router.push()                                                       window.location.href

새로고침 여부	❌ 안 함 (SPA 이동)	✅ 새로고침 함
속도	빠름	느림 (새 요청)
상태 유지	유지됨	초기화됨
UX (사용자 경험)	부드러움	끊김
Next.js 라우터 연동	O	X

 

 

 

✨ 그래서 언제 뭐 써야 해?

• Next.js 앱 내부 페이지 이동:
  ➔ router.push() 또는 router.replace() 쓰는 게 무조건 좋음.
• 외부 사이트로 이동하거나 새로고침을 의도하는 경우:
  ➔ window.location.href 써야 함.

🔥 예를 들면

상황                                                                추천 방법

 

로그인 성공 후 홈으로 이동	router.replace('/')
특정 상품 상세 페이지 이동	router.push('/products/123')
외부 링크(네이버 등)로 이동	window.location.href = 'https://naver.com'
로그아웃 후 완전 초기화 이동	둘 다 가능, but 보통 window.location.href = '/' 많이 씀

 

router.push() / router.replace() / router.back() 차이

메서드                                          특징

router.push(url)	URL로 이동 (기존 브라우저 히스토리에 추가됨 → 뒤로가기 가능)
router.replace(url)	URL로 이동 (현재 히스토리를 덮어씀 → 뒤로가도 이전 페이지로 못 돌아감)
router.back()	브라우저 히스토리에서 한 단계 뒤로 감 (뒤로가기 버튼 누른 것처럼)

 

• 전부 새로고침 없이 클라이언트 쪽 라우팅함.
• Next.js 라우터 시스템 (next/navigation or next/router) 사용함.
• **상태(state)**가 유지됨. (앱 끊기지 않음.)