[Bug]: 단계 1 -> 단계 2에서 새로고침할 때 Next hydration 이슈 관련 문의

[NukeKang]

Package Scope

@use-funnel/browser

Bug description

'use client';

import { useFunnel } from '@use-funnel/browser';
import { Step1, Step2, Step3 } from './components';

export default function Page() {
  const funnel = useFunnel<{
    step1: InterestsStep;
    step2: InterestsEducationStep;
    step3: InterestsHealthStep;
  }>({
    id: 'interests-funnel',
    initial: {
      step: 'step1',
      context: {},
    }
  });

  const [selectedInterests, setSelectedInterests] = React.useState<Set<Interest>>(new Set());
  const [selectedInterestsEducation, setSelectedInterestsEducation] = React.useState<Set<InterestEducation>>(new Set());
  const [selectedInterestsHealth, setSelectedInterestsHealth] = React.useState<Set<InterestHealth>>(new Set());

  function toggleSetItem<T>(currentSet: Set<T>, item: T, setFunction: (newSet: Set<T>) => void) {
    const newSet = new Set(currentSet);

    if (newSet.has(item)) {
      newSet.delete(item);
    } else {
      newSet.add(item);
    }

    setFunction(newSet);
  }

  const toggleInterest = (interest: Interest) => {
    toggleSetItem(selectedInterests, interest, setSelectedInterests);
  };

  const toggleEducationInterest = (interest: InterestEducation) => {
    toggleSetItem(selectedInterestsEducation, interest, setSelectedInterestsEducation);
  };

  const toggleHealthInterest = (interest: InterestHealth) => {
    toggleSetItem(selectedInterestsHealth, interest, setSelectedInterestsHealth);
  };

  return (
    <>
      <div className="flex items-center gap-[2px] py-2">
        <hr className="border-accent w-full border-b-2" />
        <hr
          className={cn(
            'border-fillCoolNeutral100 w-full border-b-2',
            funnel.index === 1 || funnel.index === 2 ? 'border-accent' : 'border-fillCoolNeutral100',
          )}
        />
        <hr
          className={cn(
            'border-fillCoolNeutral100 w-full border-b-2',
            funnel.index === 2 ? 'border-accent' : 'border-fillCoolNeutral100',
          )}
        />
      </div>
      <funnel.Render
        step1={({ history }) => (
          <Step1 selectedInterests={selectedInterests} toggleInterest={toggleInterest} history={history} />
        )}
        step2={({ history }) => (
          <Step2
            selectedInterestsEducation={selectedInterestsEducation}
            toggleEducationInterest={toggleEducationInterest}
            history={history}
          />
        )}
        step3={({ context }) => (
          <Step3
            selectedInterestsHealth={selectedInterestsHealth}
            toggleHealthInterest={toggleHealthInterest}
            interests={context.interests}
            interestsEducation={context.interests_education}
          />
        )}
      />
    </>
  );
}

안녕하세요 혹시 next v14 app router 환경에서 step2인 상황에서 새로고침을 하게되면 step1으로 갔다가 다시 step2로 가게 되면서hydration error가 발생하는데 이럴 경우 어떤 방식으로 해결해야할지 궁금합니다. 서버입장에서는 step1 기준으로 렌더링을 하는데 step2가 나와서 에러가 발생하는 것으로 예상은 되는데 이럴 경우 guard나 parse를 사용해야하는것인지..

Expected behavior

No response

To Reproduce

No response

Possible Solution

No response

etc.

No response

[minuukang]

@use-funnel/browser 의 경우 브라우저의 히스토리 상태를 기반으로 동작하기 때문에 서버에서 Hydration을 기대하기 어렵습니다. 그래서 오로지 클라이언트에서만 실행될 수 있도록 상위 컴포넌트에서 mount 후에 렌더링 하게하거나, next/dynamic 의 컴포넌트를 통해 ssr: false 형태로 퍼널 컴포넌트를 만들어야합니다.

이 부분 문서에 보강해두겠습니다.