伺服器端渲染（SSR） 是一種在伺服器而不是客戶端上渲染 React 應用程式的技術。伺服器為應用程式產生初始 HTML 並將其發送到客戶端，在客戶端可以將其合併為功能齊全的 React 應用程式。 SSR 透過更快地向用戶提供完全渲染的內容來提高效能和搜尋引擎優化 (SEO)。
改良的搜尋引擎最佳化
更快的首次繪製
在慢速設備上獲得更好的性能
使用Next.js等框架，可以有效率地實現SSR。
// pages/index.js (Next.js)
export default function Home({ data }) {
return (
<div>
<h1>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 } };
}
getServerSideProps
補水
您也可以使用 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中文網其他相關文章！
