TIL 51. 2024-03-12

이준구·2024년 3월 12일
0

TIL 순서

목록 보기
51/119
post-thumbnail

❗️next.js 기능❗️


1. 다양한 렌더링 기법이 존재

-SSG, ISR , SSR, CSR

  • 1-1) CSR (Clinet side Rendering)
    렌더링 주체: 클라이언트
    장점: 최초 한번 로드가 끝난 시점을 기준으로 사용자와의 상호작용이 빠르고 부드럽다.
    한계: 브라우저에서 정적(html, css)인 요소와 동적(js)요소를 모두 가져온 상태어야만 작동한다.
    : TTV가 저하, 초기 로딩 속도⬇️

    CSR의 한계를 극복하기 위해 등장한 기법: Code Spilitting

  • 1-2) SSR (Server side Rendering)
    렌더링 주체: 서버
    장점)
    pre-rendering : 빌드 시점에서 서버를 통해 모든 페이지를 미리 생성
    클라이언트의 요청 시 페이지를 새로 그려 사용자에게 제공합니다.
  • 1-3) SSG (Static Site Generation)
    렌더링 주체: 서버
    : 서버에서 페이지를 렌더링하여 클라이언트에게 HTML을 전달하는 방식
    : 최초 빌드시에만 생성❗️
    장점: 첫 페이지 로딩 시간이 매우 짧아(TTV) 사용자가 빠르게 페이지를 볼 수 있습니다. 또한, SEO에 유리하다.
    단점: 빌드 이후에 변경한 정적인 데이터는 표시되지 않으므로 리빌드 해줘야한다.
  • 정적인 데이터에만 사용할 수 있음
  • 사용자와의 상호작용이 서버와의 통신에 의존하므로, CSR보다 상호작용이 느릴 수 있습니다. 또한, 서버 부하가 클 수 있습니다.
  • 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가

build: 소스코드를 실행 가능한 상태로 만들어 놓은 과정/ vercel에 배포하기 위해 내부적으로 build를 하는 과정

  • 1-4) ISR(Incremental Static Regeneration)
    렌더링 주체: 서버
    : 설정한 주기만큼 페이지를 계속 생성
profile
개발 중~~~ 내 자신도 발전 중😂🤣

0개의 댓글

관련 채용 정보