useSWR與getServerSideProps和GraphQL在禁用JavaScript時回傳空渲染

目前，我正在嘗試使用 Next.js 創建一個頁面，該頁面具有指向pages/api依賴項的功能并從中獲取資料。graphqlgraphql-yogamongoose http://localhost:3000/api/graphql

我的目標是制作一個具有組合功能的 SSR 頁面，getServerSideProps()并swr讓資料獲取器從 GraphQL URL 獲取資料。

我成功地做到了，但問題是當我禁用 JavaScript（在 Chrome 中）然后重繪 頁面時，資料和 CSS 沒有按預期呈現。

之前（啟用Javascript）

之后（禁用Javascript）

這是我的源代碼：

pages/api/graphql.js：

import { createServer } from '@graphql-yoga/node'
import resolvers from 'models/graphql/resolvers'
import typeDefs from 'models/graphql/typeDefs'
import dbConnect from '../../dbConnect'

dbConnect()
const server = createServer({
    schema: {
        typeDefs,
        resolvers,
    },
    endpoint: '/api/graphql',
})

export default server

dbConnect.js

const mongoose = require('mongoose')

const MongoDb = process.env.MONGODB_URI

const connectDb = async () => {
    try {
        await mongoose.connect(MongoDb, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        })
        console.log('db success connect')
    } catch (err) {
        console.log('error connecting to database')
        console.log(err)
        process.exit(1)
    }
}

export default connectDb

index.js

import Home from "components/home";
import useSWR, { SWRConfig } from "swr";
import booksQuery from 'models/graphql/queries/books'

const graphqlUrl = "http://localhost:3000/api/graphql";

const fetcher = (query) =>
    fetch(graphqlUrl, {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
        },
        body: JSON.stringify({ query }),
    })
        .then((res) => res.json())
        .then((json) => json.data)


export async function getServerSideProps() {
    const repoInfo = await fetcher(booksQuery);
    return {
        props: {
            fallback: {
                [graphqlUrl]: repoInfo
            }
        }
    };
}

function Repo() {
    const { data, error } = useSWR(booksQuery, fetcher);
    if (error) return "An error has occurred.";
    if (!data) return "Loading...";
    const { books} = data
    return <Home data={books} />

}

export default function Index({ fallback }) {
    return (
        <SWRConfig value={{fallback}}>
            <Repo />
        </SWRConfig>
    )
}

這是怎么發生的？使渲染與啟用 JavaScript 相同的解決方案是什么？

uj5u.com熱心網友回復：

呼叫中的鍵useSWR需要與中使用的備用鍵匹配getServerSideProps。

在您的情況下，這意味著您應該將該booksQuery值用作鍵而不是graphqlUrl，因此它在兩種情況下都匹配。

export async function getServerSideProps() {
    const repoInfo = await fetcher(booksQuery);
    return {
        props: {
            fallback: {
                [booksQuery]: repoInfo
            }
        }
    };
}

const { data, error } = useSWR(booksQuery, fetcher);
//                             ^ Same key value as `fallback`. `data` will be populated correctly during SSR.

uj5u.com熱心網友回復：

當瀏覽器中的 javascript 被禁用時，從服務器加載的內容只能作業 (SSR)。從客戶端繪制的內容（動態 DOM CSS）將不起作用。

為了更好地處理，您可以使用 noscript 向用戶顯示訊息。noscript 將在禁用 javascript 時運行。

<noscript>
    <img src="no_js.gif" alt="useSWR 與 getServerSideProps 和 GraphQL 在禁用 JavaScript 時回傳空渲染" />
</noscript>

標籤：猫鼬 下一个.js 图形 swr

上一篇：NodeJSmongoose在開頭插入資料

下一篇：我想將JsonArray型別的請求正文作為單個檔案添加到我的mongoose資料庫中