Question

我已经使用React（create-react-app和typescript）创建了一个博客站点。最近，我添加了一个名为react-snap的精彩库，主要用于Web爬网程序对页面进行索引。

此外，如果可以的话，我想利用加载时间。

前端托管在Netlify上。后端使用GraphQL实现，并托管在Heroku免费版本上。因此，当页面首次加载时，heroku dyno最多需要一分钟才能从睡眠状态启动。但是，在此期间，博客页面仍显示“正在加载”文本，而不是预先填充的html页面。

我可以通过查看文件夹结构以及右键单击该页面并查看页面源来验证静态html页面是否存在。

如果有人要测试/验证，请访问该网站：https://www.yalhi.com。在查看博客https://www.yalhi.com/blog或任何单个博客页面时，这一点最为明显（到目前为止，只有2个页面主要用于测试）。

为了摆脱加载状态，我还需要执行其他操作吗？

相关代码：

index.tsx：

import { ApolloProvider } from '@apollo/react-hooks'
import React from 'react'
import { hydrate, render } from 'react-dom'

import { apolloClient } from './apollo/apolloClient'

import 'normalize.css'
import Router from './routes/Router'
import './scss/styles.scss'

const rootElement = document.getElementById('root')!
const App = () => (
  <ApolloProvider client={apolloClient}>
    <Router />
  </ApolloProvider>
)

rootElement.hasChildNodes() ? hydrate(<App />, rootElement) : render(<App />, rootElement)

Blog.tsx：

import React, { FunctionComponent } from 'react'

import { Head } from '../../components/Head/Head'
import { Posts } from '../../components/Posts/Posts'

interface Props {}

export const Blog: FunctionComponent<Props> = () => {
  return (
    <div className="blog">
      <Head title="Blog" />
      <Posts />
    </div>
  )
}

Posts.tsx：

import React from 'react'

import { usePostsQuery } from '../../generated/graphql'
import { PostCardWithRouter } from '../PostCard/PostCard'

export const Posts = () => {
  const { data, loading } = usePostsQuery({ fetchPolicy: 'network-only' })

  return (
    <div className="posts">
      {loading && <p>fetching, please wait...</p>}
      {!!data && (
        <ul className="posts__items">
          {data.posts.map((post) => (
            <PostCardWithRouter key={post.id} post={post} />
          ))}
        </ul>
      )}
    </div>
  )
}

使用反应快照，页面仍显示加载状态

0 个答案: