javascript - Gatsby 构建/SSR 换出导致显示错误的组件
问题描述
更新:以下已解决,但我遇到了类似的问题:
在我的图库模板中(对于示例页面,请参见此处,如果通过站点导航到,一切都会正常加载。刷新时,网格父 div(样式组件中的 GalleryGrid)被擦除/取消样式/替换为空白 div。这实际上发生在在盖茨比补水期间刷新。
我尝试用手动设置样式的常规 div 替换样式组件,但没有成功。不知道发生了什么!
我遇到了一个非常奇怪的错误!
我使用 Gatsby 构建了一个网站,从 Prismic.io 采购,并使用 styled-components 来设置样式。我使用 framer-motion 进行页面转换,并将我的布局组件添加到 gatsby-browser,以便仅转换页面内容,并向 gatsby-ssr 添加类似的代码以修复一些初始 ssr 错误。
现在发生的情况是,每当直接访问索引以外的页面时(试试这个),某些组件不会正确呈现。在此示例中,页面顶部的日期被替换为<Body>
组件(其样式与预期<Date>
组件不同),实际内容已被截断,仅显示第一个<p>
.
如果您导航到“投资组合”部分,然后导航回目录页面,页面将正确显示 - 日期现在是一个<Date>
组件并显示整个正文文本。
'essay' 节点也会发生类似的错误 - 例如,在此页面上,图像本应位于一个被调用的组件中,但在刷新或直接访问(而不是通过站点导航导航到该页面)时ImageContainer
被一个额外的组件替换。EssayContainer
老实说,我不知道这里发生了什么或可能导致此错误的原因 - 无论是我做错了什么还是这是 Gatsby 的 SSR 或 styled-components/gatsby SC 插件中的错误。它在运行时按预期工作gatsby develop
,因此必须是构建或 SSR 中的某些内容。
我的盖茨比浏览器:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
export const shouldUpdateScroll = ({
routerProps: { location },
getSavedScrollPosition,
}) => {
if (location.action === "PUSH") {
window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
} else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
() => window.scrollTo(...(savedPosition || [0, 0])),
transitionDelay
)
}
return false
}
还有我的 gatsby-ssr:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
我的回购在这里。
任何帮助是极大的赞赏!
解决方案
原来这是两个问题!
在构建时交换某些组件的问题是由于我使用的媒体查询库react-responsive
- 没有 SSR 支持。我迁移到@artsy/fresnel
并解决了很多问题。
内容被截断的问题似乎是样式组件不能很好地与 SSR 配合使用的问题。我直接设置了内部 HTML 的样式组件 - 在组件内嵌套另一个 div 并从那里设置 html 就可以了:
<Description>
<div
dangerouslySetInnerHTML={{
__html: data.prismicGallery.data.description.html,
}}
/>
</Description>
这几乎解决了所有问题 - 我仍然对盖茨比的水合作用替换/取消某些元素的样式有问题,但我怀疑这是一个不同的问题(添加到原始问题)。
推荐阅读
- c# - 更新后领域对象不可见
- php - 使按钮将数据发送到数据库(空白页在重新加载时工作?)
- php - 在没有开关的情况下拆分函数的处理和响应(寻找替代方案)
- sapui5 - 如何使简单的表单响应?
- c# - 调试期间的 CsvHelper 错误 - System.Linq.SystemCore_EnumerableDebugView
- android - 使用 Gson 反序列化,但 App 已更新(新对象结构)
- protractor - 我想在量角器黄瓜框架中并行运行 5 个 chrome 会话上的一个功能文件
- react-native - 无法在android中添加联系人
- linux - 运行 Gtlab CI 作业以使用 webdriverio 执行自动化测试时出现“加载共享库时出错:libnss3.so”
- mysql - MySQL查找每个月的员工人数