SSR vs SSG light house로 비교하여 서비스 성능 개선하기

https://blog.cau-likelion.org/

LikeLionCAU Blog

tistory, velog, 네이버 블로그등 

동아리원들의 블로그를 모아 우리 동아리만의 피드를 제공하는 서비스를 제작했다.

Next13으로 진행한 첫 프로젝트다. 배포는 vercel로 진행했다.

로직

1. rss를 받아온다.

2. 해당 rss를 rss-parser를 통해 파싱한다.

3. 불필요한 광고 태그를 제거한다. 

4. content에서 제일 처음 만나는 img태그를 끌고와서 썸네일로 만들어준다.

5. 화면에 렌더링한다.

 

처음 해당 프로젝트를 SSR로 구성했는데, CSR보다 SSR이 평균적으로 초기 로딩 속도가 빠르기때문이었다.

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js

export const getServerSideProps: GetServerSideProps<{ data: feed[] }> = async () => {
  const parser = new Parser();
  const parsingData = await Promise.all(
    blogList.map(async ({ name, blog }) => {
      const feed = await parser.parseURL(blog);
      const result = feed.items.map((item) => {
      	...
      });
      return result as unknown as feed[];
    })
  );

  return {
    props: {
      data: ...
    },
  };
};

export default function Home({ data : InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <Wrapper>	
    	...
    </Wrapper>
  );
}

 

성능검사

그런데 배포를 하자 매우 느린 모습을 보여주었다.

사이트 접속까지 체감상 3초이상 걸렸고, 뒤로가기를 진행했을때 첫 접속과 동일한 시간이 걸렸다.

그래서 라이트하우스로 성능을 비교해보고자 했고 결과는 아래와 같이 처참했다.

원인

요청이 올때마다 Next서버에서 아래 로직이 순차적으로 실행되고, 완료가 되면 데이터를 끼워넣은 HTML을 전송해주기때문이다.

 

1. rss를 받아온다.

2. 해당 rss를 rss-parser를 통해 파싱한다.

3. 불필요한 광고 태그를 제거한다. 

4. content에서 제일 처음 만나는 img태그를 끌고와서 썸네일로 만들어준다.

5. 화면에 렌더링한다.

 

이로인해 서비스에 등록된 rss가 많아지면 많아질수록 속도 저하를 가져올 것이라 판단하여 렌더링방식을 SSG로 변경하기로 했다.

 

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

Data Fetching: getStaticProps | Next.js

 

SSG로 변경

아래와 같이 getServerSideProps를 getStaticProps로 변경했다.

이를 통해 5분마다 next 서버에서 HTML파일을 만들어 줄 것이고, 클라이언트에서 요청시 미리 만들어 놓은 HTML파일을 전송하여 속도가 개선될 것이다.

export const getStaticProps: GetStaticProps<{ data: feed[] }> = async () => {
  const parser = new Parser();
  const parsingData = await Promise.all(
    blogList.map(async ({ name, blog }) => {
      const feed = await parser.parseURL(blog);
      const result = feed.items.map((item) => {
        return {
        ...
        };
      });
      return result as unknown as feed[];
    })
  );

  return {
    props: {
      data: ...
    },
    revalidate: 300, //5분동안 캐시유지
  };
};

export default function Home({ data }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
  	...
  );
}

개선 결과

성능이 55에서 86으로 56.3%가량 개선된 것을 확인할 수 있다.