在 Gatsby JS 中缓存

Question

我有这个 Gatsby 应用程序，当我访问主页时，首先会加载所有内容，包括推荐部分。但是，当我访问另一个页面时，例如博客列表页面，然后单击 link 返回主页，客户评价组件上的数据不会加载，您将看到应用程序的空白区域，其中客户评价部分被放置。为了看到推荐列表，您将再次刷新页面。

为了记录，我的 Testimonials 组件上的数据正在 Heroku 上部署的 Strapi JS 上提取。

到目前为止我在 index.js:

上得到了这个

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
import Header from "../components/Header"
import Testimonials from '../components/Testimonials'
import Blogs from '../components/Blogs'
import SEO from '../components/SEO'

export default function Home({ data }) {
  
  const { 
    allStrapiBlogs: { nodes:blogs },
  } = data

  return (
     <>
    <SEO />
    <div className="main-container">
      <Layout>
      <Header />
      <Testimonials title="Testimonials" />
      <Blogs title="Latest Blogs" blogs={blogs} showAllBlogLinks/>
      <Map />
      </Layout>
    </div> 
    </>
  )
}

export const query = graphql`
  {
    allStrapiBlogs(filter: {featured: {eq: true}}, sort: {fields: published_date, order: DESC}, limit: 6) {
      nodes {
        id
        title
        content
        slug
        published_date(formatString: "MMMM DD, YYYY")
        featured_image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }

  }
`

然后在我的 Testimonials.js 组件上：

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Image from "gatsby-image"
import { FaStar } from "react-icons/fa"
import Title from './Title'

const query = graphql`
  {
    allStrapiTestimonials {
      nodes {
        id
        name
        cite
        text
        photo {
          childImageSharp {
            fluid{
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  }
`

const Testimonials = ({ title }) => {

  const data = useStaticQuery(query)
  const { allStrapiTestimonials: { nodes:testimonials } } = data

  return (
    <div className="testimonial-section section-padding" id="testimonial" data-aos="zoom-in">
      <div className="container">
        <div className="row">
          <div className="col-lg-12">
            <div className="section-title-two center">
                <Title title={title} />
            </div>
          </div>
        </div>
  
        <div className="testimonial-wrap row">
          <div className="testimonial-slider owl-carousel">

              { testimonials.map(item => {
                    const { id, name, cite, text, photo } = item

                    return(
                      <div className="col-xl-8 col-lg-10 col-12 ml-auto mr-auto" key={id}>
                      <div className="testimonial-item mt-40">
                        <div className="testimonial_img">
                             <Image fluid={photo.childImageSharp.fluid} alt={name} style={{ position: "absolute", overflow: "visible", display: "block", width: "211px",  height: "207px" }}  />
                          </div>
                        <div className="testimonial_content xs-mt-40">
                          <div className="testimonial_content_item mb-30">
                            <div className="testimonial_content__pro">
                              <h4 className="mb-10">{ name }</h4>
                              <p>{ cite }</p>
                            </div>
                            <ul className="d-none d-sm-inline-block">
                              <li><FaStar></FaStar></li>
                              <li><FaStar></FaStar></li>
                              <li><FaStar></FaStar></li>
                              <li><FaStar></FaStar></li>
                              <li><FaStar></FaStar></li>
                            </ul>
                          </div>
                          <div>
                            <p>{ text } </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    )
                })}

          </div>
        </div>
        </div>
        </div>
  )
}

export default Testimonials

知道是什么导致了这个错误吗？我该如何解决？

Answer 1

几个月前我遇到过类似的问题，修复完全取决于实现和您的代码。基本上，正在发生的事情是 React 不明白他需要重新水合某些组件，因为在 React 的生态系统之外将某些全局对象指向 DOM 的 window 或 document（不使用状态）可能会阻止补液，因为 jQuery.

绕过这个问题的所有可能解决方案都是补丁（比如尝试添加缓存）。理想的解决方案是避免使用直接指向 DOM 的 jQuery，以及操纵虚拟 DOM (vDOM).

的 React。

您共享的代码没有任何问题，但是，根据您所做的其他一些问题，您正在使用 jQuery 并使用 window 对象，这会阻止一些 React 组件。您应该摆脱 jQuery 或使用一些基于 React 的方法。像这样的东西应该可以在整个网站上强制加载程序：

const Layout = ({ children }) => {
       const [loader, setLoader]=useState(true);
    
       useEffect(()=>{
        setTimeout(()=> {
           setLoader(false)
        }, 400)
       }, [])

  return  <section className={`site__wrapper`}>
    <Header />
    <main>{loader ? <Preloader/> :  children}</main>
  </section>;
};

在 Gatsby JS 中缓存

Caching in Gatsby JS

reactjs

strapi

gatsby