getServerSideProps() 沒有被呼叫 nextJS 13

Question

試圖熟悉 nextJS 13。 我遇到的是 getServerSideProps 函數沒有預先渲染頁面道具。這是我第一次嘗試，所以我不知道我是否做錯了。

這裡是/app/login/page.js

#

import Content from "@/components/content";
import LoginForm from "@/components/loginForm";
import Title from "@/components/title";

function Login({ message }) {
    return (
        <Content>
            <div className="ml-2 my-2">
                {message || "NextJS is ok."}
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

export default Login;

export async function getServerSideProps() {
    console.log("running getServerSideProps function..");
    return {
        props: { message: "NextJS is awesome!" },
    };
}

我在這裡想要實現的關鍵是在顯示登入頁面之前使用 axios 請求檢查伺服器的會話金鑰。如果使用者已登錄，則應將使用者重新導向至主頁。如果我能夠使此功能正常工作，這是未來的程式碼：

export async function getServerSideProps() {
    console.log("Im running getServerSideProps funct ");
    let isLoggedIn = false;
    try {
        const response = await api.get("/users/session-check", {
            withCredentials: true,
        });
        if (response.status === 200) isLoggedIn = true;
    } catch (err) {
        console.log(err.message);
    }
    if (isLoggedIn) {
        return {
            redirect: {
                destination: "/",
                permanent: false,
            },
        };
    }
    return {
        props: {},
    };
}

我嘗試使用 npm run dev 仍然得到相同的結果...

Answer 1

您似乎正在嘗試使用 getServerSideProps 在顯示頁面之前執行伺服器端渲染和驗證檢查。從您的程式碼來看，您似乎走在正確的軌道上。

但是，我注意到您沒有將從 getServerSideProps 傳回的 props 傳遞給您的 Login 元件。為了將伺服器端屬性傳遞給元件，您需要修改 Login 函數以接受 message 屬性，如下所示：

function Login({ message }) {
    return (
        <Content>
            <div className="ml-2 my-2">
                {message || "NextJS is ok."}
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

此外，由於您使用的是 getServerSideProps，您的 npm run dev 命令不會為您的頁面產生靜態 HTML 檔案。相反，頁面將根據每個請求產生。因此，如果您想測試 getServerSideProps 是否正常運作，您需要向瀏覽器中的頁面發出請求，並檢查控制台日誌以取得 console.log( )宣告。

我希望這有幫助！如果您還有任何其他問題，請告訴我。

Answer 2

因此，正如我在評論中提到的，您應該遵循此https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await -in-server-components 當您使用Next 13 和app 資料夾時。

這意味著您可以嘗試這樣的操作：

import { redirect } from 'next/navigation';
import Content from "@/components/content";
import LoginForm from "@/components/loginForm";
import Title from "@/components/title";

async function isLoggedIn() {
    try {
        const response = await api.get("/users/session-check", {
            withCredentials: true,
        });
        if (response.status === 200) return true;
    } catch (err) {
        console.log(err.message);
    }
    return false;
}

export default async function Page() {
    const isLogged = await isLoggedIn();
    if (!isLogged) redirect('/');
    return (
        <Content>
            <div className="ml-2 my-2">
                {"NextJS is ok."}
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

當然，您需要添加訊息道具。