前端渲染技术的轮回之旅

SSR（服务端渲染）技术主要解决了前端应用的 SEO 和首屏加载性能问题。但是当都在讨论选用什么 SSR 技术栈的时候，有没有想过当前的技术框架（vue / react）为什么会出现这两个问题？

作为一名现代前端开发者，你可能遇到过这样的困境：用「React/Vue」构建了一个功能丰富、交互流畅的应用，却在搜索引擎中几乎搜索不到。 SEO 变成了一个老生常谈的话题。之后你可能就会听到说：用SSR吧，他会解决SEO问题，还能提升首屏加载速度。

SSR 的工作模式

SSR 将渲染的工作从浏览器部分地转移到了服务器

浏览器请求一个 URL。
服务器收到请求后，在服务端运行 React/Vue 代码，调用组件，并获取所需数据。
服务器将填充好数据的组件渲染成一个完整的 HTML 字符串。
将这个直接包含最终内容的 HTML 返回给浏览器。
浏览器立即就能展示这个完整的页面，相关的 JS 文件也会在后台加载。
JS 加载完成后，会“接管”这个已经渲染好的静态页面，使其变成一个正常的SPA。这个过程也叫 “水合”。

相比于传统的客户端渲染（CSR），SSR 的最大优势在于：

极佳的首屏加载性能。用户无需等待 JS 下载和执行就能立刻看到内容，极大地减少了首屏加载时间，提升了用户体验。
卓越的搜索引擎优化。搜索引擎爬虫拿到的是已经完全渲染好的 HTML 页面，可以轻松抓取和索引内容，对内容型网站（如博客、新闻站、电商商品页）至关重要。

SSR 技术为什么能弥补SEO的缺陷呢

简单来说，SSR能够让搜索引擎看到完整的HTML内容

CSR 应用的html大概如下：

<!-- 服务器返回的初始 HTML -->

<!DOCTYPE html>
<html>
<head>
    <title>我的应用</title>
</head>
<body>
    <div id="root"></div> <!-- 这里是空的！ -->
    <script src="app.js"></script> <!-- 需要下载并执行这个 -->
</body>
</html>

当搜索引擎拿到这个 HTML 时，<div id="root"> 里面是空的。
要等待 JS 下载、执行、调用 API 获取数据，然后才能渲染内容。
但是这个下载的过程可能很慢，甚至搜索引擎爬虫根本不执行 JS。

最终导致的结果是，搜索引擎看到的页面几乎是空白的，无法抓取任何有价值的内容，从而严重影响SEO表现。

SSR 则不同：

<!-- SSR 服务器返回的 HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>淘宝闪购 - 冰美式特价2.9元</title>
    <meta name="description" content="冰美式咖啡限时特价，速来抢购！">
    <meta property="og:title" content="闪购-冰美式 特价促销">
    <meta property="og:description" content="限时优惠，立即购买">
</head>
<body>
    <div id="root">
        <header>...</header>
        <div class="product-page">
            <h1> 某幸 - 冰美式 </h1>
            <p>价格：¥2.9</p>
            <img src="1.jpg" alt="冰美式图片">
            <div class="reviews">
                <h2>用户评价</h2>
                <div class="review">超级性价比</div>
                <div class="review">打工人必备</div>
            </div>
        </div>
        <footer>...</footer>
    </div>
    <script src="app.js"></script>
</body>
</html>

搜索引擎就能看到完整的页面内容
无需等待 JS 执行，直接抓取有价值的信息
元标签和 Open Graph 标签也都已经就绪，有助于SEO和社交分享

SSR 弥补 SEO 缺陷的根本原因在于：它将内容的渲染时机从「客户端运行时」提前到了「服务器请求时」，让搜索引擎爬虫无需依赖 JavaScript 执行就能获取完整的页面内容。这解决了 CSR 应用的核心痛点——内容对爬虫的“可见性”和“可访问性”问题。

但是等等? 🫷

早在 React / Vue 出现之前，Ruby On Rails 这种古早的web 框架就已经是服务端渲染的模式了。

顺便说一句我觉得 Rails 是最夯的🙈。 Rails 的视图模板（ERB）直接在服务器端生成完整的 HTML 页面，搜索引擎爬虫可以直接抓取到内容，没有 SEO 问题。

那么问题来了，为什么我们要从服务端渲染（SSR）转向客户端渲染（CSR），然后又要花费大量精力和资源重新回到 SSR 呢？

技术是螺旋式上升的轮回

古早的web 框架虽然在 SEO 方面表现良好，但在开发体验和前端交互性方面存在诸多限制：

面对复杂交互时，传统的服务端渲染模式显得笨拙且低效。
每次用户交互都需要向服务器发送请求，导致页面频繁刷新，用户体验不佳。

如今的SSR框架，试图去结合两者的有点，保留服务端渲染的SEO优势，又引入了现代前端框架的组件化和交互性。

技术进步不是直线前进，而是在解决新问题的过程中，不断重新发现和升华旧有智慧的精华。

完。