React/Next.js (2) 썸네일형 리스트형 next.js SSR 실행 과정 웹브라우저가 getRequest를 통해 서버에 요청을 할 때마다 서버가 pre-rendering해서 화면을 보내준다. 순서 웹브라우저 접속과 동시에 getRequest 보냄 서버가 response로 이미 렌더링된 html을 보내줌 자바스크립트 로딩 리액트 hydrate hydration 서버에서 받은 이미 렌더링된 html 화면에 리액트의 상태와 같은 데이터가 연결되는 과정. 이를 통해 초기 로딩시 클라이언트에서 지 상호작용이 가능하며, 이후에는 일반적인 react app처럼 동작한다. 만약 hydrate과정이 없다면 서버에서 온 html은 무시하고, 클라이언트 사이드 렌더링이 새로 필요하게된다. 리액트는 hydrate할 때, 렌더링된 콘텐츠가 서버와 클라이언트간에 동일할 것으로 예상한다. 개발자모드에서.. React - Next.js 사용 이유 pre-rendering을 쉽게 할 수 있다. 자동으로 코드 스플리팅, pre-fetching 을 해준다. 파일시스템 기반 라우팅이 가능하다. vercel로 서버 호스팅이 쉽다. 이밖의 이점. 1. pre-rendering을 쉽게 할 수 있다. 클라이언트 사이드 렌더링만 가지고 개발한 사이트는 맨 처음에는 텅 빈 화면이 나온다. 이후 자바스크립트 실행 -> 리액트 동작 과정을 거친 후 화면이 보이기때문에 초기 로딩이 느리다. 또한, 맨 처음에 텅 빈 화면이 나오기때문에 검색엔진에 제공할 수 있는 정보가 적어서 검색 엔진 최적화가 되지 않는다. 따라서 사용자경험과 검색엔진 최적화를 위해 pre-rendering을 할 수 있다. 프리렌더링 : 화면의 컴포넌트나 데이터를 미리 렌더링해서 html으로 저장해두.. 이전 1 다음
