在 nextjs 之前加载启动画面答案

【问题标题】：load splash screen before nextjs在 nextjs 之前加载启动画面
【发布时间】：2021-08-11 08:54:58
【问题描述】：

我有一个 NextJS 网站，我想在加载网站之前添加一个启动画面

但是因为Splash Screen也在NextJS代码中，所以会在nextjs在服务端渲染，JS在客户端下载并执行时加载。其实也没用，因为它会在页面准备好之后执行！

如何在反应完全加载和执行之前进行启动画面？

我还将nginx 用于proxy_pass

【问题讨论】：

您想在数据加载前显示加载屏幕？
是的，在react的js下载执行之前，因为主要的等待时间就是为了那个

标签： reactjs nginx next.js splash-screen

【解决方案1】：

使用此代码

useEffect(() => {
        const handleStart = () => { setPageLoading(true); };
        const handleComplete = () => {
                 setPageLoading(false);
        };
        router.events.on('routeChangeStart', handleStart);
        router.events.on('routeChangeComplete', handleComplete);
        router.events.on('routeChangeError', handleComplete);
    }, [router]);

并使用 pageLoding 显示启动画面

【讨论】：

【解决方案2】：

加载屏幕：

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，更好的代码和功能。

【讨论】：