선생님 nextjs13 으로 만들고있는게있는데

[정중식]

궁금한게있어요 챗지피티에 물어봐도 속시원한 답변이없어서요.

nextjs13은 처음 page.js와 layout.js 등등이있잖아요.

여기서 제가 말하는  page.js는 음.. 제가 nextjs13버전 미만은 보질않아서 모르겠지만 대충 _app.js같은거라고 생각을하고있는데
그러니까 초기페이지 초기에 웹에들어오면 page.js부터 마주치는거라고 생각하고있어요.

근데 제가 지금 투두리스트를 만들고있는데,
처음방문한 사람은 투두리스트 튜토리얼 페이지를 보여주고있어요


튜토리얼 마지막 페이지에서 다음 버튼을누르면

로컬스토리지set( 튜토리얼페이지:'true');,
      router.push('/todo');

해서 /todo 페이지에 가게끔해주고,

  useEffect(() => {
    if (localStorage.getItem('tutorialCompleted') === 'true') {
      redirect('/todo');
    }
  }, []); 
코드를 이용해서 튜토리얼 페이지에 접속하면 /todo로 가게끔해주고있어요.

page.js( _app.js 라고 생각해주세요 (맞나?)) 에는 이렇게 해놨어요.

import TutorialPage from '@/components/tutorial/TutorialPage';

export default function Home() {
  return (
    <>
      <TutorialPage />
    </>
  );
}

근데 이렇게해놓으니까 처음 튜토리얼을 다 끝마친사람이 웹에 다시 접속했을때, 튜토리얼 페이지가 잠시 보였다가 /todo 페이지로 가게되는데..
이걸 방지하려면 어떡해야할까요?

메인 page.js는 use client로 만들고싶지않아요. 방법이있을까요?

[codingapple]

로컬스토리지말고 쿠키에다가 저장해놓으면 서버컴포넌트나 미들웨어에서도 출력가능합니다

[정중식]

근데 쿠키는 유효기간을 설정해주지않으면, 웹사이트를 닫으면 쿠키도 사라진다고 해서,
로컬스토리지에 저장해주었습니다. 유효기간이 필요없고 튜토리얼을 끝내면 유저는 다시는 튜토리얼페이지를 볼 필요가 없을거라 판단해서요.

튜토리얼 페이지 코드 일부인데요

'use client';

const nextSlide = () => {
    setCurrentSlide((prevSlide) =>
      prevSlide === currentSlide - 1 ? 0 : prevSlide + 1
    );

    if (currentSlide === 3) {
      localStorage.setItem('tutorialCompleted', 'true');
      router.push('/todo');
    }
  };

  const onChangePage = (pageIndex: number) => {
    setCurrentSlide(pageIndex);
  };

  useEffect(() => {
    if (localStorage.getItem('tutorialCompleted') === 'true') {
      redirect('/todo');
    }
  }, []);


page.js

import TutorialPage from '@/components/tutorial/TutorialPage';

export default function Home() {
  return (
    <>
      <TutorialPage /> 
    </>
  );
}

이런식으로 유저가 들어오면 자동으로 /todo 페이지로 가게끔해줬는데.. 
처음 들어오면 튜토리얼 페이지1 화면이 보였다가 /todo로 가는게 지금 문제인데 혹시 뾰족한 수가 없을까요?...

아니면 질문을 바꿔서 
이런 현상을 강의에서 마주쳤던 반짝이는 효과랑 비슷한거같은데 헷갈려서요.. 다시한번 짚어주실수있을까요?

이런현상이 일어나는 이유가

1.  클라이언트 컴포넌트가 먼저 랜더링이되어버려서?
2. 서버사이드랜더링으로, 서버쪽에서 html을 먼저 읽고 랜더링후에 그다음 js를 읽어서 

1번과 2번중 2번이 맞을까요?

[codingapple]

useEffect는 html 다 보여주고나서 실행되어서 그렇습니다 
쿠키나 DB에 정보 저장해뒀다가 쓰는 방법밖에 없습니다

[정중식]

감사합니당

[글쓴이]

글