FE (4) 썸네일형 리스트형 Pre-Fetching 1. Pre-Fetching Pre-Fetching : 페이지를 미리 불러온다. 현재 사용자가 보고 있는 페이지에 있는 링크나 버튼들로 갈 수 있는 페이지들의 번들파일을 불러와 pre-fetching한다.-> 빠른 페이지 이동이 가능 ※ 프리페칭이 필요한 이유!리액트에서 빈 화면 이후에 페이지 렌더링 시 JS코드를 번들링해서 받을 때 현재 페이지에 필요한 JS 코드들만 전달 받음.넥스트에서 모든 페이지의 번들파일을 받을 경우 용량이 커지며 하이드레이션이 늦어짐 -> 리액트와 같은 방식으로 현재 페이지의 번들 파일만 받게 되지만 페이지 이동시 다시 번들 파일을 받아야 함. -> 이때 필요한 것이 프리페칭! 아래 사진에서 현재 페이지에 Link로 페이지 이동이 가능한 페이지에 필요한 JS코드를 프.. 네비게이팅 1. 클라이언트 사이드 방식의 링크 생성● a태그서버에게 새로운 페이지를 요청하는 방식으로 페이지 이동함 ● Link컴포넌트// href에 경로를, 태그 사이에 화면에 표시할 텍스트를 작성indexsearch ● 이벤트 핸들러 함수 컴포넌트 내부에서 특정 조건이 만족했을 때, 함수 내부에서도 페이지를 CSR방식으로 이동할 수 있다.const onClickButton = () => { router.push("/test");}; return ( /test 페이지로 이동 ) router.push: 페이지 이동router.replace: 뒤로가기를 방지하며 페이지 이동router.back: 뒤로가기 Page Router 1. Page Router 실습 전 넥스트 앱 만들기npx create-next-app@14 section2 npx(node-package-execute)npmjs.com에 있는 최신 버전의 노드 패키지를 다운로드 없이 실행시키는 명령어 /src/pages/_app.tsx와 /src/pages/_document.tsx파일은 페이지역할을 하지 않고 넥스트 앱의 모든 페이지에 공통적으로 적용될 로직이나 레이아웃, 데이터를 다루기 위한 파일이다 . /src/pages/_app.tsx은 리액트에서 app컴포넌트(root컴포넌트)와 같은 역할을 함./src/pages/_document.tsx은 리액트에서 index.html과 비슷한 역할을 함.모든 페이지에 공통적으로 적용되어야 하는 넥스트 앱의 html코드를 설.. Next.js 렌더링 리액트 렌더링유저가 요청하면 서버에서 빈껍데기가 만들어지고 브라우저에서는 빈 화면이 렌더링 됨.그 이후 모든 자바스크립트 코드들이 번들링 되어 한번에 브라우저로 전달되고 브라우저에서 자바스크립트 코드들이 실행되어 내용이 렌더링되어 유저가 볼 수 있다.이 모든 과정이 이루어지는데 걸린 시간을 FCP라고 함. 그리고 리액트는 FCP가 길다고 볼 수 있다. 대신 초기 접속 이후의 페이지 이동은 빠름! FCP : 요청 시작부터 컨텐츠가 화면에 처음 나타나는데 걸린 시간성능을 나타내는 데 중요한 시간3초 이상 이탈률 32% 증가, 5초 이상 이탈률 90% 증가, 6초 이상 이탈률 106% 증가, 10초 이상 이탈률 123% 증가 Next.js의 사전 렌더링유저가 요청하면 서버에서 자바스크립트 코드가 html로 렌.. 이전 1 다음
