在nextjs之前加载初始屏幕 [英] load splash screen before nextjs

问题描述

我有一个NextJS网站，我想在加载网站之前添加一个闪屏

但是因为Splash Screen也在NextJS代码中，所以它将在服务器上呈现nextjs而在客户机上下载并执行JS时加载。事实上，它毫无用处，因为它将在页面准备好后执行！

如何在Reaction完全加载和执行之前执行闪屏？

我还将nginx用于proxy_pass

推荐答案

加载画面：

import React from 'react'
import useSWR from 'swr'
const fetcher = (url) => fetch(url).then((res) => res.json());

// your main function
export default function Profile() {
  //for relative and absolute paths
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  //for the loading you can create your custom component and insert instead of div, like this you keep same styling
  if (!data) return <div>loading...</div>
  if (data) return <div>hello {data.name}!</div>
}

不要使用useEffect挂钩，使用这个lib，更好的代码和功能。

这篇关于在nextjs之前加载初始屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！