从服务端到客户端：渲染技术的三种进化形态

最新推荐文章于 2025-03-12 19:28:35 发布

边学边写代码侠

最新推荐文章于 2025-03-12 19:28:35 发布

阅读量899

点赞数 26

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/xyhrd333/article/details/144258414

版权

在现代前端开发中，渲染方式的选择对性能和用户体验至关重要。随着Web应用的不断发展，前端渲染技术逐渐从最初的服务器端渲染（SSR），到后来的客户端渲染（CSR），再到如今的静态生成（SSG），这些技术各有优劣，适应了不同场景的需求。在这篇文章中，我们将深入探讨这三种渲染方式，并结合Vue 2框架来阐述如何选择适合的渲染方式。

一、渲染的基础

什么是渲染？

在前端开发中，“渲染” 指的是将数据和模板转化为可视化内容的过程。通俗来说，渲染就是通过页面加载显示出最终的HTML结构，供用户浏览。在现代Web应用中，渲染通常由客户端（浏览器）和服务器共同承担，不同的渲染方式会对应用的性能、可维护性以及SEO优化产生不同的影响。

二、渲染方式的演进

1. 服务器端渲染（SSR）：最早的渲染方式

早期的Web应用大多依赖于服务器端渲染（SSR）。服务器端渲染（Server-Side Rendering，SSR）指的是所有的渲染工作都在服务器端完成。用户发起请求后，服务器根据请求的内容生成HTML，并将其发送到客户端。这种方式下，整个页面的渲染过程由服务器控制，客户端仅负责显示页面。

用实例展现一下服务器端渲染的HTML长什么样子：

假设你需要访问的域名叫： example.testsite.com.

<html>
  <head>
    <meta charset="utf-8">
    <title>Example Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <a href="http://example.testsite.com/other.html">Link</a>
  </body>
</html>

我们此时点击 Link 这个链接，弹出来下面这个页面 other.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Example Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <p>This is some more content from the other.html</p>
  </body>
</html>

可以看出来两个页面的差异就只有一行，但是渲染过程时将整个页面重新渲染，而不仅仅只是发生更改的一行，在当今越加复杂的页面来看动辄几百行的代码来看，要是每次发生少量更改都需要重新渲染整个页面显然是不符合潮流的。

从上面的页面特征来看，使用服务器端渲染的返回的页面是完整的HTML页面。

SSR 优缺点：

优点： SSR非常适合SEO优化，因为搜索引擎能够直接读取到服务器返回的完整HTML，这有利于提高页面在搜索引擎中的排名。
缺点： SSR每次用户请求页面时，服务器都需要进行页面渲染，可能会造成服务器负载过大，影响性能。而且，渲染过程耗时较长，导致页面加载速度较慢。

2. 客户端渲染（CSR）

随着Web前端技术的发展，尤其是JavaScript引擎的性能提升，客户端渲染（CSR）逐渐取代了SSR。在CSR中，浏览器可以直接通过JavaScript渲染页面内容，这减轻了服务器的负担并提高了用户的交互体验。CSR带来了更多的动态效果和无刷新页面更新，让Web应用变得更加灵活。常见的CSR框架有Vue、React和Angular。

用上面的例子，看看用客户端渲染是怎么做的

使用Vue.js开发一个简单的客户端渲染应用，页面的渲染完全依赖于客户端。

<html>
<head>
  <meta charset="utf-8">
  <title>Example Website</title>
</head>
<body>
  <div id="root">
    <app></app>
  </div>
    <!--下面两个js文件控制HTML的显示内容 -->
  <script src="https://vuejs.org"type="text/javascript"></script>
  <script src="location/of/app.js"type="text/javascript"></script>
</body>
</html>

var data = {
        title:"My Website",
        message:"This is an example of my new website"
      }
  Vue.component('app', {
    template:
    `
    <div>
    <h1>{{title}}</h1>
    <p id="moreContent">{{message}}</p>
    <a v-on:click='newContent'>Link</a>
    </div>
    `,
    data: function() {
      return data;
    },
    methods:{
      newContent: function(){
        var node = document.createElement('p');
        var textNode = document.createTextNode('This is some more content from the other.html');
        node.appendChild(textNode);
        document.getElementById('moreContent').appendChild(node);
      }
    }
  })
  new Vue({
    el: '#root',
  });

从显示效果来看能够展示和之前SSR一样的效果，不同的是，当我们点击Link链接的时候，页面不会和服务器之间又交互。此时只对Link那一行的代码做了修改，其余位置保持不变。而不是像SSR做了整个页面的重新渲染。

但是这里暴露的问题也很明显，但控制页面的所有js文件如果没有完全加载的话，整个页面是渲染不出来的，这才是导致客户端渲染弱于首屏渲染的原因。

