Question

我已将页面最小化为仅ui用户界面组件及其呈现页面，但问题仍然存在。当我刷新页面时，在渲染页面之前，偶尔会有大星星闪烁。我怀疑它是mateiral-ui评分组件的无星级明星。当我在页面上添加更多导入内容和复杂性时，星形显示的速率会增加。我想知道我在做什么是错的

        import Rating from "@material-ui/lab/Rating";

        function Event() {
          return (<Rating
                    size="large"
                    readOnly={true}
                    defaultValue={5}
                    precision={0.5}
                />
            );
        }

        export async function getServerSideProps(context) {
            return {props:{}}
        }


        export default Event

使用nextjs版本9.3 表示代码：

    app.get('/event/:title/:id', async (request, response) => {
        const data = {}
        return next.render(request, response, '/event/Event', data);
    });

Answer 1

为页面提供所需的CSS很重要，否则，页面将仅显示HTML，然后等待客户端注入CSS，从而导致页面闪烁（FOUC）。要将样式注入客户端：

在每个请求上创建一个新的ServerStyleSheets实例。
使用服务器端收集器渲染React树。
拉出CSS。
将CSS传递给客户端。

在客户端，将在删除服务器端注入的CSS之前再次注入CSS。您可以在此example中查看操作方法。

有关Server Rendering with Material UI

的更多信息

在使用NextJS进行SSR渲染之前，未使用Ui样式的素材资源每次闪烁一次

1 个答案: