延迟获取 React Server Sider Rendering 的 API 数据该怎么办? [英] What should I do in delay of getting API data for React Server Sider Rendering?

问题描述

通过使用

所以，现在是我的问题:

延迟获取 React Server Sider Rendering API 数据该怎么办?

是否能够进行一些流式服务器端渲染?比如，发送一些加载的 HTML/CSS，然后在整个 HTML 准备好后发送其余的，在 HTML 的末尾，我们将有一些代码来消除加载或类似的东西.

解决方案

这篇文章将在页面加载时显示加载或执行任何操作.

如果用户通过触发 useRouter 方法(如 push、replace 和 ...)在页面之间移动，您可以使用 <Router 的 code>events 方法.这样就可以在路由加载、加载等一些事件时做一些动作！

看看这个例子:

_app.tsx:

Router.events.on(routeChangeStart", console.log);function MyApp({ Component, pageProps }: AppProps) {返回 (<应用容器><组件{...pageProps}/></AppContainer>);}导出默认的 MyApp；

在开始更改路由器时，将执行 console.log，在此示例中，根据 一篇来自Akhila的文章，我们可以实现以下场景:

_app.tsx:

const progress = new ProgressBar({尺寸:2，颜色:#38a169"，className:进度条"，延迟:100，});Router.events.on(routeChangeStart", progress.start);Router.events.on(routeChangeComplete", progress.finish);Router.events.on(routeChangeError", progress.finish);

现在，如果您通过触发useRouter 方法之一更改路由器，您将有一个加载进度条，页面加载后，将显示其内容...

By using react cool starter, I implemented a good React Server Side rendering. Even this implementation is able to fetch data from Backend API and get data and then make HTML in server and pass it to client browser for first initial render.

But my boss ask an awesome question. what will happen when Backend API will be very slow? And because of this I add a mock delay for one of APIs:

export const getInitialProps = ({
  queryClient,
}: any): any => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(queryClient.prefetchQuery('sampleUser', getUserList));
    }, 5000);
  });
};

And then I opened a new tab and called localhost:8080/profile, for 5 seconds I saw nothing on the browser, just see the browser loading was rotating counterclockwise:

so, it is my question now:

What should I do in delay of getting API data for React Server Sider Rendering?

Is it able to have some Streaming Server Side Rendering? like, sending some loading HTML/CSS then right after entire HTML will be ready send the rest and in the end of HTML we will have some codes to vanish loading or something like it.

解决方案

EDIT: This post is about to display a loading or do any action when the pages are loading.

if the user moves between pages by triggering useRouter methods, like push, replace, and ..., you can use the events method of Router. In this way, you can do some action when the route is loading, loaded and some other events!

take a look at this example:

_app.tsx:

Router.events.on("routeChangeStart", console.log);

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AppContainer>
      <Component {...pageProps} />
    </AppContainer>
  );
}

export default MyApp;

on start changing the router, console.log will executed, in this example instead of triggering the console.log you can show a loading/loading bar, according to an article from Akhila, we can implement the following scenario:

_app.tsx:

const progress = new ProgressBar({
  size: 2,
  color: "#38a169",
  className: "bar-of-progress",
  delay: 100,
});

Router.events.on("routeChangeStart", progress.start);
Router.events.on("routeChangeComplete", progress.finish);
Router.events.on("routeChangeError", progress.finish);

now if you change the router by triggering one of the useRouter methods, you will have a loading progress bar, after the page loaded, the content of that will be displayed...

这篇关于延迟获取 React Server Sider Rendering 的 API 数据该怎么办?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！