SSR 썸네일형 리스트형 React의 renderToString 실행 여부 감지 방법 React에서 renderToString을 사용하여 서버 사이드 렌더링(SSR)을 수행할 때, 해당 코드가 서버에서 실행 중인지 클라이언트에서 실행 중인지 구분해야 할 경우가 있다. 이를 확인하는 방법을 정리한다.1. window 객체를 활용한 감지브라우저 환경에서는 window 객체가 존재하지만, 서버 환경(Node.js)에서는 존재하지 않는다. 이를 이용하여 실행 환경을 구분할 수 있다.const isServer = typeof window === "undefined";true: 서버에서 실행 중 (renderToString이 실행될 가능성이 있음)false: 클라이언트에서 실행 중2. useEffect를 활용한 감지React의 useEffect는 클라이언트에서만 실행되므로 이를 활용하여 SSR 여부.. 더보기 React 고급 기술 익히기 - 4편: 코드 스플리팅과 서버 사이드 렌더링(SSR) 최적화 1. 코드 스플리팅(Code Splitting) 이란?코드 스플리팅은 애플리케이션을 여러 개의 번들로 나누어 필요할 때만 로드하는 기법입니다.React.lazy와 Suspense 사용React Router와 코드 스플리팅2. 서버 사이드 렌더링(SSR)이란?SSR(Server-Side Rendering)은 React 컴포넌트를 서버에서 렌더링한 후 HTML을 클라이언트에 전달하는 방식입니다.Next.js에서 SSR 구현정적 사이트 생성(SSG)3. CSR, SSR, SSG 비교렌더링 방식방식 설명장점단점CSR (Client-Side Rendering)모든 렌더링을 클라이언트에서 수행빠른 상호작용, 서버 부담 적음초기 로딩 속도가 느림, SEO에 불리SSR (Server-Side Rendering)서버에서.. 더보기 이전 1 다음
