본문 바로가기

Tech

[Tech] Pre-rendering 그리고 Data fetching

 

 

 

안녕하세요. 든든부문 확장셀에서 개발을 하고 있는 Bard입니다.

 

최근 베타로 런칭한 머니플에는 개별 웹페이지 URL을 소셜미디어에 공유했을 때 미리보기가 가능해야 한다는 요구사항이 있었습니다. 그 요구사항을 충족시키기 위해 프로젝트에서 사용한 Nextjs의 Pre-Rendering을 이용한 경험을 공유합니다.

 

 

왜 Pre-Rendering이 필요한가?

 

우선 Next.js에서 사용되는 React는 SPA(Single Page Application)로 초기 렌더링이 느리고 후반에 빠른 특징이 있습니다. 이 특징이 나타나는 이유는 사용자가 실제 콘텐츠를 볼 때 서버로 요청을 한 뒤에 JS 전체가 로드되어야 앱을 실행합니다. 이때 JavaScript가 실행되기 전에는 사용자에게 빈 화면을 렌더링 합니다. 이후 다시 접근하면 이미 다운로드가 되어있어 빠르게 렌더링을 합니다.

 

실제로 크롬 브라우저에서 Settings -> Debugger -> Disable JavaScript를 체크하면 간단하게 확인할 수 있습니다. 왼쪽 사진은 Initial Load 그리고 Hydration을 거쳐 정상적으로 렌더링이 되었지만 오른쪽 사진은 JavaScript를 막아 Hydarion이 진행되지 않아 앱을 볼 수 없습니다.

Disable JavaScript - on/off

IOS/Android에서 webview를 통해 불러오는 SPA의 경우 initial load 단계에서 로딩 화면만 보여줘도 큰 문제가 없지만 이번에 개발하는 머니플과 같이 검색을 통한 사용자 유입 그리고 링크에서 콘텐츠 미리보기를 제공해야 하는 앱의 경우 문제가 있을 수 있습니다.

 

 

Nextjs의 Pre-rendering 기능과 장점

 

해당 이슈를 제어하기 위해 Nextjs에서는 Pre-rendering을 제공합니다.

  • Pre-rendering은 응용 프로그램 성능을 향상시킵니다 . React는 Javascript가 로드되는 사용자 대기 시간이 있으며 UI가 렌더링되기 전에 가져오기가 발생합니다. 로딩이 진행 중임을 나타내기 위해 화면에 표시되는 로딩 스피너로 사용자를 진정시킬 수 있지만 대기 시간은 여전히 ​​존재합니다.

  • HTML은 기본적으로 페이지를 미리 렌더링하는 Next.js 애플리케이션에서 이미 생성되어 더 빠르게 로드됩니다. 이것은 사실상 사용자 대기 시간을 없애줍니다.

  • Pre-rendering은 SEO에 도움이 됩니다 . 검색 엔진 최적화는 사이트를 개선하고 검색 결과에서 더 높은 순위를 지정하는 프로세스입니다. 사전 렌더링된 페이지에는 소스 코드의 모든 콘텐츠가 포함되어 있어 해당 페이지의 색인을 생성하고 검색 순위를 높이는 데 도움이 됩니다.

 

 

Pre-rendering 방식

 

크게 두 가지 Pre-rendering 방식을 제공합니다.

  • SSG(Static Generation)은 build 시 생성한 HTML을 각 요청에 사용하는 렌더링 방식입니다. 정적으로 생성된 페이지로 제공 속도가 매우 빠르다. 하지만 데이터를 빌드시 가져오기 때문에 최신화가 어렵고 빌드 시간이 늘어납니다.
    • ISR(Incremental Static Regeneration)의 경우 SSG의 데이터 최신화 단점을 커버하는 기능으로 다시 빌드할 필요 없이 데이터를 특정 시간마다 다시 불러와 HTML을 생성한다.
  • SSR(Server Side Rendering)은 각 요청에 대해 HTML을 생성하는 렌더링 방식입니다. 불러오는 데이터가 수정되면 즉시 반영되지만 많은 사용자가 요청을 하면 부하가 생겨 약간의 대기 시간이 있을 수 있습니다.

공식 문서에서 SSG를 권장합니다. 상황에 따라서 사용자가 페이지를 요청하기 전에 pre-rendering가 가능한지에 따라서 가능하다면 SSG, 가능하지 않다면 SSR, ISR을 사용합니다. SSG의 경우 blog, document와 같은 정적인 곳에 주로 사용합니다.

 

 

Pre-rendering 적용 예시

 

export async function getStaticProps() {
  // 파일 시스템, API, DB 등에서 외부 데이터를 가져옵니다.
  const { data } = await ...

  return {
    props: {
    	data
    },
    // ISR을 사용하는 경우 추가
    revalidate: 10, // In seconds
  }
}

// 아래 data는 build시 생성된 값
export default function Home({ data }) { ... }

 

SSG의 경우 getStaticProps을 사용해 쉽게 구현이 가능하고 build를 진행할 때 getStaticProps를 인식해서 실행합니다. 개발 편의성을 위해 dev 모드에서는 각 요청에 대해 실행됩니다.

 

export async function getServerSideProps(context) {
  const { slug } = context.query
  const article = await articleService.getAtricleBySlug(slug)
  return { props: { article } }
}

SSR의 경우 각 요청마다 getServerSideProps를 실행합니다.

 

 

마치며

 

이번 기회에 Pre-Rendering 개념에 대해서 스스로도 다시 정리하고 활용할 수 있어서 유익했던 기회였습니다.

끝으로 읽어주셔서 감사합니다.

 

'Tech' 카테고리의 다른 글

[Tech] 이더리움 트랜잭션 분석  (0) 2022.05.09