CSR

React18부터 추가된 Streaming SSR을 찾아보면서 기존 렌더링 방식(CSR, SSR)도 복습할겸 공부한 내용을 정리해보고자 한다. 웹 성능 지표(Web Performance Metrics)웹사이트나 웹 애플리케이션의 로딩 속도와 사용자 경험을 측정하는 데 사용되는 다양한 측정 기준입니다.TTFB(Time To First Byte) : 클라이언트(브라우저)가 서버에 요청을 보낸 후 첫 번째 바이트를 받기까지의 시간을 의미한다. 즉, 요청을 보낸후 다시 응답을 받기 시작한 시간이다.FCP(First Contentful Paint) : 페이지가 로드되기 시작한 시점부터 컨텐츠의 일부가 화면에 렌더링될 때까지의 시간이다. 요청에 대한 응답을 받기 전에는 유저가 빈 화면을 보고 있기 때문에 FCP는 ..

문제 상황작업을 하던 중 `localStorage is not defined`에러가 출력됐다.말 그래도 localStorage가 정의되지 않았다는 것이다.localStorage(로컬 저장소)브라우저 환경에서만 사용할 수 있는 웹 스토리지 API 중 하나이다. 클라이언트 측에서 데이터를 영구적으로 저장하는데 사용된다.`window` 객체의 하위 객체로 존재하며, `window`객체가 존재하는 환경(브라우저)에서만 사용할 수 있다.Next.js와 같은 SSR 환경에서 서버측 렌더링 시에는 브라우저 환경이 아닌 서버 환경에서 코드가 실행되기 때문에 `localStorage`를 사용할 수 없었던 것이다.Next.js에서 에러가 발생하는 이유1. SSR의 특징 : Next.js는 기본적으로 SSR을 지원하여 초기..