材质Ui未设置样式的资源在使用NextJS使用SSR进行渲染之前会闪烁一次

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)。要将样式向下注入客户端：

在使用服务器端收集器的每个request.

• Render上，

1. 都会创建一个全新的ServerStyleSheets实例。
2. 把CSS拉了出来。
3. 将CSS传递给客户端。

在客户端，在删除服务器端注入的CSS之前，将再次注入CSS。您可以在此example中看到如何做到这一点。

有关Server Rendering with Material UI的更多信息