Рендеринг на стороне сервера с помощью devextreme и материала ui @ react16

После обновления страницы (и прохождения моего ssr) похоже, что ни один из css не поддерживается, если я не перейду через свое приложение и не вернусь к нему или даже не щелкну некоторые элементы. Есть ли примеры, как это правильно сделать?

Я использую тот же самый код из примера управляемой сетки взаимодействия с материалом:

https://github.com/kkotwal94/DrivingService (ветвь разработки) ‹- где компонент находится под компонентами / demoBase, а SSR находится в server / render / pageRender.jsx. Я использую пример пользовательского интерфейса материала, чтобы понять, как это делается. Я использую демонстрационную сетку в Student.jsx.

Вот изображение того, что происходит после обновления: image

Все остальное отображается нормально (все остальные страницы) в производственном режиме и режиме разработки. Я понятия не имею, что мне здесь не хватает. Похоже, что jss-in-css отображается неправильно.

Я обнаружил, что при возврате к pre-React 16 все снова начало работать. SSR, а что нет, однако я не могу использовать проект dx-react-grid, так как для этого требуется 16. Что-то вроде чокнутого, все еще исследую, где я дурачился.

ТЕСТ

http://transportation.kkotwal.me/ Я разместил его, если вы нажмете на логин, вы можете войти в систему с [email protected], пароль: 123, или вы можете просто зарегистрироваться, где имя пользователя должно быть адресом электронной почты, это не имеет значения. После опеки, если вы перейдете к кнопке учеников в навигации (если вы нажмете на трекер транспорта после входа в систему, вы должны вернуться на корневую страницу / представление). Вы увидите пример экстремально управляемой сетки для разработчиков.

Если вы нажмете «Обновить» на этой странице, вы увидите, что весь CSS испорчен. Если вы не уверены, что это за страница: http://transportation.kkotwal.me/students. Источник находится здесь: https://github.com/kkotwal94/DrivingService/tree/UpdateReact. Рендеринг на стороне сервера находится https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render. Компонент для компонента devExtreme называется DemoBase.jsx в папке компонентов, а контейнер, который его отображает, - это https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/.Student.jsx.


reactjs material-ui server-side-rendering jss devextreme
person Karan    schedule 14.01.2018    source источник
comment
Сначала отключите минификацию в своей производственной сборке (удалите uglify из конфигурации webpack), чтобы вы могли видеть, выдает ли реакция какие-либо предупреждения. Если вы внимательно посмотрите, как загружается страница сервера, сетка загружается с лучшими стилями, то после того, как что-то происходит, она выключается. это может быть из-за того, что клиент пытается повторно выполнить рендеринг, когда контрольные суммы реакции не совпадают   -  person Andy Ray    schedule 16.01.2018
comment
Да, он упоминает, что класс на сервере и клиенте не соответствует кнопке, что заставляет меня думать, что ни один из них не соответствует правильно. При этом я знаю, что они должны совпадать на сервере и клиенте. Но я не знаю, как этого добиться.   -  person Karan    schedule 17.01.2018

Ответы (2)


arrow_upward
0
arrow_downward

Думаю, вы уже знаете, что В React 16 внесено множество улучшений в рендеринг на стороне сервера. В обновлении были добавлены дополнительные методы рендеринга на стороне сервера, такие как renderToNodeStream().

Официальное руководство по обновлению React с 15 до 16 упоминает, что у него не должно быть проблем, за небольшими исключениями. Одно из этих исключений - изменение перерыва, когда вы гидратируете контейнер, отображаемый на сервере:

У гидратации контейнера, отображаемого на сервере, теперь есть явный API. Если вы восстанавливаете HTML-код, отображаемый на сервере, используйте ReactDOM.hydrate вместо _ 3_. Продолжайте использовать ReactDOM.render, если вы просто выполняете рендеринг на стороне клиента.

Имея это в виду, я бы поискал в вашем проекте (и, возможно, также в сторонних библиотеках) некоторые ReactDOM.render, которые были пропущены, чтобы заменить их на ReactDOM.hydrate при обновлении React до версии 16.

person falsarella    schedule 17.01.2018
comment
хм, хотя я и сделал. Однако я дважды проверю. - person Karan; 17.01.2018
comment
Да, похоже, не проблема. Вот ссылка на возможную проблему для друзей из поисковых систем: github.com/DevExpress/devextreme- reactive / issues / 671 - person Karan; 20.01.2018

arrow_upward
0
arrow_downward

Вероятно, это проблема в коде на стороне сервера и в вашем скрипте nodejs.

Причина №1: если вы используете материал ui версии 4.x, вам следует посмотреть их ssr документация в пользовательском интерфейсе материала версии 3.x или ниже, которую мы используем

JssProvider from 'react jss/lib/JssProvider';

однако это больше не требуется, обе ваши ссылки на github не работают, пожалуйста, проверьте свой ssr-код и сравните его с документацией по material-ui

Причина # 2: вы должны обратиться к папке сборки для своих expressjs

app.use(express.static(path.join(__dirname, '../../build'))); 
app.use(express.static(path.join(__dirname, 'public')));

это может быть другой причиной, и если это отсутствует, проверьте, что ваш componentDidMount также не будет вызываться, поэтому рендеринг на стороне клиента не будет происходить, однако для ssr должен происходить рендеринг как на стороне клиента, так и на стороне сервера

Полный код SSR можно найти здесь: ссылка

person Sadanand    schedule 12.12.2020