inflearn logo
강의

Course
Instructor

[Renewal] Creating a NodeBird SNS with React

Connecting a domain

배포 서버 속도 관련

635

NOAH

48 asked

0

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

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

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

Next.js nodejs redux react express

Answer 2

0

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;

0

zerocho

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

0

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"
 },

0

zerocho

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

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

0

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();
    }
);

0

zerocho

index.js의 getServerSideProps에 문제가 있는것같긴 하네요. hashtag나 user쪽은 에러가 뜨는 걸로 봐서는 뭔가 문제가 있어 보입니다.

0

NOAH

제가 댓글 달고 바로 서버를 꺼렸네요. 로그가 또 계속 불러들여서요. 혹시 아에 안들어가지신거면.. 제가 조금만 코드를 더 봐보고 다시 켜볼게요

귀찮게해서 죄송합니다.

0

NOAH

아까는 제가 next-redux-wrapper 쪽을 변경하지 않아서 그런데

http://minbird.com

이제는 기능은 다 되거든요 한 번 접속해봐주시겠어요? 기능은되는데 배포버전인데도 너무 느리네요. build도 다시 했습니다. 로그인 하지않고 profile 눌렀을때 혹은 해시태그, 메인페이지 갈때 느리네요

0

zerocho

백엔드 서버 쿼리 문제 아닐까 싶은데요. user는 아직도 에러가 납니다. 쿼리가 너무 느릴 수도 있고요.

0

NOAH

로그가 계속 뜬다고 말씀드린거는 지금 확인해보니 글 몇개 안썻을때 scroll이 전체의 -300보다 낮게 측정되어 onScroll이 메인페이지에서 계속 불리는거 같네요.

0

NOAH

제로초님 백엔드 코드랑 한 번 비교하며 다시 자세하게 확인해보도록 하겠습니다. 감사합니다.

0

zerocho

어디서 제일 느린지 시간을 측정해보세요.

0

NOAH

콘솔로해서 getServerProps쪽, 컴포넌트쪽 이런식으로 시간측정하면 되려나요

곰곰히 생각을해봤는데 메인페이지 가는건 프론트서버에서 라우팅해주는건데 프론트 서버에 문제가있는건지 싶기도하네요.

0

NOAH

제로초님 코드로 그냥 아에 똑같이 싹다 바꿔도 제로초님처럼 빠르지 않더라고요.

혹시 aws가 무료버전이라 그럴수가 있나요? 혹시 플랜에 따라 속도가 달라질수있는지 궁금하네요.

0

zerocho

제 서버도 똑같이 t2.micro입니다. ㅠ

0

NOAH

서버를 걍 켜놨는데 자기 스스로 계속 뭐를 불러들이는거 같은데.. 계속 monit에 로그가 찍히네요 몰랐다가 들어와보니 그러더라고요. 혹시 문제가 있을까요? 패킷이 비정상적으로 높은거 같긴한데요. 프론트서버입니다.

넥스트 버젼 질문

0

78

2

로그인시 401 Unauthorized 오류가 뜹니다

0

89

1

무한 스크롤 중 스크롤 튐 현상

0

175

1

특정 페이지 접근을 막고 싶을 때

0

103

2

createGlobalStyle의 위치와 영향범위

0

96

2

인라인 스타일 리렌더링 관련

0

91

2

vsc 에서 npm init 설치시 오류

0

147

2

nextjs 15버전 사용 가능할까요?

0

158

1

화면 새로고침 문의

0

121

1

RTK에서 draft, state 차이가 있나요?

0

153

2

Next 14 사용해도 될까요?

0

452

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

349

1

url 오류 질문있습니다

0

211

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

373

1

sudo certbot --nginx 에러

0

1276

2

Minified React error 콘솔에러 (hydrate)

0

470

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

247

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

327

1

npm run build 에러

0

519

1

front 서버 npm run build 중에 발생한 에러들

0

382

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

338

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

288

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

239

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

201

1