How to use server-side rendering and custom themes at the same time?

[Lifeni]

I wrote an application in Next.js that uses a custom theme.

The problem I'm having is that after loading the page, it loads the default theme first, then the custom theme.

The expected case should be to switch to the custom theme on the server side, but from the devtools network page, the custom theme is not loaded on the server side.

https://codesandbox.io/s/billowing-dawn-c8msx?file=/pages/_app.js
Refreshing the page in CodeSandbox you can see that the button has changed from blue to green.

I was using a working Geist version 2.1.0-canary.2, but upgrading to 2.1.3 caused the problem.

So how can I use both server-side rendering and custom themes in the latest version?

Thanks!

Translated from Chinese

我用 Next.js 写了一个应用，用到了自定义主题。

我遇到的问题是在加载页面之后，会首先加载默认的主题，然后加载自定义的主题。

预期的情况应该是在服务端就切换到自定义的主题，但从 devtools 的 network 页中看，自定义主题并没有在服务端加载。

https://codesandbox.io/s/billowing-dawn-c8msx?file=/pages/_app.js
在 CodeSandbox 中刷新页面可以看到按钮从蓝色变成了绿色。

我之前使用的工作正常的 Geist 版本是 2.1.0-canary.2，但是升级到 2.13 就出现了问题。

所以如何在最新的版本中同时使用服务端渲染和自定义主题？

谢谢。

[unix]

This should be related to the styles that can only be collected by server-side rendering, which I'm investigating, but there's no particularly good solution yet.
This issue(#258 ) should help you, using <Page render="effect">{children}</Page> to keep the theme from rendering until after loading can avoid this problem, but it's not the best practice, if anyone has a better improvement, feel free to leave a comment.

[Lifeni]

I've tried this and it works, hope there is a better solution, thanks.