공부 및 일상기록

항해 플러스 과정에서 CSR을 바닐라 JS로 직접 구현했던 적이 있다.이번에는 그 CSR 구조를 바탕으로 SSR(Server Side Rendering)과 SSG(Static Site Generation) 를 직접 구현해 보는 것이 과제였다.추가로 React로 SSR, SSG를 구현하는 과제도 있었는데, 일단은 바닐라 JS 쪽을 먼저 정리한다.(Next.js로 SSR/SSG 경험은 있었지만, 직접 바닥부터 짜보려니 꽤 막막했다.) 시작하기 전에 알아보는 CSR, SSR, SSG CSR(Client Side Rendering)브라우저가 빈 HTML + JS를 받고, JS가 실행되면서 fetch로 데이터를 가져와 DOM을 채움.→ 단점: 초기 로딩이 늦고, SEO에 불리.SSR(Server Side Rend..

NextJS의 v12와 v13의 가장 큰 차이점 바로 "Server Component" v13버전에서 pages 폴더를 대신하여 app 폴더를 사용하게 되었다. 그리고 app 폴더 내부에서는 모든 컴포넌트가 Server Component로 동작하게 된다. 만약 app 폴더 내부에서 클라이언트 컴포넌트를 사용하려면 파일의 최상단에 'use client' 라고 명시해야 한다. 그렇다면 Server Component란? 서버컴포넌트(Server Component)는 2020년 12월에 소개된 React 18의 기능 중 하나이다. 기존 리액트의 data fetching에 대해 살펴보면 다음과 같다. function Todo({ userId }) { return ( ); } 만약 부모 컴포넌트 (UserDetai..