Рендеринг CSS на стороне сервера при рендеринге ReactJs

Я разрабатываю приложение reactjs, отображаемое на стороне сервера. Все работает нормально, но у меня проблема, то есть требуется время для рендеринга css при первой загрузке (только загрузка контента с загрузкой html.after секунд css). Я также пробовал Изоморфный стиль-загрузчик.

Клиент.js

import './../../node_modules/bootstrap/dist/css/bootstrap.css';
import './styles/css/main.css';

const initialState = fromJS(window.__INITIAL_STATE__) ;
const Store = createStore(
  reducers,
  initialState,
  applyMiddleware(thunk.withExtraArgument(axiosInstance))
);

hydrate(  
  <Provider store = {Store}>
    <BrowserRouter>
      <div>
        {renderRoutes(Routes)}
        <Footer/>
      </div>
    </BrowserRouter>  
  </Provider>,
  document.querySelector('#root')
);

Сервер.js

import renderer from './helpers/renderer';

const app = express();
app.use(express.static('public'));
app.use(bodyParser.urlencoded({
  extended: true
}));

app.get('*', (req, res) => {
  const store = createStore(req);  
  const promises = matchRoutes(Routes, req.path)
    .map(({ route, match }) => {

      var parts = req.path.split("/");
      var lastSegment = parts.pop() || parts.pop();
      return route.loadData ? route.loadData(store, lastSegment) : null;
    })
    .map(promise => {
      if (promise) {        
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve);
        });
      }
    });
  Promise.all(promises).then(() => {
     const context = {};
    const content = renderer(req, store, context);
    if (context.url) {
      return res.redirect(301, context.url);
    }
    if (context.notFound) {
      res.status(404);
    }   
    res.send(content);    
  });
});

app.listen(SERVER_PORT, () => {
  console.info('Listening on port '+SERVER_PORT);
});

Рендерер.js

Я попытался загрузить весь файл css из rendere.js. но это не помогло, и часть тела html исчезла при перезагрузке страницы.

export default (req, store, context) => {
  const content = renderToString(
    <Provider store = {store} >
      <StaticRouter location = {req.path} context = {context}>
        <div>{renderRoutes(Routes)}</div>
      </StaticRouter>
    </Provider>
  );

  const helmet = Helmet.renderStatic();
  return `<!doctype html>
    <html lang = "en"> 
      <head>
      <link rel = "shortcut icon" href = "fav.png">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">        
        ${helmet.title.toString()}
        ${helmet.meta.toString()}            
        </head>
      <body>
      <base href = "/" />
        <div id = "root">${content.toString()}</div>
        <script>
          window.INITIAL_STATE = ${serialize(store.getState())}
        </script>

        <script src = "bundle.js"></script>
      </body>
    </html>
  `;
};

Попробуйте добавить hidden класс CSS в тело при выполнении SSR и удалить этот класс CSS в рендерере constructor.

— 04.03.2019 07:01

javascript css reactjs express server-side-rendering

04.03.2019 05:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

983

Другие вопросы по теме

Панель навигации Bootstrap 4 исчезает при изменении размера

Как свернуть панель навигации после нажатия элементов навигации с помощью Javascript?

Относительный путь для URL-адреса изображения в CSS?

Выравнивание изображения карты

Компонент всплывающего окна - обратный вызов onExited не работает, материал пользовательского интерфейса

Как сделать так, чтобы при наведении курсора увеличивалась высота цвета фона в меню

Как установить высоту матовой карты для высоты экрана нескольких мобильных устройств (Angular 6)?

Размытый текст с использованием стиля преобразования в CSS

Как подставить полученное JS значение в определенное место в CSS?

Как разработать полосу прокрутки для содержимого в центре

Рендеринг CSS на стороне сервера при рендеринге ReactJs

Другие вопросы по теме

Похожие вопросы