SSR, react-intersection-observer 적용 시 문제

Question

안녕하십니까 좋은 강의 및 질문 답변에 항상 감사드립니다.

다름이 아니라 공지사항에 있는 글을 읽고 posts의 scrolling 을 react-intersection-observer를 적용해 보았습니다.

문제는 SSR 적용시 첫 로딩화면에서 scrolling 시 LOAD_POSTS_REQUEST가 dispatch되지 않는 것입니다.

console을 찍어보니 useEffect 조건 중 hasMorePosts와 loadPostsLoading은 각각 true, false로 만족하는데 lastId가 undefined가 나옵니다.

redux를 확인해봤을 때는 mainPosts의 글들이 보이는데 lastId는 왜 undefined인지 모르겠습니다..

혹시 ref나 inView 때문인가요?

처음 로딩시 redux 입니다.

(context.store.dispatch에 LOAD_POSTS_REQUEST를 넣어봐도 scrolling이 적용되지 않습니다.)

아래는 index.js의 코드입니다.

const Home = () => {
  const dispatch = useDispatch();
  const { me } = useSelector((state) => state.user);
  const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } = useSelector((state) => state.post);

  useEffect(() => {
    if (retweetError) {
      alert(retweetError);
    }
  }, [retweetError]);

  const [ref, inView] = useInView();

  useEffect(
    () => {
      // 사용자가 마지막 요소를 보고 있고, 로딩 중이 아니라면..
      if (inView && hasMorePosts && !loadPostsLoading) {
        console.log('hasMorePosts', hasMorePosts);
        console.log('loadPostsLoading', loadPostsLoading);
        const lastId = mainPosts[mainPosts.length - 1]?.id;
        console.log('lastId', lastId);
        console.log('mainPosts', mainPosts);
        console.log('mainPosts[mainPosts.length - 1]', mainPosts);
        console.log('lastId', lastId);
        dispatch({
          type: LOAD_POSTS_REQUEST,
          lastId,
        });
      }
    },
    [inView, hasMorePosts, loadPostsLoading, mainPosts],
  );

  return (
    <AppLayout>
      {me && <PostForm />}
      {mainPosts.map((post) => <PostCard key={post.id} post={post} />)}
      <div ref={hasMorePosts && !loadPostsLoading ? ref : undefined} />
    </AppLayout>
  );
};

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  // backend server에 쿠키 전달
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
  context.store.dispatch({
    type: LOAD_MY_INFO_REQUEST,
  });
  // 위 코드까지 진행하면 Request만 진행하고 다시 client 페이지로 돌아온다.
  // 따라서 Success 까지 진행시키고 데이터를 받아오는 소스가 필요
  context.store.dispatch(END);
  // sagaTask는 configureStore.js 에서 정의
  await context.store.sagaTask.toPromise();
});

export default Home;
 

); }; export const getServerSideProps = wrapper.getServerSideProps(async (context) => { // backend server에 쿠키 전달 const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); // 위 코드까지 진행하면 Request만 진행하고 다시 client 페이지로 돌아온다. // 따라서 Success 까지 진행시키고 데이터를 받아오는 소스가 필요 context.store.dispatch(END); // sagaTask는 configureStore.js 에서 정의 await context.store.sagaTask.toPromise(); }); export default Home;

Answer

저렇게 콘솔 쭈르륵 찍었을 때 콘솔 로그 어떻게 남나요?

윤동호

SSR, react-intersection-observer 적용 시 문제

이 글과 비슷한 Q&A

onClickRedo 질문

화면이 안보여요

export const dynamic = "force-dynamic"이 적용된 page.tsx는 모든 요청을 캐싱하지 않는다?

페이지이동후 쿼리 질문있습니다