240701 TIL

 

1. 오늘의 공부 

 

Next.js를 배우는 첫날이었다. 강의 보면서 직접 실습 해보려고 순서에 맞게 설치했는데 계속 에러가 뜨길래 읭? 해서 강의의 흐름만 파악하는 방향으로 틀어서 강의를 시청하였다. 계속 폴더 삭제하고 다시 만들고 했는데 자포자기한 심정으로 cd my-app 치고 yarn dev해보니

next.js 화면이 잘뜬다! (localhost:3000) 내일부터 강의 마저 듣고 과제 시작해야지! 

 

▶️ react.js와 next.js의 차이 

React.js  :  UI 만들기 위한 라이브러리 (필요한 패키지들을 수동으로 설치해줘야 함)
Next.js : 리액트가 가지고 있는 기능을 확장 (프레임워크) - 이미 설치가 다 되어있음 

 

 

TTV란?  Time To View의 약자로 사용자가 최초 뷰를 볼 수 있을 때까지의 시간을 뜻한다.  > 짧을수록 좋음 

 

▶️ 주요 랜더링 기법 

• CSR ( Client Side Rendering)
  
  장점 : 사용자의 상호작용이 빠르고 , 서버 부하가 적다.      
  단점 : 처음 페이지의 로딩 시간이 길수 있음       
  로딩되고 실행될 때까지 페이지가 비어있어서 검색 엔진 최적화에 불리함
  
• SSG(Static Site Generation)
  
  특징 : 서버에서 페이지를 렌더링 > 클라이언트에게 HTML을 전달
  최초 빌드할때만 생성
  정적 페이지를 여러개 만들어 놓음 (미리 만들어둠)
  
  장점 : 사용자가 빠르게 페이지를 볼 수 있음
  단점 :정적인 데이터에만 쓸 수 있다
  서버와의 통신에 의존 > 랜더링보다 상호작용이 느릴 수 있음 > 서버 부하올수 있음
  마이페이지 불가 ( 데이터에 의존)
  
  
• ISR ( Incremental Static Regeneration) - 정적 페이지를 제공
• SSR (Server side Rendering)
  
  특징 : 모든 페이지를 미리 생성해서 부하를 줄이는 방식
  장점 : 빠른 로딩 속도 높은 보안성 , 데이터에 의존한 페이지 구성 가능함
  
  단점 : 서버 과부하 올 수 있음 , 요청할 때마다 페이지를 만들어야 함