배포 서버 속도 관련

[리뉴얼] React로 NodeBird SNS 만들기

도메인 연결하기

작성

512

저는 배포를 했는데 배포 서버 속도가 빠른거 같지 않아서 무엇인가 잘못되었나 해서 여쭤봅니다.

제로초님께서 만드신 사이트 가보면 바로바로 빠르게 동작하는것 같은데 로그인 상태에서 signup을 가면 3초있다가 메인으로 가지고 profile에서 메인을 갈때도 4초정도 텀이 있네요.

그리고 monit을 할 경우 로그인하고 profile 들어 갈때 서버 사이드 렌더링이 계속해서 응답이 됩니다. 저 getServerSideProps start가 계속해서 불러와지는데 무엇인가 문제가 있는거겠죠

Next.js nodejs redux react express

답변 2

NOAH

질문자

혹시 몰라 코드도 남깁니다. 전혀 잘못 된걸 못찾겠는데 이상하네요..

const fetcher = (url) =>
  axios.get(url, { withCredentials: true }).then((response) => response.data);

function Profile() {
  const [followersLimit, setFollowersLimit] = useState(3);
  const [followingsLimit, setFollowingsLimit] = useState(3);
  const { me } = useSelector((state) => state.user);
  const { data: followersData, error: followerError } = useSWR(
    `${backUrl}/user/followers?limit=${followersLimit}`,
    fetcher
  );
  const { data: followingsData, error: followingError } = useSWR(
    `${backUrl}/user/followings?limit=${followingsLimit}`,
    fetcher
  );

  useEffect(() => {
    if (!me?.id) {
      Router.push('/');
    }
  }, [me?.id]);

  const loadMoreFollowings = useCallback(() => {
    setFollowingsLimit((prev) => prev + 3);
  }, []);

  const loadMoreFollowers = useCallback(() => {
    setFollowersLimit((prev) => prev + 3);
  }, []);

  if (!me) {
    return <div>Loading my information</div>;
  }

  if (followerError || followingError) {
    console.error(followingError || followingError);
    return <div>Error occurred while loading follow and following data</div>;
  }

  return (
    <>
      <Head>
        <title>My profile | Tweeter</title>
      </Head>
      <AppLayout>
        <NicknameEditForm />
        <FollowList
          header="Following List"
          data={followingsData}
          onClickMore={loadMoreFollowings}
          loading={!followingsData && !followingError}
        />
        <FollowList
          header="Follower List"
          data={followersData}
          onClickMore={loadMoreFollowers}
          loading={!followersData && !followerError}
        />
      </AppLayout>
    </>
  );
}

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({ req }) => {
      console.log('Profile: getServerSideProps start');
      const cookie = req?.headers.cookie;
      axios.defaults.headers.Cookie = '';
      if (req && cookie) {
        axios.defaults.headers.Cookie = cookie;
      }

      store.dispatch(loadMyInfoRequestAction());
      store.dispatch(END);
      console.log('Profile: getServerSideProps end');
      await store.sagaTask.toPromise();
    }
);

export default Profile;

제로초(조현영)

지식공유자

빌드 및 배포 명령어 적어주세요

NOAH

질문자

프론트

  "scripts": {
    "dev": "next",
    "build": "cross-env ANALYZE=true NODE_ENV=production next build",
    "start": "cross-env NODE_ENV=production next start -p 80"
 },

백엔드입니다.

"scripts": {
    "dev": "nodemon app",
    "start": "cross-env NODE_ENV=production pm2 start app.js"
 },

제로초(조현영)

지식공유자

npm run build 후 pm2 start npm -- start 하신거죠? 그렇다면 명령어에 문제는 없는데 이유는 저도 잘 모르겠습니다.

getServerSideProps는 페이지 넘어갈때마다 호출되는 게 맞습니다.

NOAH

질문자

예 맞습니다. 이게 너무 오래 걸리기도하고 이상하네요..

다른점이 있다면 코드에

next-redux-wrapper

버전이 저는 7이라서 getServserProps 부분이 좀 다르거든요. 버전다운을 해서 해보든가해봐야겠네요. 이렇게요. 문제가 될 수 있을지는 모르겠네요.

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({ req }) => {
      console.log('Signup: getServerSideProps start');
      const cookie = req?.headers.cookie;
      axios.defaults.headers.Cookie = '';
      if (req && cookie) {
        axios.defaults.headers.Cookie = cookie;
      }

      store.dispatch(loadMyInfoRequestAction());
      store.dispatch(END);
      console.log('Signup: getServerSideProps end');
      await store.sagaTask.toPromise();
    }
);