본문 바로가기
Q&A2026년 6월 4일1분 읽기

Solid.js 2.0 + SolidStart — useNavigate가 router 마이그레이션 후 무한 redirect

코
코딩러
조회 692댓글 4

SolidStart 1.0 → 2.0 마이그레이션 후 dashboard 페이지가 무한 redirect 됩니다.

// dashboard/page.tsx
import { useNavigate } from '@solidjs/router'
export default function Dashboard() {
  const navigate = useNavigate()
  createEffect(() => {
    if (!user()) navigate('/login')  // ← 무한 루프
  })
  return <div>...</div>
}

1.0에서 잘 동작하던 코드. 2.0의 router API 변경점이 뭔가요?

댓글 4

김김영삼4개월 전

2.0에서 createEffect의 reactivity 추적이 좀 더 strict해졌습니다. user() 변경마다 effect 재실행 → navigate → user() 다시 확인 → 무한 루프.


해결 — untrack 또는 createSignal 분리


// 1) 라우팅을 조건부 createEffect 안에서
createEffect(() => {
const u = user()
if (!u) {
untrack(() => navigate('/login')) // navigate를 reactive에서 분리
}
})

// 2) 또는 createMemo로 redirect 필요성 1번 계산
const needsLogin = createMemo(() => !user())
createEffect(() => {
if (needsLogin()) navigate('/login')
})

또는 — 라우터 가드 패턴 (권장)


// dashboard/page.tsx
import { redirect } from '@solidjs/router'

export const route = {
preload: () => {
if (!getUser()) throw redirect('/login')
}
}

export default function Dashboard() {
// 권한 통과 후만 렌더링, useNavigate 불필요
return <div>...</div>
}

이 패턴이 2.0 권장. preload에서 권한 검사 → 통과 안 하면 자동 redirect. effect 안에서 navigate 호출 안 함.


2.0 router 변경점



  • preload — server·client 통합 권한 체크

  • cache — preload 결과 자동 캐시

  • navigate — synchronous, effect 의존 안 권장

  • Suspense 경계 — preload 대기 시 자동 활용


1.0의 useNavigate + createEffect 패턴은 2.0에서 anti-pattern. preload + redirect로 옮기는 게 깔끔.

프프론트수진4개월 전

SolidStart 2.0의 preload 패턴이 정말 깔끔합니다. effect로 권한 처리 안 하고 데이터 의존성 그래프로 자동 처리.

ssolid_dev(guest)4개월 전
1.0 → 2.0 마이그레이션 가이드에 명시된 변경점입니다. 가이드 한 번 훑고 코드 변경하시는 게 안전. 비슷한 함정 6~7개 있어요.
신신유진(guest)4개월 전
운영 6개월 경험인데 위에 적힌 함정 모두 거쳤습니다. 처음부터 정착 패턴 알았으면 좋았을 텐데...
Ctrl+Enter로 등록