Lifecycle 컴포넌트가 render된 후 실행됨 useEffect와 다르게 동기적으로 실행 동기적으로 실행되기 때문에 로직이 클 경우 그만큼 화면에 보여지는 시간이 오래걸리게 되므로 간단한 로직들만 넣어서 사용한다. SSR일 때 useEffect, useLayoutEffect 둘 다 JS가 다운로드된 이후에 수행된다는 것을 명심하자 react가 warning을 주는 이유가 이 때문이다. useLayoutEffect를 사용하면 마주하는 warning ⚠️ Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer’s output format. This wi..

Next.js는 React Framework 💪 SEO를 위한, SSR을 해주는 프레임워크라고만 알고있었다. 서버에서 미리 렌더링하는 것, 클라이언트에서 렌더링하는 것의 속도차이를 먼저 영상으로 확인해보고 글을 진행합니다. pre-render 유무의 따른 속도차이비교 클라이언트 렌더링 서버 pre-rendering 깜빡거리는건 새로고침입니다. 👏 Next.js가 해주는 것들 React에서 고려했어야할 것들을 해준다. 웹팩과 같은 번들러로 코드를 번들 바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드를 문법에 맞도록 트랜스파일링) 코드스플리팅으로 production 최적화 성능 또는 SEO를 위한 Pre render (SSR, CSR을 사용) 추가로, Next.js는 다음과 같은 ..

서버사이드 렌더링을 통하여 얻을 수 있는 가장 큰 이점은 검색엔진 최적화 CSR, SSR SPA Single Page Application (SPA) 즉 리액트나 앵귤러같이 초기에 서버에서 JSON 형태로 값을 받아오고 나면 그 뒤로부터는 마치 네이티브 앱을 사용하는 것처럼 작동하는 웹앱을 말한다. 새로고침 방식의 웹과 달리 필요한 static파일을 한번에 또는 나눠서 다운받고 필요한 데이터만 서버로부터 동적으로 받아 네이티브한 형태인 것. 초기 페이지에서 모든 리소스를 다운받지 않고, 리소스를 청크(Chunk) 단위로 묶어서 해당 리소스에 대한 요청이 있을 때만 다운로드 받도록 하는 방법을 적용하면 초기 구동속도 문제를 많이 완화시킬 수 있다. CSR? Client side rendering 최초 로딩..