개발 공부 일지/Next.js2 Next.js - 프리렌더링 (SSG, SSR) 브라우저 접속했을때 렌더링 시점 (CSR 기준)html 빈 태그 전달자바스크립트 코드 로딩, 리액트 실행화면 렌더링pre-rendering : 1번 단계 이전에 렌더링 하는것즉 빈 html 파일을 전달하는 것이 아니라 데이터가 렌더링된 페이지를 전달한다.프리렌더링의 방식 두 가지 1. 정적 생성 (Static Site Generation)빌드 시점에 렌더링(HTML을 만들고) 접속 시점에 보내준다.그 상태에서 자바스크립트 로딩, 리액트 실행-> 클라이언트 사이드에서 리액트가 작동 (hydration)useEffect에서 요청하는 데이터는 로딩 전임 export function getStaticProps(context) 함수를 사용하면 빌드 시점에 데이터 가져올수있음return props : { } ex.. 2024. 9. 28. Next.js 시작 ~ 배포 (Next.js를 사용하는 이유) 리액트 : CSR (클라이언트 사이드 렌더링) 을 하는 SPA 를 제공하는 자바스크립트 라이브러리Next.js : 리액트의 프레임워크 Next.js를 사용하면1. 페이지 초기 로딩 속도가 빠르다.1) 프리렌더링(pre-rendering) 을 제공한다.필요에 따라 서로 다른 종류의 렌더링을 할 수 있다.SSR (서버사이드 렌더링), SSG (정적 생성), ISG (점진적 정적 생성)빈 html이 아닌 미리 데이터가 렌더링된 페이지를 가져오기때문에 사용자 경험이 개선되고 SEO 에 유리하다.프리렌더링 (SSR, SSG) 포스팅 2) 코드 분할을 통해 초기 구동 속도가 빠르다 (js 번들을 작은 청크로 나누어 필요한 시점에 로드) 2. 파일 기반의 라우팅을 제공한다.매우 쉽게 페이지 경로를 설정할 수 있다.이.. 2024. 9. 28. 이전 1 다음