2
반응 선도, 서버가 아닌 클라이언트에 대한 추가 공급 업체 접두사 스타일을 렌더링 :재료 UI 0.15.2 나는 다음과 같은 설정을 사용하고 15.2.1 경고
react버전을15.2.1material-ui
EV 렌더링 서버 측의 버전 0.15.2
express 및 universal-router 어 나는 오류의 다음과 같은 종류의 material-ui 구성 요소를 얻을 사용 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) uot;);mui-prepared:;" data-reactid="36">
(server) uot;);mui-prepared:;-webkit-transition:a
이 express 의해 렌더링 된 HTML 사이의 불일치가 그 내 브라우저 렌더링 (그리고 문제가 아니기 때문에이 오류의 이유는 브라우저 특정; 크롬, 파이어 폭스, 사파리 모두 같은 결과를 얻었습니다.)
다음은 하나의 구성 요소 (Paper)에 대한 서버 생성 HTML입니다.
<div class="Cv_me_2f3" style="color:rgba(0, 0, 0, 0.87);background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0, 0, 0, 0.16),
0 3px 10px rgba(0, 0, 0, 0.23);border-radius:50%;background-image:url("https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAANxAAAAJGU3NGRhZmNiLWExZjMtNGY3MC1hNzNjLWY4OTJlMGJmZTcyYQ.jpg");mui-prepared:;-webkit-transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;-moz-box-sizing:border-box;" data-reactid="36">
다음은 동일한 구성 요소에 대한 클라이언트 HTML입니다.
<div class="Cv_me_2f3" style="color:rgba(0, 0, 0, 0.87);background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0, 0, 0, 0.16),
0 3px 10px rgba(0, 0, 0, 0.23);border-radius:50%;background-image:url("https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAANxAAAAJGU3NGRhZmNiLWExZjMtNGY3MC1hNzNjLWY4OTJlMGJmZTcyYQ.jpg");mui-prepared:;" data-reactid="36"></div>
여기에 차이점이 있습니다 (구성 요소와 관계없이 동일한 종류의 차이점이 있음). 맨 마지막을 향해 style 속성에서
style="...mui-prepared:;-webkit-transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;-moz-box-sizing:border-box;" data-reactid="36"
는 -webkit-transition 및 -moz-box-sizing 속성은 서버에서만 어떻게 든 추가 된 취소되지 않습니다.
내가 조사해 보니 material-ui의 테마 시스템이 일부 접두어를 사용하여 자동으로 접두사를 사용한다는 것을 알았습니다. inline-style-prefixer으로 생각합니다. 그러나이 정보를 사용하는 방법을 잘 모르겠습니다.
inline-style-prefixer은 클라이언트와 서버가 동일한 userAgent을 적용하도록 사용할 수있는 static 버전을 보유하고 있습니다. 이것이 가능한가? HTTP 요청 헤더에 포함