快捷導(dǎo)航

Next.js使用getServerSideProps進(jìn)行服務(wù)器端渲染demo

更新時(shí)間：2022年12月13日 10:57:48 作者：Jovie

這篇文章主要為大家介紹了Next.js使用getServerSideProps進(jìn)行服務(wù)器端渲染demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

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

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

為什么使用SSR？

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

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

getServerSideProps

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

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

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;
        });
}

然后，我們有了我們的頁面組件。這只是顯示我們的道具，用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，用來獲取數(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,
        },
    };
}

這就是它的模樣!

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

開發(fā)服務(wù)器控制臺

Chrome開發(fā)工具控制臺

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

您可能感興趣的文章: