SSR2 styled component & next.js14 styled component(SC)를 next.js에서 사용 하기위해 노력을 했다. 정확하게 말하면 next의 장점을 최대한 가져가면서 SC를 어떻게 사용할까… 우선은 공식 문서 부터 살펴보자 https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components https://styled-components.com/docs/advanced#app-directory next.js 처음 부분을 보면 "경고: 런타임 JavaScript를 필요로 하는 CSS-in-JS 라이브러리는 현재 서버 컴포넌트(Server Components)에서 지원되지 않습니다. 서버 컴포넌트에서 지원이 안된다라… 서버 컴포넌트를 스타일링하려.. 2024. 2. 3. CSR vs SSR (hydration, "use client") SSR vs CSR CSR 모든 렌더링 즉, 모든 ui구축작업이 모두 client측에서 일어나는 것 Rendering react code를 브라우저가 이해할 수 있는 html 로 바꾸는 작업 CSR의 단점 1. 렌더링 되기전 잠깐의 빈화면 브라우저는 html을 띄워준다. 그냥 React 환경에서는 CSR이기때문에 자바스트립트가 돌아가기 전 잠깐동안 빈 Html을 보여준다. 그러고 자바스크립트가 돌아가면 HTML을 자바스크립트가 redering 하고 그제서야 보여지게 된다. → 자바스크립트가 안돌아가거나 느리면 html은 비어있기때문에 아무것도 볼수없다. 2 .Seo 검색엔진 최적화 구글의 검색엔진은 html의 요소를 본다. 그렇기에 비어있는 html은 검색엔진 최적화를 할수없다. SSR 모든 렌더링이 서.. 2024. 1. 30. 이전 1 다음
