资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

My SSR Page

创作时间:

作者:

@小白创作中心

My SSR Page

引用

CSDN

https://m.blog.csdn.net/Likestarr/article/details/144445048

服务器端渲染（Server-side rendering，简称 SSR）是一种可以让网页应用更快、更具SEO友好性的技术。本文将详细介绍SSR的概念、实现方法及其与客户端渲染（CSR）的区别，帮助开发者更好地理解并应用这项技术。

什么是服务器端渲染？

服务器端渲染是指在服务器上渲染网页，而不是在浏览器中。当用户请求一个页面时，服务器负责完成渲染工作并将一个完全渲染好的页面发送到客户端，然后客户端的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 id="root">${html}</div>
        <script src="client.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

从服务器到浏览器的完全渲染页面

当我们提到SSR提供“完全渲染的页面”时，需要明确其含义。以下是详细说明：

什么是完全渲染的页面？

一个完全渲染的页面是一个HTML文档，包含用户首次加载页面时的所有内容，包括：

完整的DOM结构
所有文本内容
图片占位符和其他媒体元素
初始样式

下面是一个基本示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* 初始样式 */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- 完整的导航内容 --></nav>
    </header>
    <main>
      <article>
        <h2>文章标题</h2>
        <p>这是文章的完整内容...</p>
      </article>
    </main>
    <footer><!-- 完整的页脚内容 --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

CSR的对比

相比之下，客户端渲染（CSR）的初始HTML可能如下：

<!DOCTYPE html>
<html>
  <head>
    <title>My CSR Page</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

在CSR中，页面内容完全依赖JavaScript来填充。

完全渲染HTML的优势

更快的初始渲染：浏览器可以立即开始渲染内容。
更好的SEO：搜索引擎可以直接读取所有内容，而无需执行JavaScript。
改进的可访问性：屏幕阅读器和其他辅助技术可以即时访问内容。
更强的韧性：即使JavaScript加载失败，基本内容仍然可用。

水合过程

在发送完全渲染的HTML之后，SSR应用通常会经历一个称为“水合”（hydration）的过程：

服务器发送完全渲染的HTML。
浏览器立即显示HTML。
JavaScript加载并“水合”页面，添加交互功能。

以下是一个简化的React水合示例：

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加载后为页面添加交互性。
优点：
初始页面加载速度更快。
更适合搜索引擎优化（SEO）。
在性能较弱的设备上表现良好。
缺点：
配置较为复杂。
可能需要更多服务器资源。

简单的对比图

CSR：渲染工作主要在浏览器完成。
SSR：渲染工作主要在服务器完成。

选择CSR或SSR取决于项目的具体需求，需要平衡初始加载时间、SEO需求和服务器资源等因素。

SSR与搜索引擎：天作之合

更快的索引速度

搜索引擎爬虫希望立即获取内容。SSR在请求到达时生成完整页面，无需等待JavaScript加载和渲染，大幅提升内容的可见性。

内容一致性

SSR确保搜索引擎看到的内容与用户看到的一致，而CSR中动态加载的内容可能会被爬虫忽略。

提升加载速度

搜索引擎偏爱快速加载的网站。SSR减少了初始加载时间，有助于提高排名。

// 搜索引擎排名伪代码
function calculateRanking(site) {
  let score = site.relevance;
  if (site.loadTime < FAST_THRESHOLD) {
    score += SPEED_BONUS;
  }
  return score;
}

移动优先索引

随着Google的移动优先索引策略，SSR在移动端缓慢连接中的性能优势显得尤为重要。

社交媒体预览

虽然不是搜索引擎的直接功能，SSR在生成准确社交媒体预览时表现出色，这能间接提高参与度和反向链接，从而提升SEO。

<!-- SSR可以轻松添加准确的meta标签 -->
<meta property="og:title" content="你的动态标题">
<meta property="og:description" content="你的动态描述">

尽管SSR是提升SEO的强大工具，但它并非万能良药。内容质量、相关性和用户体验在搜索引擎排名中同样至关重要。SSR的作用是确保搜索引擎高效抓取和索引内容，为网站的可见性和性能指标提供潜在优势。

