Dug_House

어떤 것이 궁금한지 Server Side Rendering(SSR) 페이지에서도 lazy loading이 필요할까? 왜 궁금한지 SSR은 서버에서 HTML을 생성하여 클라이언트로 보내기 때문에 초기 렌더링 속도가 빠를 것 같은데, lazy loading으로 한 번 더 최적화할 필요가 있는지 의문이 생김. lazy loading이란? 최초에 모든 모듈을 가져오지 않고, 필요한 경우에만 클라이언트(브라우저)에서 모듈을 로드하여 네트워크 트래픽을 줄이고 초기 렌더링 속도를 향상시키는 기술. 필요한 상황 페이지 크기 최적화: 서버에서 클라이언트로 전송하는 HTML의 크기를 줄이고, 필요한 리소스만 브라우저에서 로드하여 초기 렌더링 속도를 더욱 향상. ..

문제 상황 Warning: Prop `style` did not match. Server: "null" Client: "min-width:;height:" 원인 Next.js는 SSR을 하기에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. 게다가 Fullcalendar라이브러리는 SSR을 지원하지 않는다. 해결법 그렇기에 클라이언트에서만 렌더링을 해야한다. Next.js에서 제공하는 dynamic import를 사용한다. export const CalendarPage = () => { const Calendars = dynamic(() => import('./components/Calendar'), { ssr: false, }); return ( );..