通过 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中文网其他相关文章！