透過 React 伺服器端渲染提升應用程式的 SEO 和效能

React 中的伺服器端渲染 (SSR)

伺服器端渲染（SSR） 是一種在伺服器而不是客戶端上渲染 React 應用程式的技術。伺服器為應用程式產生初始 HTML 並將其發送到客戶端，在客戶端可以將其合併為功能齊全的 React 應用程式。 SSR 透過更快地向用戶提供完全渲染的內容來提高效能和搜尋引擎優化 (SEO)。

---

SSR 的工作原理

1. 請求：客戶端向伺服器發出請求。
2. 伺服器渲染：伺服器將 React 元件渲染為 HTML。
3. 回應：渲染的 HTML 被傳送到客戶端。
4. Hydration：React 接管客戶端，透過附加事件監聽器和狀態使 HTML 具有互動性。

---

伺服器端渲染的好處

1. 改良的搜尋引擎最佳化

   • 搜尋引擎可以有效地抓取預先渲染的 HTML 內容。

2. 更快的首次繪製

   • 由於 HTML 是預先渲染的，瀏覽器可以更快地顯示內容。

3. 在慢速設備上獲得更好的性能

   • 透過在伺服器上處理渲染來減少客戶端的工作量。

---

使用 React 的 SSR 範例

使用Next.js等框架，可以有效率地實現SSR。

程式碼範例

// pages/index.js (Next.js)
export default function Home({ data }) {
  return (
    <div>
      <h1 id="Server-Side-Rendered-Page">Server-Side Rendered Page</h1>
      <p>Data from server: {data}</p>
    </div>
  );
}

// Fetching data during SSR
export async function getServerSideProps() {
  const data = "This data was fetched on the server!";
  return { props: { data } };
}

守則的主要特點

1. getServerSideProps

   • 在渲染頁面之前從伺服器取得資料。
   • 傳回的 props 傳遞給 React 元件。

2. 補水

   • 發送初始 HTML 後，React 接管使頁面具有互動性。

---

在沒有 Next.js 的情況下實作 SSR

您也可以使用 Express.js 和 ReactDOMServer 實作 SSR。

程式碼範例

//server.js
從「快遞」進口快遞；
從“反應”導入反應；
從“react-dom/server”導入ReactDOMServer；
從“./App”導入應用程式；

常量應用程式 = Express();

app.get("*", (req, res) => {
  const appHTML = ReactDOMServer.renderToString(<app></app>);
  常數 html = `
    
    
      <title>React SSR</title>
      
        <div>



<h4>
  
  
  關鍵方法
</h4>

<ol>
<li>
<p><strong>ReactDOMServer.renderToString</strong> </p>

<ul>
<li>將 React 元件轉換為 HTML 字串以供伺服器渲染。
</li>
</ul>
</li>
<li>
<p><strong>Express 伺服器</strong> </p>

<ul>
<li>處理傳入請求並提供渲染的 HTML。
</li>
</ul>
</li>
</ol>


<hr>

<h3>
  
  
  比較：SSR 與 CSR（客戶端渲染）
</h3>

<div>

<tr>
<th>
<table>
<thead>
<tr>
<th><strong>Aspect</strong></th>
<th><strong>SSR</strong></th>
<th><strong>CSR</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Rendering</strong></td>
<td>On the server</td>
<td>On the client</td>
</tr>
<tr>
<td><strong>Initial Load Time</strong></td>
<td>Faster (HTML delivered pre-rendered)</td>
<td>Slower (JS and data fetched before render)</td>
</tr>
<tr>
<td><strong>SEO</strong></td>
<td>Better (search engines see full content)</td>
<td>Poorer (content rendered dynamically)</td>
</tr>
<tr>
<td><strong>Interactivity</strong></td>
<td>Requires hydration</td>
<td>Fully interactive after initial load</td>
</tr>
</tbody>
</table>方面</th>
<th>SSR</th>
<th>企業社會責任</th>
</tr>
標題>

<tr>
<td>渲染</td>
<td>在伺服器上</td>
<td>在客戶端</td>
</tr>
<tr>
<td>初始載入時間</td>
<td>更快（HTML 交付預渲染）</td>
<td>較慢（渲染前取得 JS 和資料）</td>
</tr>
<tr>
<td>搜尋引擎優化</td>
<td>更好（搜尋引擎看到完整內容）</td>
<td>較差（動態呈現的內容）</td>
</tr>
<tr>
<td>互動</td>
<td>需要補充水分</td>
<td>初始載入後完全互動</td>
</tr>

表></div>


<hr>

<h3>
  
  
  SSR 最佳實踐
</h3>

<ol>
<li>
<p><strong>快取 HTML</strong> </p>

<ul>
<li>快取伺服器渲染的頁面以縮短回應時間。
</li>
</ul>
</li>
<li>
<p><strong>最小化伺服器負載</strong> </p>

<ul>
<li>渲染期間避免大量運算，以防止伺服器瓶頸。
</li>
</ul>
</li>
<li>
<p><strong>與靜態產生結合</strong> </p>

<ul>
<li>使用 Next.js 等框架來混合 SSR 和靜態站點產生 (SSG)。
</li>
</ul>
</li>
<li>
<p><strong>處理邊緣情況</strong> </p>

<ul>
<li>測試 JavaScript 可能失敗或載入緩慢的場景。
</li>
</ul>
</li>
</ol>


<hr>

<h3>
  
  
  SSR 用例
</h3>

<ol>
<li>
<strong>以 SEO 為中心的應用程式</strong>：部落格、新聞網站或電子商務平台。
</li>
<li>
<strong>動態內容</strong>：頻繁更新的個人化儀表板或應用程式。
</li>
<li>
<strong>效能關鍵應用程式</strong>：確保在速度較慢的裝置上快速交付內容。
</li>
</ol>


<hr>

<h3>
  
  
  SSR 的挑戰
</h3>

<ol>
<li>
<p><strong>伺服器負載增加</strong> </p>

<ul>
<li>伺服器必須處理每個請求的渲染，從而增加資源使用。
</li>
</ul>
</li>
<li>
<p><strong>更長的開發時間</strong> </p>

<ul>
<li>需要仔細處理伺服器端程式碼和水合作用。
</li>
</ul>
</li>
<li>
<p><strong>狀態管理複雜度</strong> </p>

<ul>
<li>將伺服器渲染狀態與客戶端 React 狀態同步可能很棘手。
</li>
</ul>
</li>
</ol>


<hr>

<h3>
  
  
  結論
</h3>

<p>伺服器端渲染（SSR）是一種強大的技術，可以提高 React 應用程式的效能、SEO 和使用者體驗。透過 Next.js 等工具或使用 ReactDOMServer 的自訂解決方案，開發人員可以利用 SSR 建立響應靈敏、搜尋引擎友善的應用程式。  </p>


<hr>


          </div>

            
        

以上是透過 React 伺服器端渲染提升應用程式的 SEO 和效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！