服务器端渲染指南-js教程-PHP中文网

首页

web前端

js教程

服务器端渲染指南

Mary-Kate Olsen

Nov 25, 2024 am 06:28 AM

服务器端渲染（SSR）已经存在了一段时间，但值得进一步探索。这种技术可以使您的网络应用程序更快、更适合 SEO。

在本指南中，我们将解释 SSR、为什么您可能想要使用它，以及如何在不费吹灰之力的情况下实现它。我们将介绍基础知识，将其与客户端渲染进行比较，并讨论一些实际示例。

什么是服务器端渲染？

从根本上来说，SSR 是在服务器上而不是在浏览器中渲染网页。当用户请求页面时，服务器会完成所有繁重的工作并将完全呈现的页面发送到客户端。然后，客户端 JavaScript 接管以使其具有交互性。

服务员在厨房做准备工作，浏览者只需摆盘上菜即可。

这是一个最小的 Express.js 示例：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

登录后复制

企业社会责任的区别

相比之下，客户端渲染 (CSR) 初始 HTML 可能如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>My CSR Page</title>
  </head>
  <body>
    <div>



<p>The CSR page relies entirely on JavaScript to populate the content.</p>

<h3>
  
  
  Benefits of fully rendered HTML
</h3>

<ol>
<li>
<strong>Faster Initial Paint</strong>: The browser can start rendering content immediately.</li>
<li>
<strong>Better SEO</strong>: Search engines read all your content without executing JavaScript.</li>
<li>
<strong>Improved Accessibility</strong>: Screen readers and other assistive technologies can access content immediately.</li>
<li>
<strong>Resilience</strong>: Basic content is available even if JavaScript fails to load.</li>
</ol>

<h3>
  
  
  The hydration process
</h3>

<p>After sending the fully rendered HTML, SSR applications typically go through a process called hydration:</p>

<ol>
<li>The server sends the fully rendered HTML.</li>
<li>The browser displays this HTML immediately.</li>
<li>JavaScript loads and <em>hydrates</em> the page, adding interactivity.</li>
</ol>



<pre class="brush:php;toolbar:false">// Simplified React hydration example
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <App />);

登录后复制

此过程允许快速初始加载，同时仍然提供现代 Web 应用程序的丰富交互性。

请记住，虽然 SSR 提供了这些完全渲染的页面，但它并非没有权衡。服务器执行更多工作，您需要仔细处理服务器和客户端之间的状态。然而，对于许多应用程序来说，完全渲染页面的好处使 SSR 成为一个令人信服的选择。

CSR 和 SSR 有什么区别？

客户端渲染（CSR）和服务器端渲染（SSR）是渲染网页的两种不同方法。以下是它们主要差异的细分：

客户端渲染 (CSR)

服务器发送带有 JavaScript 包的最小 HTML 文件。
浏览器下载并运行 JavaScript。
JavaScript 创建页面内容并使其具有交互性。

优点：

初始加载后交互流畅
需要更少的服务器资源

缺点：

初始页面加载速度较慢
潜在的 SEO 挑战

服务器端渲染（SSR）

服务器创建完整的 HTML 内容。
浏览器快速接收并显示预渲染的 HTML。
然后加载 JavaScript 以使页面完全交互。

优点：

更快的初始页面加载
更有利于搜索引擎优化
在较慢的设备上运行良好

缺点：

设置可能会更复杂
可能会使用更多服务器资源

这是一个简单的视觉比较：

A Guide to Server-Side Rendering

本质上，CSR更多地在浏览器中工作，而SSR更多地在服务器上工作。它们之间的选择取决于您项目的具体需求，平衡初始加载时间、SEO 要求和服务器资源等因素。

SSR 和搜索引擎：HTTP 中的匹配

服务器端渲染会对搜索引擎如何看待您的网站产生重大影响。让我们来分解一下：

更快的索引

搜索引擎机器人很不耐烦。他们现在就想看到您的内容。借助 SSR，当机器人来敲门时，您的页面就已准备就绪，无需等待 JavaScript 加载和渲染。

A Guide to Server-Side Rendering

内容一致性

SSR 确保搜索引擎看到的内容与用户看到的内容相同。使用客户端渲染时，始终存在机器人可能会错过某些动态加载内容的风险。

缩短加载时间

搜索引擎喜欢快速的网站。 SSR 可以显着缩短初始加载时间，这可以让您在排名中稍占优势。

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

登录后复制

移动优先索引

借助 Google 的移动优先索引，SSR 在较慢的移动连接上的性能优势变得更加重要。

社交媒体预览

虽然严格来说不是搜索引擎功能，但当您的内容在社交平台上共享时，SSR 可以更轻松地生成准确的预览。这可以通过增加参与度和反向链接来间接提高您的搜索引擎优化 (SEO)。

<!DOCTYPE html>
<html>
  <head>
    <title>My CSR Page</title>
  </head>
  <body>
    <div>



<p>The CSR page relies entirely on JavaScript to populate the content.</p>

