有没有一种方法可以让我们获得类似于在 上获取数据时的加载状态client-side？
我想要加载状态的原因是要有一个类似加载骨架的东西，例如react-loading-skeleton
在客户端我们可以这样做：
import useSWR from 'swr'
const fetcher = (url) => fetch(url).then((res) => res.json())
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
但对于 SSR (getServerSideProps) 我无法弄清楚这是否可行，例如我们可以有加载状态吗？
function AllPostsPage(props) {
const router = useRouter();
const { posts } = props;
function findPostsHandler(year, month) {
const fullPath = `/posts/${year}/${month}`;
router.push(fullPath);
}
if (!data) return <div>loading...</div>; // Would not work with …我正在尝试从我的应用程序中清除未使用的样式。但当清除时，它仍然会删除使用过的类，并且该站点看起来已损坏。
我正在使用以下软件包：
"dependencies": {
"@fullhuman/postcss-purgecss": "^4.0.3",
"autoprefixer": "^10.3.4",
"bootstrap": "^5.1.1",
"next": "^11.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"react": "17.0.2",
"react-bootstrap": "^1.6.3",
"react-dom": "17.0.2",
"sass": "^1.40.1"
}
在该文件夹中，我也./styles有一个layout.scss导入位置。@import "../node_modules/bootstrap/scss/bootstrap";然后我import "../styles/layout.scss";导入_app.js
我创建了一个postcss.config.js具有以下内容的：
module.exports = {
plugins: [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
features: {
"custom-properties": false,
},
},
],
[
"@fullhuman/postcss-purgecss",
{
content: [
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
"./node_modules/react-bootstrap/**/*.js",
],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ["html", …我正在尝试 Next.js 并构建一个小应用程序，该应用程序从安装了 GraphQL 的无头 WordPress 应用程序中获取帖子。然后我使用 Apollo/Client 来获取 GraphQL 内容：
apollo-client.js
import { ApolloClient, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT,
cache: new InMemoryCache(),
});
export default client;
在索引中，我抓住了帖子：
索引.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { gql } from "@apollo/client";
import Link from "next/link";
import client from "../apollo-client";
function Home(props) {
const { posts } = props;
return (
<div className={styles.container}>
<Head>
<title>Wordpress blog posts</title>
<meta
name="description"
content="Wordpress blog posts with …我有一个用于启用暗模式的切换开关。
<div class="one-quarter d-flex justify-content-center" id="switch">
<input type="checkbox" class="checkbox" id="chk" />
<label class="switch-label" for="chk">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
通过一些 javascript，我可以为元素进行切换
const chk = document.getElementById('chk');
chk.addEventListener('change', () => {
});
然后将所有深色样式放入：
@media (prefers-color-scheme: dark) {
}
如何使开关起作用以启用首选颜色方案：深色