Моя простая страница NextJS выглядит следующим образом (результаты можно посмотреть по адресу https://www.schandillia.com/):
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import Head from 'next/head';
import compose from 'recompose/compose';
import Layout from '../components/Layout';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const styles = {
root: {
textAlign: 'center',
paddingTop: 200,
},
p: {
textTransform: 'uppercase',
color: 'red',
},
};
class Index extends PureComponent {
render() {
const { classes } = this.props;
const title = 'Project Proost';
const description = 'This is the description for the homepage';
return (
<Fragment>
<Head>
<title>{ title }</title>
<meta name="description" content={description} key="description" />
</Head>
<Layout>
<p className={classes.p}>amit</p>
<Button variant="contained" color="secondary">
Secondary
</Button>
</Layout>
</Fragment>
);
}
}
export default withStyles(styles)(Index);
Я импортирую кучу компонентов из библиотеки @material-ui/core для стилизации своих предметов. У меня также есть локальное определение стиля, присвоенное константе style.
То, что здесь происходит, заключается в том, что мой стиль не отображается на сервере, поэтому файлы, обслуживаемые при загрузке, не имеют стиля. И тогда CSS обрабатывается клиентским кодом. В результате возникает вспышка нестандартного контента, который длится почти секунду, достаточно долго, чтобы его можно было заметить.
Есть ли способ это исправить? Вся кодовая база для справки на https://github.com/amitschandillia/proost/tree/master/web.