<h3>
  
  
  Benefits of fully rendered HTML
</h3>

<ol>
<li>
<strong>Faster Initial Paint</strong>: The browser can start rendering content immediately.</li>
<li>
<strong>Better SEO</strong>: Search engines read all your content without executing JavaScript.</li>
<li>
<strong>Improved Accessibility</strong>: Screen readers and other assistive technologies can access content immediately.</li>
<li>
<strong>Resilience</strong>: Basic content is available even if JavaScript fails to load.</li>
</ol>

<h3>
  
  
  The hydration process
</h3>

<p>After sending the fully rendered HTML, SSR applications typically go through a process called hydration:</p>

<ol>
<li>The server sends the fully rendered HTML.</li>
<li>The browser displays this HTML immediately.</li>
<li>JavaScript loads and <em>hydrates</em> the page, adding interactivity.</li>
</ol>



<pre class="brush:php;toolbar:false">// Simplified React hydration example
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <App />);

登录后复制

SSR 是 SEO 的强大工具，但它不是唯一的因素。内容质量、相关性和整体用户体验对于搜索引擎排名至关重要。 SSR 只是确保搜索引擎可以有效地抓取和索引您的内容，从而有可能为您提供可见性和性能指标方面的优势。

如何实际进行SSR

实施 SSR 并不一定很复杂。让我们介绍一下如何使用 Next.js 来实现这一点，Next.js 是一个流行的 React 框架，可以让 SSR 变得简单：

设置 Next.js 项目。
创建服务器端渲染页面。
让 Next.js 处理提供完全渲染的 HTML 和客户端水合作用。

这是一个使用 App Router 的简单 Next.js 示例：

// Pseudo-code for search engine ranking
function calculateRanking(site) {
  let score = site.relevance;
  if (site.loadTime < FAST_THRESHOLD) {
    score += SPEED_BONUS;
  }
  return score;
}

登录后复制

在此示例中：

Home 组件是一个异步函数，允许服务器端数据获取。
getData() 获取我们需要的数据。
组件直接渲染数据。

Next.js 自动处理 SSR 流程：

当请求到来时，Next.js 在服务器上运行此组件。
它等待获取数据。
它使用获取的数据渲染组件。
完全渲染的 HTML 被发送到客户端。
一旦 JavaScript 在浏览器中加载，页面就会变成交互式的。

这种方法为您提供了 SSR 的优势，而无需手动设置服务器或自己管理渲染过程。

更高级别的SSR解决方案

如果您不想重新发明轮子，有几个框架可以为您处理 SSR 复杂性。以下是不同生态系统中流行选项的概述：

A Guide to Server-Side Rendering

反应

Next.js：最流行的 React 框架，内置 SSR 支持。
Remix：利用 React Router 的全栈 Web 框架。
Gatsby：主要是静态站点生成器，但也支持 SSR。

维埃

Nuxt.js：具有 SSR 功能的 Vue 应用程序的首选框架。

角

Angular Universal：Angular 应用程序的官方 SSR 解决方案。

斯韦尔特

SvelteKit：Svelte 的官方应用程序框架，支持 SSR。

JavaScript（与框架无关）

Astro：允许您使用多个框架并支持SSR。
Qwik：一个旨在实现最佳性能的新框架，具有内置 SSR 支持。

PHP

Laravel：通过 Inertia.js 或其自己的 Livewire 组件提供 SSR 功能。

红宝石

Ruby on Rails：通过 Stimulus Reflex 或 Hotwire 等工具支持 SSR。

Python

Django：可以使用 Django-Unicorn 或 HTMX 等库实现 SSR。
Flask：可以配置为 SSR，通常与 Flask-SSE 等扩展一起使用。

每个框架都提供了自己的 SSR 方法，通常还具有静态站点生成、API 路由等附加功能。选择取决于您的首选语言、生态系统和特定项目要求。

部署和缓存

部署 SSR 应用程序时：

构建客户端和服务器端包。
将 SSR 服务器作为后台进程运行。
使用 PM2 或 Supervisor 等进程监视器来保持服务器运行。

这是基本的部署流程：

A Guide to Server-Side Rendering

不要忘记缓存！缓存服务器渲染的页面可以显着减少服务器负载。

使用 Builder.io 进行 SSR

Builder.io 为所有组件和框架的服务器端渲染 (SSR) 和静态站点生成 (SSG) 提供支持。这种开箱即用的功能使您无需额外设置即可利用 SSR 和 SSG 的优势。

A Guide to Server-Side Rendering

主要特点

与框架无关：Builder.io 可与支持 SSR 和 SSG 的各种框架配合使用。
自动优化：构建器优化内容的性能，包括代码分割和屏幕外组件的延迟加载。
动态渲染：您可以根据用户属性或A/B测试渲染不同的内容，同时保持SEO优势。
轻松集成：Builder 提供 SDK 和文档来无缝集成您现有的项目。

实施示例

以下是如何使用 Builder 和 Next.js 在服务器端获取和渲染内容的基本示例：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

登录后复制