models 최신 문법으로 변경 후

이런.. import 를 잘못해오고 있었어요 답변 감사합니다!

Router 를 사용해 SSR 페이지 이동할 때 질문입니다!

감사합니다!

Avatar 클릭시 /user/1 로 이동 할 때

넵 페이지 주소도 변경 되고, getServerSideProps 내부도 실행이 되는데 로딩바만 안도는거면 서버 사이드 렌더링 셋팅할 때 뭔가 빠트렸나 보네요 강의 다시 확인해보겠습니다! 답변 해주셔서 감사합니다!

Avatar 클릭시 /user/1 로 이동 할 때

리듀서쪽도 다시 체크해봐야겠네요 ㅠ 넵 맞아요 제로초님 코드 ch6 폴더에 front 실행시켜서 비교해봤는데 아바타를 클릭했을 때 다르게 작동해요 제로초님 코드는 아바타 클릭시 (사진) 제 코드 아바타 클릭시 (사진) 제 코드에서 아바타를 클릭했을 때 는 로딩바가 안돌아요 이부분은 SSR이 제대로 되고 있지 않다고 봐야하는건가요?

Avatar 클릭시 /user/1 로 이동 할 때

import axios from 'axios'; import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { END } from 'redux-saga'; import { useRouter } from 'next/router'; import Head from 'next/head'; import { Card, Avatar } from 'antd'; import { LOAD_USER_REQUEST, LOAD_MY_INFO_REQUEST } from '../../reducers/user'; import { LOAD_USER_POSTS_REQUEST } from '../../reducers/post'; import AppLayout from '../../components/AppLayout'; import PostCard from '../../components/PostCard'; import wrapper from '../../store/configureStore'; const User = () => { const dispatch = useDispatch(); const router = useRouter(); const { id } = router.query; const { hasMorePosts, loadPostLoading, mainPosts, retweetError, } = useSelector((state) => state.post); const { userInfo } = useSelector((state) => state.user); useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { function onScroll() { if (window.pageYOffset + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) { if (hasMorePosts && !loadPostLoading) { const lastId = mainPosts[mainPosts.length - 1]?.id; dispatch({ type: LOAD_USER_POSTS_REQUEST, data: id, lastId, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostLoading, id, mainPosts]); return ( AppLayout> Head> title>{userInfo.nickname}님의 글title> meta name="description" content={`${userInfo.nickname}님의 게시글`} /> meta property="og:title" content={`${userInfo.nickname}님의 게시글`} /> meta property="og:description" content={`${userInfo.nickname}님의 게시글`} /> meta property="og:image" content="https://nodebird.com/favicon.ico" /> meta property="og:url" content={`https://nodebird.com/user/${id}`} /> Head> {userInfo ? ( Card actions={[ div key="twit"> 짹짹 br /> {userInfo.Posts} div>, div key="following"> 팔로잉 br /> {userInfo.Followings} div>, div key="follower"> 팔로워 br /> {userInfo.Followers} div>, ]} > Card.Meta avatar={Avatar>{userInfo.nickname[0]}Avatar>} title={userInfo.nickname} /> Card> ) : null} {mainPosts.map((post) => PostCard key={post.id} post={post} />)} AppLayout> ); }; export const getServerSideProps = wrapper.getServerSideProps(async (context) => { console.log('getServerSideProps Start'); 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, }); context.store.dispatch({ type: LOAD_USER_POSTS_REQUEST, data: context.params.id, }); context.store.dispatch({ type: LOAD_USER_REQUEST, data: context.params.id, }); context.store.dispatch(END); console.log('getServerSideProps End'); await context.store.sagaTask.toPromise(); }); export default User; 입니다!