본문 바로가기

SSR2

[Next] Plotly.js 다이나믹 임포트 하기 안녕하세요, 개발자 Sean입니다. 오늘은 본격적으로 회사 블로그 프로젝트 작업에 들어갔는데요, 예상치 못한 복병을 만나게 되었습니다. 애널리스트분들이 주피터 노트북에서 plotly 라이브러리를 사용해 차트를 만들기 때문에 해당 라이브러리를 이용해 차트를 구현해야 하는 상황이었습니다. 따라서 별다른 생각 없이 아래와 같이 라이브러리를 임포트 했습니다. import Plot from 'react-plotly.js'; 그런데 에러가 나오는 것이었습니다! Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will be displayed in the termin.. 2022. 11. 7.
[Web] SSR과 CSR SSR과 CSR 개념은 사실 이해하기 간단해서 그렇게 줄줄이 나열해서 작성하기보다 아래와 같이 정리해서 보는 게 더 편할 것 같다. SSR Server Side Rendering 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식 장점: SEO 최적화/ 최초 페이지 렌더링 속도가 빠름 단점: 화면 깜빡임/ 서버 부담 CSR Client Side Rendering 최초 로딩시 HTML을 비롯한 CSS, javascript 등 각종 리소스들을 받아와 자바스크립트를 통해 동적으로 렌더링 하는 방식 장점: 필요한 부분만 데이터를 요청해 받아오기 때문에 서버 부담이 낮고 페이지 전환이 빠름 단점: 최초 로딩이 오래 걸림/ SEO 문제 2022. 3. 28.