掌握 Next.js 中的 SSR：如何提升 SEO 與使用者體驗

SSR（伺服器端渲染）是 Next.js 中產生頁面的另一種方法。在本文中，我想解釋什麼是 SSR、它是如何運作的，以及如何在 Next.js 專案的 Page Router 和 App Router 中實現它。

什麼是SSR？

SSR是一種在使用者發出請求後產生靜態頁面（或預渲染頁面）的方法。這意味著每次請求都會產生一個靜態頁面。此方法對於需要經常更新的頁面很有用，因為它可以確保資料始終是最新的

SSR 如何運作？

當您在 Next.js 中使用 SSR 時，每次使用者要求實作了 SSR 的頁面時，都會在發出請求後產生該頁面。這意味著使用者必須等待 Next.js 為每個請求再次產生並捆綁靜態內容。靜態頁面準備好後，使用者就可以看到要求的頁面。

需要注意的是，SSR 僅在伺服器上運行，並且它會為每個請求產生一個靜態頁面，因此它不會在專案的建置過程中運行。

如何在 App Router 中實作 SSR

要在 App Router 中實作 SSR，您不需要編寫特殊函數或設定特定配置，因為它在您的伺服器元件中預設為啟用。

例如，如果您有一個靜態頁面並從 API 取得數據，則該頁面將預設使用 SSR。需要注意的是，當使用 SSR 時，頁面不會在建置時捆綁或預先渲染。如果您在專案中使用動態頁面，如果您不取得任何數據，它將預設使用 SSG。但是當您從 API 取得時，它將切換到 SSR，並且在建置期間不會捆綁任何靜態頁面。

這是在靜態路由中實作 SSR 的範例：

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    <div>
      <h1 id="About-Us">About Us</h1>
      <p>{data}</p>
    </div>
  );
};

export default AboutPage;

如何在頁面路由器中實現 SSR

要在頁面路由器中實作 SSR，您需要在檔案中建立 getServerSideProps 函數。該函數將在每次用戶請求後調用。如果您使用動態路由，例如 [id] 文件，則還需要在文件中使用 getServerSideProps。此函數採用一個參數，通常稱為 context，您可以從中檢索 id，即動態頁面的值。伺服器在每次用戶請求時都會呼叫此函數。

這是在 tsx 檔案中實現的範例：

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC<aboutprops> = ({ data }) => {
  return (
    <div>
      <h1 id="About-Us">About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

</aboutprops>

這是在 jsx 檔案中實作的範例：

const AboutPage = ({ data }) => {
  return (
    <div>
      <h1 id="About-Us">About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

結論

SSR 是捆綁或建立靜態頁面的有用方法，但它不會在建置期間發生。當您需要根據每個使用者要求更新頁面以便使用者可以看到最新資料時，您可以使用 SSR。但是，需要注意的是，它可能需要更多時間，並且不如 SSG（靜態網站產生）或 ISR（增量靜態重新生成）等其他方法那麼快，因為它會為每個使用者請求產生一個靜態頁面。

希望您喜歡這篇文章！如果您有任何疑問，請隨時問我。如果您想了解 ISR 和 SSG，可以在此處查看我關於 ISR 和 SSG 的文章。如果你想了解更多，可以關注我的網站。

感謝您的閱讀！暫時再見！

以上是掌握 Next.js 中的 SSR：如何提升 SEO 與使用者體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！