SSR4 ReferenceError: document is not defined (feat. Next.js + lottie) 프로젝트 잘 진행하다가 dev실행했을 때 갑자기 오류가 났다.... 팀원이 lottie를 적용한 toastify를 수정 후 그 PR이 develop 브랜치에 머지 후에 갑자기 아래와 같은 오류가 발생했다.. 보니 lottie가 문제. document is not defined 오류는 Next.js의 서버 측 렌더링(SSR) 환경에서 클라이언트 전용 코드가 실행될 때 발생한다. Lottie 애니메이션을 사용할 때 이 오류가 발생하는 이유는 Lottie 라이브러리가 DOM 요소에 접근하려고 하기 때문이다.해결하기 위해서는 클라이언트 측에서만 Lottie 애니메이션을 렌더링하도록 설정해야 한다.해결 방법) Lottie 컴포넌트 클라이언트 전용으로 설정하기// Lottie 컴포넌트를 클라이언트에서만 렌더링하도록.. 2024. 8. 14. [모던 리액트 Deep Dive] 4장. 서버 사이드 렌더링 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [4장] 서버 사이드 렌더링4.1 서버 사이트 렌더링이란?✨싱글 페이지 애플리케이션의 세상📍싱글페이지 애플리케이션이란렌더링과 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전.. 2024. 7. 10. Next.js 왜 씀? ❓Next.js란...React 기반의 오픈소스 JavaScript 웹 프레임워크리액트의 확장판 = 리액트 + 페이지 라우팅 + 빌트인 최적화 기능 + 다양한 렌더링 전략✨React와의 차이리액트로 충분한 것 같은데 Next가 왜 나왔을까? 비교를 해보자.Next.js는 검색 엔진 최적화, 렌더링에 중점을 둔 웹사이트에 특히 적합하다.📍렌더링 방식React: 클라이언트 측 렌더링(CSR)을 사용하여 페이지 전환이 부드러워지지만, 초기 로딩 속도가 느리고 SEO에 불리하다.Next.js: 서버 측 렌더링(SSR)을 사용하여 초기 로딩 속도를 높이고 SEO 친화적인 웹 애플리케이션을 구축할 수 있다.[🔥CS 뽀개기] - 렌더링 사형제 CSR, SSR, SSG, ISR 자바스크립트와 스타" data-og-.. 2024. 5. 30. 렌더링 사형제 CSR, SSR, SSG, ISR ✨CSR (Client-Side Rendering)클라이언트에서 렌더링이 일어나는 방식클라이언트가 React와 개발자 코드를 다운로드해 DOM을 구성하고 화면에 렌더링처음에 빈 HTML 파일을 로드 -> 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링 함 장점 👍🏻 빠른 사용자 경험(UX)과 반응성 제공구동속도가 빠르고 서버 부하가 적음단점 👎🏻 초기 로딩 속도가 느림검색 엔진 최적화(SEO)가 어려움✨SSR (Server-Side Rendering)서버에서 렌더링된 HTML을 클라이언트에 전송하는 방식해당페이지에 대한 전체 HTML을 동적으로 렌더링하고 제공하는 앱 서버에 대한 요청을 시작 -> 사용자가 요청할 때마다 페이지를 요청하고 렌더링하므로 페이지 이동 시 속.. 2024. 5. 28. 이전 1 다음