如何实现服务器端渲染（SSR）

实现SSR并不一定很复杂。以下是使用Next.js实现SSR的方法，这是一款流行的React框架，让SSR变得简单易行：

使用Next.js实现SSR

设置一个Next.js项目
创建服务器端渲染的页面
让Next.js处理完整HTML的生成和客户端水合（hydration）

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

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/data')
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}

export default async function Home() {
  const data = await getData()
  return <h1>Hello {data.name}</h1>
}

示例解析

异步组件：Home是一个异步函数组件，支持服务器端数据获取。
数据获取：getData()函数用于从API获取所需数据。
直接渲染：组件直接使用获取到的数据进行渲染。

Next.js SSR过程

当有请求到来时，Next.js在服务器上运行该组件。
等待数据获取完成后，渲染组件并生成完整的HTML。
将完全渲染的HTML发送到客户端。
浏览器加载JavaScript后，页面变得交互式。

这种方法提供了SSR的所有好处，无需手动设置服务器或管理渲染过程。

更高级的SSR解决方案

如果不想从头实现SSR，可以选择使用一些专门处理SSR的框架。这些框架简化了复杂性，同时提供额外的功能。以下是一些主流选项：

React

Next.js：最流行的React框架，内置SSR支持。
Remix：一个全栈Web框架，基于React Router构建。
Gatsby：主要是静态网站生成器，但也支持SSR。

Vue

Nuxt.js：Vue应用的首选框架，支持SSR。

Angular

Angular Universal：Angular的官方SSR解决方案。

Svelte

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

框架无关的JavaScript

Astro：允许使用多种框架，并支持SSR。
Qwik：新兴框架，针对性能优化，内置SSR支持。

PHP

Laravel：通过Inertia.js或Livewire组件实现SSR。

Ruby

Ruby on Rails：通过Stimulus Reflex或Hotwire实现SSR。

Python

Django：可使用Django-Unicorn或HTMX库实现SSR。
Flask：配合扩展（如Flask-SSE）也可以实现SSR。

不同框架提供了各自的SSR实现，通常还附带静态站点生成（SSG）、API路由等功能。选择哪种框架取决于：

你的编程语言偏好
使用的技术生态系统
项目具体需求

通过这些工具，你可以快速构建高性能、SEO友好的应用程序，而无需深陷SSR的复杂细节中。

部署与缓存

在部署SSR应用时，需要注意以下步骤：

部署流程

构建客户端和服务器端的代码包：

分别生成前端和后端的独立代码包。

运行SSR服务器：

将服务器作为后台进程运行。

使用进程管理工具：

使用如PM2或Supervisor等工具来确保服务器持续运行。

缓存

对服务器渲染的页面进行缓存可以显著降低服务器负载。
通过智能缓存策略加速页面加载，减轻后端压力。

使用Builder.io进行SSR

Builder.io提供对服务器端渲染（SSR）和静态站点生成（SSG）的支持，兼容所有组件和框架。这种开箱即用的功能让你无需额外设置即可享受SSR和SSG的优势。

核心特点

框架无关：支持多种框架，兼容SSR和SSG。
自动优化：提供性能优化，包括代码拆分与非屏幕组件的延迟加载。
动态渲染：可基于用户属性或A/B测试渲染不同内容，同时保持SEO优势。
轻松集成：提供SDK和文档，便于在现有项目中无缝集成。

实现示例

以下是一个使用Builder.io和Next.js的示例，展示如何在服务器端获取并渲染内容：

import { builder, BuilderComponent } from '@builder.io/react'

builder.init('YOUR_API_KEY')

export async function getStaticProps({ params }) {
  const page = await builder
    .get('page', {
      userAttributes: {
        urlPath: '/' + (params?.page?.join('/') || '')
      }
    })
    .toPromise()

  return {
    props: {
      page: page || null,
    },
    revalidate: 5, // 每5秒重新验证缓存
  }
}

export default function Page({ page }) {
  return (
    <BuilderComponent
      model="page"
      content={page}
    />
  )
}