-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
getServerSideProps에서 데이터가 제대로 내려오지 않는듯합니다.
24.05.05 23:59 작성 조회수 83
0
안녕하세요 제로초님
https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/pages/index.js
위 내용을 참고해서
코드를 작성해보았습니다.
import { useDispatch, useSelector } from "react-redux";
import AppLayout from "../components/AppLayout";
import PostForm from "../components/PostForm";
import PostCard from "../components/PostCard";
import { useEffect } from "react";
import { loadPostsRequestAction } from "../reducers/post";
import { loadMyInfoRequestAction } from "../reducers/user";
import wrapper from "../store/configurStore";
import axios from "axios";
// 프론트, 브라우저 같이 실행
const Home = () => {
const { me } = useSelector((state) => state.user);
const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } = useSelector((state) => state.post);
const dispatch = useDispatch();
useEffect(() => {
if (retweetError) {
alert(retweetError);
}
}, [retweetError]);
useEffect(() => {
const onScroll = () => {
if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
if (hasMorePosts && !loadPostsLoading) {
const lastId = mainPosts[mainPosts.length - 1]?.id;
dispatch(loadPostsRequestAction({ lastId, limit: 10 }));
}
}
};
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, [hasMorePosts, loadPostsLoading, mainPosts]);
return (
<AppLayout>
{me && <PostForm />}
{/* 순서가 바뀌거나 삭제될 수 있는 리스트들에 key값으로 index를 쓰면 안됀다. */}
{/* 반복문이 있고 바뀌지 않는 리스트일 경우에만 사용해도 된다. */}
{mainPosts.map((post) => (
<PostCard key={post.id} post={post} />
))}
</AppLayout>
);
};
export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => {
const cookie = req ? req.headers.cookie : "";
axios.defaults.headers.Cookie = "";
if (req && cookie) {
axios.defaults.headers.Cookie = cookie;
}
await store.dispatch(loadPostsRequestAction());
await store.dispatch(loadMyInfoRequestAction());
console.log("state", store.getState());
});
export default Home;
그런데 await에서
await' has no effect on the type of this expression.ts(80007
이런 경고문 때문인지
이전 영상에서 말씀해주셨던것처럼 데이터를 success까지 기다리지 않는건지,
빈값들만 오고 있습니다.
혹시 어디를 살펴보면 좋을지 알 수 있을까요?
{
"name": "react-nodebird",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"author": "",
"license": "MIT",
"dependencies": {
"@ant-design/icons": "^5.3.6",
"@reduxjs/toolkit": "^2.2.3",
"antd": "^5.8.3",
"axios": "^1.6.8",
"next": "^14.2.3",
"next-redux-wrapper": "^8.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.51.3",
"react-redux": "^9.1.1",
"react-slick": "^0.30.2",
"redux": "^5.0.1",
"shortid": "^2.2.16",
"styled-components": "^6.1.8"
},
"devDependencies": {
"@faker-js/faker": "^8.4.1",
"babel-eslint": "^10.1.0",
"eslint": "^8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.2"
}
}
환경은 위와같습니다.
감사합니다.
답변을 작성해보세요.
0
챠챠_
질문자2024.05.06
답변 감사합니다.
쿠키로직을 적용하기 전부터 같은 현상이 나타나고 있습니다.
export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => {
await store.dispatch(loadPostsRequestAction());
await store.dispatch(loadMyInfoRequestAction());
console.log("state", store.getState());
});
서버에서는 데이터가 호출은 잘 되고있는것 같은데
데이터가 제대로 내려오고 있지 않는것 때문에
계속 찾아보는데 잘 안되네욥..
챠챠_
질문자2024.05.06
import { createWrapper } from "next-redux-wrapper";
import { configureStore } from "@reduxjs/toolkit";
import reducer from "../reducers"; // reducers/index의 rootReducer불러온 것
import createSagaMiddleware from "redux-saga";
import rootSaga from "../sagas";
// redux-thunk를 참조해서 만든 미들웨어
const loggerMiddleware =
({ dispatch, getState }) =>
(next) =>
(action) => {
console.log(action);
return next(action);
};
const sagaMiddleware = createSagaMiddleware();
const makeStore = () => {
const store = configureStore({
reducer, // 리듀서 모듈들이 합쳐진 루트 리듀서
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat([sagaMiddleware, loggerMiddleware]),
});
sagaMiddleware.run(rootSaga);
return store;
};
const wrapper = createWrapper(makeStore, {
// createWrapper: wrapper 생성, wrapper 에 store 바인딩
debug: process.env.NODE_ENV === "development", // true이면 리덕스에 관한
});
export default wrapper;
위가 코드 configureStore.js입니다.
혹시나해서 제로초님 깃에 있는 걸로 수정해보기도 했는데 동일한 이슈가 발생했었습니다.ㅠ
import { createWrapper } from "next-redux-wrapper";
import { configureStore } from "@reduxjs/toolkit";
import reducer from "../reducers"; // reducers/index의 rootReducer불러온 것
import createSagaMiddleware from "redux-saga";
import rootSaga from "../sagas";
// redux-thunk를 참조해서 만든 미들웨어
const loggerMiddleware =
({ dispatch, getState }) =>
(next) =>
(action) => {
console.log(action);
return next(action);
};
const sagaMiddleware = createSagaMiddleware();
function getServerState() {
return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props.pageProps.initialState : undefined;
}
const serverState = getServerState();
console.log("serverState", serverState);
// configureStore 자체에서 Redux DevTools 설정을 자동으로 처리합니다.
const makeStore = () => {
// configureStore: store 를 생성
const store = configureStore({
reducer, // 리듀서 모듈들이 합쳐진 루트 리듀서
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat([sagaMiddleware, loggerMiddleware]),
// redux-toolkit 은 devTools 등의 미들웨어들을 기본적으로 제공
// 추가 미들웨어나 enhancers가 필요하다면 여기에 포함시킬 수 있습니다.
preloadedState: serverState, // SSR
});
store.sagaTask = sagaMiddleware.run(rootSaga);
return store;
};
const wrapper = createWrapper(makeStore, {
// createWrapper: wrapper 생성, wrapper 에 store 바인딩
debug: process.env.NODE_ENV === "development", // true이면 리덕스에 관한
});
export default wrapper;
import PropTypes from "prop-types";
import Head from "next/head";
import { Provider } from "react-redux";
import wrapper from "../store/configurStore";
const NodeBird = ({ Component, ...rest }) => {
const { store, props } = wrapper.useWrappedStore(rest);
const { pageProps } = props;
return (
<Provider store={store}>
<Head>
<meta charSet='utf-8' />
<meta
name='viewport'
content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
/>
<title>NodeBird</title>
</Head>
<Component {...pageProps} />
</Provider>
);
};
NodeBird.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.any.isRequired,
};
export function reportWebVitals(metric) {
// console.log("-----------------------------------");
// console.log(metric);
}
export default NodeBird;
적용은 위 코드처럼 했습니다.
0
인프런 AI 인턴
2024.05.06
안녕하세요, 인프런 AI 인턴입니다. 챠챠_ 님의 질문에 관하여 유사한 상황을 다룬 내용이 있어 이를 소개해 드리겠습니다. 질문하신 내용은 getServerSideProps에서 데이터가 제대로 내려오지 않는 문제와 관련이 있습니다.
이러한 유형의 문제는 대개 서버 사이드 렌더링 과정에서 데이터를 가져오는 로직에 문제가 있거나, Redux 상태 관리 과정에서 예상치 못한 동작이 발생할 때 일어날 수 있습니다.
유사한 질문 및 답변
-
이 질문에서는
getServerSideProps내에서 쿠키를 사용하여 사용자의 로그인 상태를 확인하고 상태를 관리하는 과정에서 문제가 발생했습니다. 사용자가 직면한 문제는 쿠키가 있는 경우 프론트엔드에서 인식을 못 하는 상황과 관련이 있었고, 이에 대한 해결 방법으로 쿠키 설정과 전송 과정에서의 주의사항에 대해 논의되었습니다.이 경우처럼
getServerSideProps에서 쿠키를 이용하여 서버 사이드에서 상태를 관리할 때, 쿠키 설정에 주의를 기울여야 합니다. 서버로부터 데이터를 정확히 받아오기 위한 쿠키 설정이 올바르게 적용되었는지 확인하는 것이 좋습니다.
가능한 해결 방법
- 쿠키 설정 확인:
getServerSideProps에서 쿠키를 서버로 전송하는 로직이 올바르게 작성되었는지 확인합니다. SSR시 쿠키가 제대로 설정되지 않으면 서버가 사용자를 올바르게 식별하지 못해 데이터를 잘못 불러올 수 있습니다.
- Redux 상태 관리 확인: Redux를 통해 상태를 관리할 때, 해당 상태가 올바르게 업데이트되고 있는지,
LOAD_POSTS_REQUEST액션 디스패치 이후 상태 변화를 올바르게 반영할 수 있는지 확인해야 합니다. 서버로부터 데이터를 받아온 후 Redux 스토어에 상태를 올바르게 반영하고 있는지 검토하십시오.
질문자님께서 겪고 계시는 문제는 데이터 흐름 또는 상태 관리 구조에서의 미세한 설정 누락 또는 오류로 인해 발생할 수 있습니다. 따라서, Redux 상태 업데이트 로직과 getServerSideProps 안에서의 데이터 로딩 로직을 세심하게 재검토해 보시는 것을 권장드립니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 2