Next.js (4) 썸네일형 리스트형 [Next.js] 라우팅과 네비게이션의 동작 라우팅과 네비게이션 동작을 이해하는데 도움이 되고자 How Routing and Navigation Works 내용을 더 상세하게 정리했습니다. 1. 코드 분할 (code splitting) 유저가 페이지에 접속하면 최초 경로에 대한 분할된 코드만 응답합니다. 이게 가능한 이유는 Next.js 서버가 각 경로마다 코드를 별도의 청크로 코드 분할하기 때문입니다. 후속으로 경로를 탐색해도 새로 탐색한 경로에 대한 코드만 가져오게 됩니다. 따라서 요청에 따른 응답 데이터양과 전송 시간이 줄어듭니다. 2. 미리 가져오기 (prefetching) 유저가 링크로 된 경로로 이동하기 전에, Next.js는 코드를 미리 로드합니다. Link 컴포넌트의 prefetch를 설정하면, 위 이미지와 같이 사용자의 뷰포트.. CSR부터 RSC까지 렌더링 방식의 변화 Next.js의 서버 컴포넌트와 서버 액션을 보면서 관련된 개념들이 헷갈렸습니다.그래서 그 흐름을 정리하고, 각각의 렌더링을 비교해 보겠습니다. CSR(SPA) - 2013CSR은 브라우저에서 코드를 사용자 인터페이스로 변환하는 렌더링 방법입니다렌더링 순서클라이언트가 요청합니다.서버가 빈 HTML을 응답으로 보냅니다.클라이언트가 JS 코드를 로드합니다.클라이언트는 HTML을 생성하고, 하이드레이션 하면서 상호작용이 가능한 UI를 만듭니다.💡 하이드레이션 (hydration)비유하자면, 말라비틀어진 HTML에 상호작용이 가능하게 물을 주는 것과 같습니다.구성 요소를 렌더링 하고 이벤트 핸들러를 연결합니다.약점SEO에 적합하지 않습니다. 크롤러가 인덱싱 하기에 번들 사이즈가 크고 다운로드 속도가 느립니다.. SSR(Server-side Rendering) SSR(Server-side Rendering)은 서버에서 생성한 HTML 페이지를 렌더링합니다. 간단하게 말하면 서버가 문서 작업을 담당하고, 클라이언트는 보여주기만 합니다. HTML이 생성되면, 클라이언트로 HTML, JSON 데이터, 상호작용을 위한 JS 명령어를 전송합니다. 클라이언트는 상호작용이 불가능한 HTML 빠르게 표시하고, React는 JSON data와 JS 명령어를로 컴포넌트가 상호작용이 가능하도록 만듭니다. 이 과정을 Hydration(수화)이라고 합니다. Pre-Rendering Server-Side Rendering(SSR)과 Static Site Generation(SSG)은 data fetch와 React 컴포넌트를 HTML로 변환하는 작업이 클라이언트에 서버가 응답하기 전에.. CSR(Client-side Rendering) 자바스크립트의 발전에 힘입어 개발자들은 어떤 시도를 해보기로 합니다. 서버에서 최소한의 HTML을 한번만 받고, 나머지를 자바스크립트를 이용해 그려내기로요. 왜 했을까요? 기존 방식인 MPA(Multi Page Application)에서는 새로운 화면을 보려면 화면을 새하얗게 날리고, 서버에서 새로운 HTML을 받아와 문서의 Asset(image, video, ...)을 다운로드하곤 했습니다. 서버에 요청할 때마다 페이지 전체를 새로 렌더링하는 것은 비효율적이라 생각했습니다. 이에 필요한 데이터만 받아아고, 해당 부분만 변경하도록 한 것이죠. CSR(Client-side Rendering)이란 JavaScript로 클라이언트에서 HTML 페이지를 생성하고 브라우저에서 페이지를 렌더링하는 것입니다. 클라이.. 이전 1 다음