可以看出客户端渲染的页面特征是包含有js链接的script标签

优缺点：

优点： CSR能够提供良好的用户交互体验，因为页面的所有内容都在浏览器中渲染，用户操作后可以立即响应。而且，CSR页面通常比SSR页面加载更快。
缺点：由于内容是通过JavaScript渲染的，搜索引擎无法直接抓取页面内容。尽管现在的搜索引擎能够执行JavaScript，但CSR仍然存在SEO问题，尤其是对于一些不支持JavaScript渲染的爬虫。

3. 静态生成（SSG）

概念：

然而，CSR的最大缺点在于SEO优化。由于搜索引擎爬虫通常不能执行JavaScript，导致CSR渲染的内容无法被抓取。为了弥补这一缺陷，静态生成（SSG）应运而生。静态生成（Static Site Generation，SSG）是一种通过预构建的方式，将所有页面在构建时就生成完毕的技术。与SSR不同，静态生成的页面是在构建时生成静态HTML文件并直接部署到服务器上，而不是在每个请求时进行动态渲染。

案例：在Vue.js中，结合Nuxt.js框架实现静态生成：

// 在Nuxt.js中配置静态生成
export default {
  target: 'static', // 指定静态生成模式
  buildModules: ['@nuxtjs/tailwindcss']
}

SSG结合了SSR和CSR的优点。通过在构建时生成静态页面，SSG能够提供快速的页面加载速度和SEO友好性，而无需每次都依赖服务器渲染。在静态生成模式下，页面内容通常不会经常变化，因此适合用于博客、文档、产品展示等类型的网站。

优缺点：

优点： SSG提供了非常快速的页面加载，因为所有的页面都是预先生成好的，服务器直接返回静态文件，不需要做任何动态渲染。对于SEO来说，静态页面能够直接被搜索引擎抓取，提高了SEO效果。
缺点：适用于内容不频繁更新的场景。如果页面内容更新频繁，SSG就不适用了，因为每次内容更新都需要重新构建静态文件。

三、如何选择适合的渲染方式？

1. 考虑页面内容的动态性和频繁更新的需求

CSR（客户端渲染）：适合那些需要频繁更新的动态内容或用户交互较多的应用。例如，社交媒体、在线游戏、聊天应用等，它们的内容和交互会根据用户的操作实时变化。由于CSR依赖于客户端进行渲染，因此可以更灵活地处理动态内容。
SSR（服务器端渲染）：适用于需要更好SEO支持，或者内容不经常更改但又要求快速加载的应用。例如，博客、新闻站点或营销页面。SSR确保页面在服务器端生成并发送到客户端，使得用户更快看到页面内容，同时对搜索引擎更加友好。
SSG（静态生成）：适合内容不经常变化的静态网站或应用，适合博客、文档站点和展示网站。在构建时生成所有页面的静态文件，可以实现超快的页面加载速度，特别适合需要良好SEO的站点。

2. 评估SEO和页面加载速度的需求

SEO优先：如果SEO非常重要，那么SSR和SSG是更好的选择。服务器端渲染能够让搜索引擎更好地抓取和索引页面内容，特别是在内容密集的网站中。而SSG通过提前生成静态页面，能够让页面在任何时候都对搜索引擎和用户展示完整的内容。
加载速度：在加载速度上，SSG由于生成静态文件，可以通过CDN快速分发，使得网站加载速度极快。SSR虽然能够保证内容的实时性，但每个请求都需要通过服务器处理，可能会带来一定的延迟。而CSR可能因为需要等待客户端加载和渲染JavaScript，导致首次加载时较慢。

3. 开发和维护的复杂度

开发难度：CSR通常是最简单的开发方式，因为前端框架（如Vue、React）可以直接在浏览器中处理渲染，且不依赖于服务器端的配置或特殊部署。相对而言，SSR和SSG需要在服务器端进行额外的配置与处理，开发和部署的复杂度较高。
维护：如果网站内容较为静态且较少更新，SSG的维护工作会相对简单。SSR需要定期监控服务器负载和性能，尤其是在高流量情况下。CSR则依赖于前端代码，可能会随着复杂度的增加而变得难以维护。

4. 用户体验和交互性

CSR：适合高度交互性和动态内容丰富的应用，如在线商店、社交平台、论坛等。由于CSR将大部分渲染任务交给客户端，能够提供更流畅的交互体验。
SSR和SSG：这两种方式对SEO和性能有显著的提升，但它们可能会在交互性上稍显逊色，尤其是SSR需要等待服务器渲染并返回内容，可能会造成一些延迟。SSG则适合页面内容较为固定的应用，用户交互较少。