使用 next.js SSR 路由会在显示页面之前呈现空白屏幕答案

【问题标题】：Routing with next.js SSR renders a blank screen before showing the page使用 next.js SSR 路由会在显示页面之前呈现空白屏幕
【发布时间】：2021-12-05 23:16:56
【问题描述】：

我知道我的数据在服务器端，然后我的屏幕将被渲染，但是否有可能避免这种情况？

我已经在使用 next/link 而不是 a 标签了

【问题讨论】：

为了澄清，您是在问是否可以在没有服务器端渲染的情况下使用 Next？或者您是说您必须在服务器端渲染一些内容，但由于加载时间较长，您希望避免用户在等待时出现空白屏幕？
对不起，如果我不清楚，英语不是我的母语我必须在服务器端渲染内容，我想知道是否有办法避免用户出现空白屏幕，比如SPA。我听说 next/link 可以解决问题，但我得到的结果与经典标签相同
你能发布你的代码吗？这是一个使用带有 SSR 的 next/link 的示例，并且页面不会变为空白。 codesandbox.io/s/mystifying-dewdney-rv4qd

标签： routes next.js server-side-rendering

【解决方案1】：

Next.js 不会返回空白页，然后重新水化它。一旦获得新页面的数据，它将解析页面。因此，过渡看起来就像使用任何其他服务器端渲染技术一样，只要未加载新页面，用户就会停留在前一页面上。

如果这不适合您，您可以随时扩展您的 _app.js 并在页面转换之间添加自定义加载器/动画。

【讨论】：