인프런 커뮤니티 질문&답변

만약 모든 페이지에서 사용자 정보가 SSR되어야한다면

getServerSideProps보다 getInitalProps로 _app에다가 설정하는게 나을꺼 같은데

혹시 이 방법 말고 더 좋은 방법이 있을까 여쭤봅니다.

getInitalProps는 레거시 코드니까 사용하지 않는 게 좋다는데 이거 말고 대안을 못 찾겠네요.ㅠㅠ

 

1. _app -> getInitalProps

MyApp.getInitialProps = wrapper.getInitialAppProps(
  (store) =>
    async ({ Component, ctx }) => {
      store.dispatch(
        setCredentials({
          user: await axios
            .get("http://localhost:4000/users/me", {
              withCredentials: true,
              headers: {
                cookie: ctx.req?.headers.cookie || "",
              },
            })
            .then((response) => response.data)
            .catch(() => null),
        })
      );

      return {
        pageProps: {
          ...(Component.getInitialProps
            ? await Component.getInitialProps({ ...ctx, store })
            : {}),
          pathname: ctx.pathname,
        },
      };
    }
);

 

2. pages -> getServerSideProps

wrapper.getServerSideProps((store) => async (context) => {
    store.dispatch(
      setCredentials({
        user: await axios
          .get("http://localhost:4000/users/me", {
            withCredentials: true,
            headers: {
              cookie: context.req.headers.cookie || "",
            },
          })
          .then((response) => response.data)
          .catch(() => null),
      })
    );

    return {props: {}};
  });