lou@blog $ _

styled-components를 이용하여 스타일링하고 Next.js 앱을 켜면 처음에 CSS가 완전히 로딩되지 않은 듯한 모습이 보이게 되는데, 흉한 맨얼굴이 그대로 드러나니 사용자 경험이 꽤 나쁘다. 이것은 스타일이 Client side에서 적용되고 있기 때문이다. 이를 해결하기 위해서는 커스텀 Document를 만들고, ServerStyleSheet를 이용해서 컴포넌트의 모든 스타일을 서버 사이드에서 적용될 수 있도록 바꾸어야한다. babel-plugin-styled-components 설치 먼저 babel-plugin-styled-components를 설치한다. yarn add babel-plugin-styled-components .babelrc에서 SSR를 사용하도록 설정 .babelrc에는 ..

Next.js에서 제공하는 Image 컴포넌트를 사용해서 이미지 로딩을 하는 중, 거의 700ms 정도에 육박하는 충격적인 로딩속도를 보여주어서 구글링 해봤다. 이건 Image 컴포넌트가 사용하는 기본 이미지 프로세서 때문이라고 하는데, sharp 패키지를 설치하면 해결된다. 패키지를 설치하면 정말 빠르게 이미지가 로딩되는 것을 확인할 수 있다. yarn add sharp