1. issue

This only applies if you’re using vanilla Emotion or a version of Emotion prior to v10. For v10 and above, SSR just works in Next.js.

https://emotion.sh/docs/ssr

emotionjs공식문서를 보면 v10이상부터는 nextjs와 쓸 때 따로 ssr설정이 필요없다고 나와있다. postman을 통해 stlye tag가 생성되는 것을 확인해서 ssr이 적용됐다고 생각했는데 첫화면 로딩 후 일정 시간이 지나면 화면이 새로고침한 것처럼 화면이 한 번 깜박이는 문제가 발생했다. ssr이 됐다면 html에 css가 입혀서 서버에서 브라우저로 오기때문에 이런 현상이 발생되었다는 것은 ssr적용이 되지 않았다는 말이 된다.

2. solution

https://www.inflearn.com/questions/96480
https://github.com/vercel/next.js/discussions/13625

위의 내용들에 따르면 dev mode에서는 webpack의 HMR로 인해 ccs ssr이 적용되지 않고 next build를 한 후 production mode로 실행해야 css ssr이 적용된 화면을 볼 수 있다.

HMR(Hot Module Replacement)은 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다

https://joshua1988.github.io/webpack-guide/devtools/hot-module-replacement.html