正文

服務(wù)器端渲染試圖在提供網(wǎng)站之前將你的網(wǎng)頁(yè)盡可能多地轉(zhuǎn)換為靜態(tài)HTML。這意味著像調(diào)用API這樣的事情，不是在你瀏覽頁(yè)面時(shí)發(fā)生在客戶(hù)端，而是在服務(wù)器上，在頁(yè)面被提供之前發(fā)生。

在Next.js中，任何同時(shí)導(dǎo)出getServerSideProps函數(shù)的頁(yè)面都會(huì)在對(duì)該頁(yè)面提出請(qǐng)求時(shí)調(diào)用該函數(shù)。然后你可以在該函數(shù)中返回道具，然后將其傳遞給頁(yè)面。

為什么使用SSR？

SSR讓你提供靜態(tài)的HTML，而不是在客戶(hù)端使用JavaScript來(lái)創(chuàng)建你的頁(yè)面。這樣做的好處是：

• 你的頁(yè)面會(huì)加載得更快，因?yàn)榘拇笮「?，而且你已?jīng)獲取了你需要的任何數(shù)據(jù)。這對(duì)連接速度較慢的人來(lái)說(shuō)特別有幫助。
• 它使谷歌等搜索引擎更容易對(duì)你的網(wǎng)站進(jìn)行索引和抓取，因?yàn)樗皇庆o態(tài)HTML。
• 你可以在你的應(yīng)用程序中使用服務(wù)器端的代碼，因?yàn)檫@些代碼不會(huì)在客戶(hù)端。

getServerSideProps

這里有一個(gè)例子，它使用隨機(jī)事實(shí)API，在請(qǐng)求時(shí)檢索一個(gè)隨機(jī)事實(shí)。為了好玩，讓我們也使用查詢(xún)字符串參數(shù)來(lái)控制我們獲取的事實(shí)數(shù)量。我還加入了對(duì)os模塊的使用，它從我的電腦上獲取了我的用戶(hù)名。這只有在代碼在服務(wù)器上運(yùn)行時(shí)才能實(shí)現(xiàn)。

下面是一個(gè)使用axios的簡(jiǎn)單的取值函數(shù)。你可以忽略其中的內(nèi)容，重要的是我們得到的只是一個(gè)包含我們的事實(shí)的簡(jiǎn)單JSON對(duì)象。如果你想了解更多關(guān)于axios的信息，請(qǐng)查看我們的這篇文章：

function fetchFact() {
    //Just a simple get request which gets back a fact in a JSON object
    return axios
        .get('https://uselessfacts.jsph.pl//random.json?language=en')
        .then((res) => {
            return res.data;
        });
}

然后，我們有了我們的頁(yè)面組件。這只是顯示我們的道具，用TailwindCSS做了一點(diǎn)花哨的造型：

export default function SSRExample({ name, facts }) {
    console.log('Hi from the client!');
    return (
        <div className="flex h-screen w-screen flex-col items-center justify-center bg-white text-3xl text-white">
            <p className="mb-10 rounded bg-neutral-800 p-10">
                Heres some fun facts from {name}
            </p>
            <ul className="flex max-w-2xl flex-col gap-5 rounded bg-neutral-800 p-10 shadow">
                {facts.map(({ id, text }) => (
                    <li key={id}>{text}</li>
                ))}
            </ul>
        </div>
    );
}

這里是我們的getServerSideProps，用來(lái)獲取數(shù)據(jù)：

export async function getServerSideProps({ query }) {
    const { count } = query;
    const promises = [...new Array(Number(count))].map(() => fetchFact());
    const facts = await Promise.all(promises);
    const name = os.userInfo().username;
    //console.log(facts);
    console.log('Hi from the server!');
    console.log('Count:', count);
    console.log('Username:', name);
    console.log('Facts:', facts);
    return {
        props: {
            name,
            facts,
        },
    };
}

這就是它的模樣!

如果我們檢查我們的控制臺(tái)，getServerSideProps只在服務(wù)器上運(yùn)行，所以我們看到了服務(wù)器上的日志，而不是我們組件中的日志。在客戶(hù)端，我們得到了相反的結(jié)果，代碼被剝離出來(lái)，我們只看到我們組件的日志。

開(kāi)發(fā)服務(wù)器控制臺(tái)

Chrome開(kāi)發(fā)工具控制臺(tái)

希望這是對(duì)Next.js中SSR的快速介紹。Next.js還支持另一種預(yù)渲染，即使用靜態(tài)網(wǎng)站生成，你可以在這里查看更多相關(guān)信息，更多關(guān)于Next.js getServerSideProps的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！