far

[React + Next.js + TailwindCSS] TailwindCSS사용시 서버사이드렌더링(SSR)이 동작하지 않는 경우 본문

React/Next.js

[React + Next.js + TailwindCSS] TailwindCSS사용시 서버사이드렌더링(SSR)이 동작하지 않는 경우

Eater 2023. 2. 7. 17:59

나의 경우 HTML에 __NEXT_DATA__도 생성되는걸 확인했고 Javascript를 끄고도 HTML렌더링이 되는것 까지 확인 했음에도 불구하고 Preview에 미리보기가 생성되지 않았다. (즉 SSR이 동작하지 않았다.)

 

정확한 원인을 몰라서 하나하나씩 코드를 지우다 보니 TailwindCSS를 SSR하기 위해 package.json에 작성했던 prebuild가 문제였다.

"prebuild": "tailwindcss-cli build -o styles/tailwindSSR.css" // 이 부분

그래서 prebuild와 _document파일을 제거했더니 Preview에 미리보기가 생성되면서 SSR이 작동하는걸 확인했다. 물론 tailwindCSS의 SSR을 살리면서 빌드하는 방법도 있었겠지만, prebuild를 지우니까 체감상 웹이 2배는 빨라진 기분이라 그냥 없애버리기로 했다.

 

하지만 여전히 데이터는 받아올 수 없었는데, 이건 useEffect안에 setState로 값을 변경 시키던걸 직접 HTML에다 넣어주면 된다.

이 값을

이렇게 바꿔준다.

 

이제 SSR이 성공적으로 동작한다.

Styled-component사용시에는 _document에서 SSR처리를 해주지 않으면 일부분이 고장났던 기억이 있는데 tailwindCSS는 딱히 그런건 없는 듯 하다 (적어도 내 프로젝트에서는)

'React > Next.js' 카테고리의 다른 글

[React + Next.js] Image with src has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio. 에러 해결  (0) 2023.04.16
[Next.js] Next.js의 프리 렌더링(SSR, SSG, ISR)  (0) 2023.02.08
[React, Next.js] useTableContext should be used within the TableContext provider! 에러  (0) 2023.02.04
[Next.js] CORS에러 해결하기  (0) 2022.12.24
[Next.js]React.Children.only expected to receive a single React element child. 에러  (0) 2022.11.30
'React/Next.js' Related Articles more
Comments