使用Next.js 8和styled-jsx时的强烈FOUC
FOUC（Flash of Unstyled Content）指的是在网页加载时，由于样式表未及时加载或应用，导致页面出现短暂的样式不一致现象。在使用Next.js 8和styled-jsx时，可以采取以下措施来解决强烈FOUC问题：
- 使用预渲染（Pre-rendering）：Next.js 8支持两种预渲染方式，即静态生成（Static Generation）和服务器端渲染（Server-side Rendering）。通过使用预渲染，可以在构建时将页面内容生成为静态HTML文件，避免了页面在加载时才生成内容的情况，从而减少了FOUC的发生。
- 预加载样式表：可以使用Next.js的
<Head>组件来加载样式表，并设置rel="preload"属性，以提前加载样式表文件。这样可以确保样式表在页面渲染前已经加载完成，减少FOUC的可能性。 - 使用CSS-in-JS解决方案：styled-jsx是Next.js官方推荐的CSS-in-JS解决方案之一，可以将样式直接写在组件中。这样可以确保组件渲染时，对应的样式已经被应用，减少FOUC的出现。
- 使用样式占位符：styled-jsx可以使用
<style>标签中的data-style属性来设置样式占位符，以避免在样式未加载完成时，页面内容被显示出来。例如：
<style jsx>{`
div {
background-color: red;
}
`}</style>
<div data-style />在以上措施中，推荐使用的腾讯云相关产品是：
- 腾讯云静态网站托管（https://cloud.tencent.com/product/sps）：用于将预渲染后的静态HTML文件部署并托管，提供高性能的静态网站访问服务。
- 腾讯云CDN加速（https://cloud.tencent.com/product/cdn）：用于加速静态资源（包括样式表文件）的分发，提高页面加载速度，减少FOUC的发生。
- 腾讯云云函数（https://cloud.tencent.com/product/scf）：用于实现服务器端渲染的功能，提供弹性的、按需调用的计算资源。
以上是对于"使用Next.js 8和styled-jsx时的强烈FOUC"问题的解答，希望能够满足您的需求。
相关·内容
我最近从6.1.1升级到了Next.js 8.0.3，我现在遇到了一个非常强烈的非样式内容( for )，我的标题内容使用了styled-jsx。在更新Next.js之前，它加载得很好。闪烁的头代码是一个定制的npm模块，它使用styled-jsx (而不是next)，并被导入并放置到一个布局页面中，该页面与每个next页面一起呈现。injectGlobal } from 'styled-
浏览 18提问于2019-03-08得票数 0
1回答
我正在尝试使用Next.js和样式-jsx的测试框架Jest。 p { }这是我的package.json脚本。"t
浏览 1提问于2020-01-28得票数 1
回答已采纳
当我尝试使用我们的组件之一使用时，我最终得到了一个类似于下面这样的对象，而不是模块： __webpackChunkName: "_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7// ...})
这与提供真正模块的房车负荷
浏览 1提问于2018-04-28得票数 1
回答已采纳
我正在使用Next.js和next-sass。我一整天都在为一堆没有风格的内容"FOUC“而苦苦挣扎，测试了我在网上找到的各种解决方案，但似乎没有一个对我有效。这个问题在使用CSS转换时尤其明显，因为组件将在没有任何样式的情况下可见，然后转换为其CSS样式。 这仅在先使用next build然后使用next start为生产环境构建时才可见。在开发模式下，使用</
浏览 18提问于2019-03-24得票数 3
1回答
我使用的是Next.js和样式-jsx，测试酶+玩笑。 <h1>test</h1> </div>}import css from 'styled-jsx
浏览 2提问于2020-02-12得票数 0
1回答
我最近开始将我的create react应用程序转换为next.js。我正在使用vercel的开源next.js网站作为构建我的网站的指南。我声明了一个font.ts并使用了样式jsx文件并将其导入到_app.js中，但是当我使用该字体时，我从服务器得到了一个404。这是font.ts文件： import css from 'styled-jsx/css'
expor
浏览 30提问于2020-07-06得票数 0
回答已采纳
我正在学习Next.JS，虽然我知道如何使用getStaticProps从无头CMS中获取动态内容，并在我的JSX模板中提供它，但我不认为我应该如何在我的CSS中访问/使用它。在我使用过的其他SSG生成器中，您可以使用模板引擎使用css插入动态内容。body {}
我可以想出几种方法来实现这一点，但是他们觉得有
浏览 1提问于2021-12-21得票数 0
根据vercel中的这个，我应该能够通过简单地运行yarn add -D @types/styled-jsx来修复这个问题，但是这是行不通的。使用npm而不是纱线安装软件包也解决了问题，但我不想改变我正在使用的软件包管理器。另外，用npm安装这一个软件包，用纱线安装其他组件会使应用程序崩溃。我认为这可能是一个与styled-jsx和纱线工作区相关的提升问题，但是添加
"private": true
浏览 1提问于2021-02-02得票数 9
我在Twitter的源代码顶部附近注意到了以下内容：在谷歌上快速搜索一下，就会发现其他一些网站也在使用它，但我找不到任何描述它的用途的东西将它加入到如此流行的网站的标记中(由于使用了而多次启动)，一定会让它变得有用。我很熟悉"flash of unstyled content“的概念，也就是"FOUC
浏览 4提问于2013-09-18得票数 4
/components/MainTemplate';import css from 'styled-jsx/我使用了一个resolve标签，因为它是in the documentation。 我还想知道，是否可以定义元素的样式，而不指定具体的标记名或类名？我使用的是next.js，在开发和<
浏览 8提问于2019-03-29得票数 0
我的网站是用Next.js和Tailwind CSS构建的。我按照default instructions的要求安装了它们。由于我希望自定义链接的外观，而无需对每个链接应用内联类，因此我还安装了styled-jsx-plugin-postcss，以便可以在Next.js中使用styled-jsx already bundled它工作得近乎完美，但由于某些原因，<style jsx>标签中应用的深色模式样式
浏览 48提问于2021-06-24得票数 1
我有一个Next.js应用程序，里面有几个页面。所有的页面看起来都很相似。Wrapper";
render() { }我想使用功能组件重构它我读过，您不必在页面中导入react，因为next.js路由系统。Next.js文档也会显示示例，而不会对页面组件进行导入，但没有给出解释。
请你澄清一下。在这种情况下，是否有必要进行进口反应？
浏览 1提问于2020-07-25得票数 15
回答已采纳
next-with-apollo npm库和 .中选择的“阿波罗-客户端在next.js”中的对比
此外，我发现这种方法更有意义，更优雅的内部工作，客户端重新设计，以及next.js中的阿波罗-客户的SSR。get-初始道具是使用
浏览 1提问于2021-08-19得票数 4
回答已采纳
1回答
Google PageSpeed建议在头部的<style>标签中添加关键的CSS，并将外部CSS推迟到HTML的末尾。这与Web标准背道而驰，因为它在HTML中内联CSS (应该分开)，并且在CSS加载时创建FOUC。可见性可以在CSS加载后一次显示整个页面，但这会造成整个页面的FOUC，这看起来也不好。在头部使用<link>正确加载CSS和将其推迟到以后之间没有实时区别，因此没有真正需要推迟样式表的加载。加载
浏览 6提问于2019-11-22得票数 2
我对样式组件感到非常兴奋，如果不是为了这个，我会很乐意使用它的。这两个示例都包含完全相同的代码，并且复杂度最低。你很快就会看到，在样式化的组件示例中，在DOMContentLoaded事件和Load事件之间有一个令人不安<em
浏览 6提问于2017-03-15得票数 1
1回答
下面是重现问题的一个简单的代码库：https://github.com/vongohren/fouc-example 所以发生的情况是，我有一个呈现组件的小应用程序，但它不会显示SSR请求上的样式，只有在加载了客户端时才会显示我尝试了在文档中进行加载的所有情况：https://github.com/zeit/next.js/blob/c
浏览 14提问于2019-12-09得票数 0
我正在运行一个next.js项目，但是使用了不同的目录结构： > server> site > pages我已经在服务器index.js文件的next.js对象中设置了目录。当我运行npm run dev时，它使用next成功构建，但忘记了scss。.
| @import "~bulma&q
浏览 0提问于2017-10-01得票数 0
1回答
我已经建立了react.js网站的创建-反应-应用程序。但是在生产模式中，存在FOUC，因为样式是在html呈现后加载的。
有什么办法解决这个问题吗？我一直在搜索谷歌的答案，但还没有找到合适的答案。
浏览 2提问于2018-06-05得票数 1
回答已采纳
我正在尝试通过一些代码使用styled-jsx。BrowserRouter) in App (at src/index.js:7) "react-scripts": "^3.0.1",
浏览 30提问于2019-07-30得票数 6
2回答
使用Firefox量子版，我注意到一些网站在加载CSS时出现了一个“小故障”。其余的页面在没有CSS的情况下加载，然后应用CSS，就好像它异步加载一样(但它不是)。我真的不知道发生了什么:)
浏览 3提问于2018-01-30得票数 14
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
