跳到主要内容

前端都哪些渲染方式

当然，我会为每种页面渲染方式提供更详细的介绍：

1. CSR (Client-Side Rendering - 客户端渲染)​

具体介绍：

  • 客户端渲染是一种前端页面渲染方式，其中页面的初始加载时只包括基本的HTML结构，不包含内容数据。
  • 页面的数据获取和渲染是通过JavaScript在客户端（浏览器）上进行的，通常使用AJAX、Fetch API或其他数据获取技术从服务器请求数据。
  • 一旦数据到达客户端，JavaScript负责将数据渲染到页面上，以更新或替换现有内容。
  • 这种方式适用于需要动态交互和频繁变化的数据的应用，例如社交媒体应用、在线购物网站和协作工具。
  • 常用的前端框架，如React、Vue.js和Angular，支持CSR。

优点：

  • 富交互性：允许创建具有高度交互性的应用程序。
  • 前后端分离：前端和后端可以相对独立地开发和维护。
  • 快速导航：一旦初始页面加载完成，导航速度非常快，因为只需获取和渲染数据。

缺点：

  • 首次加载较慢：首次加载需要下载JavaScript代码和数据，因此速度相对较慢。
  • 不友好的SEO：搜索引擎难以抓取通过JavaScript生成的内容，对SEO不友好。
  • 复杂性：复杂的SPA可能需要复杂的路由和状态管理，增加了开发和维护的难度。

适用场景：

  • 需要富交互性和动态数据的应用，如社交媒体平台、在线游戏、协作工具。
  • 对SEO不是关键因素的内部应用或工具。
  • 开发团队拥有前端开发经验，有能力管理复杂的客户端逻辑。

2. SSR (Server-Side Rendering - 服务器端渲染)​

具体介绍：

  • 服务器端渲染是一种前端页面渲染方式，其中页面的初始加载时在服务器上完成渲染，然后将渲染后的HTML发送到客户端。
  • 服务器使用服务器端框架（如Node.js、Ruby on Rails、Django等）动态生成包含页面内容的HTML，包括数据。
  • 渲染后的HTML可以包含页面的初始状态，从而加速首次加载速度。
  • 这种方式对SEO非常友好，因为搜索引擎可以轻松抓取渲染后的内容。
  • 前端框架如Next.js、Nuxt.js支持SSR。

优点：

  • SEO友好：搜索引擎可以抓取服务器渲染的内容，有利于SEO。
  • 快速首次加载：用户在首次加载页面时获得更快的渲染速度，因为页面在服务器上生成。
  • 性能稳定：客户端性能和设备性能对用户体验影响较小。
  • 渐进增强：可以在服务器上提供基本内容，然后使用CSR增加交互性。

缺点：

  • 服务器负载：需要服务器动态渲染页面，可能会增加服务器负载。
  • 复杂性：SSR应用程序可能需要处理服务器和客户端的逻辑，增加了开发和维护的复杂性。

适用场景：

  • 需要SEO优化的内容网站、博客、新闻网站等。
  • 需要快速首次加载的应用，如电子商务网站、社交媒体登录页。
  • 需要渐进增强的应用，以提供基本内容并在客户端增加交互性。

3. SSG (Static Site Generation - 静态站点生成)​

具体介绍：

  • 静态站点生成是一种前端页面渲染方式，其中页面在构建过程中提前生成为静态HTML文件。
  • 生成的静态文件包含页面内容和数据，可以被多个客户端请求。
  • 这种方式通常适用于内容不频繁变化的网站，如博客、企业官方网站和文档网站。
  • 常见的静态站点生成工具包括Gatsby和Next.js。

优点：

  • 极快的加载速度：页面在构建时生成为静态HTML文件，加载速度非常快。
  • 低服务器负载：无需动态渲染，服务器负载较低，适用于大流量站点。
  • 高安全性：由于没有动态服务器代码，安全性较高。
  • 内容缓存和CDN支持：静态文件可以缓存在CDN中，提高全球访问速度。

缺点：

  • 不适用于动态内容：静态站点生成适用于内容不频繁变化的网站，对于动态数据不太适用。
  • 构建时间：构建过程可能需要一些时间，特别是对于大型网站。

适用场景：

  • 内容不频繁变化的博客、企业官方网站、文档网站等。
  • 对性能和安全性要求高的静态内容网站。
  • 需要全球分发和快速加载的站点，可与CDN结合使用。

4. AMP (Accelerated Mobile Pages)​

具体介绍：

  • 加速移动页面（AMP）是

一种开放标准，用于创建移动网页，旨在提供极快的加载速度和良好的移动用户体验。

  • AMP页面采用精简的HTML和内置加载性能优化，以确保页面在移动设备上快速加载。
  • AMP页面通常用于内容页面，如新闻、博客和文章。
  • Google搜索引擎对AMP页面有特殊支持，有助于SEO。

优点：

  • 极速加载：AMP页面被优化以在移动设备上快速加载。
  • SEO友好：Google搜索引擎对AMP页面有特殊支持，有利于SEO。
  • 良好的用户体验：AMP页面通常提供更好的移动用户体验。

缺点：

  • 限制性：AMP页面有一些限制，可能无法满足某些高度定制化的需求。
  • 不适用于所有内容：AMP适用于内容页面，不适用于所有类型的应用。

适用场景：

  • 移动内容页面，如新闻、博客、文章。
  • 需要快速加载和SEO优化的页面。

5. Prerendering​

具体介绍：

  • 预渲染是一种前端渲染方式，其中页面在构建过程中生成为静态HTML，并包含在HTML中。
  • 预渲染的HTML包含页面的初始状态，因此首次加载速度非常快。
  • 预渲染通常用于提高单页应用的首次加载性能，特别是对于内容不经常变化的页面。

优点：

  • 快速首次加载：预渲染页面在构建时生成，并包含在HTML中，首次加载速度非常快。
  • 适用于单页应用：可以用于提高单页应用的首次加载性能。

缺点：

  • 不适用于动态内容：预渲染适用于不经常变化的内容，对于动态数据不太适用。
  • 构建时间：构建过程可能需要一些时间。

适用场景：

  • 单页应用需要提高首次加载性能的情况。
  • 内容不经常变化的页面。

6. Hybrid Rendering​

具体介绍：

  • 混合渲染是一种将SSR（服务器端渲染）和CSR（客户端渲染）结合使用的方式。
  • 可以在同一应用程序中选择使用SSR或CSR，根据需要提供性能和交互性。
  • 通常用于应用程序中某些页面需要SEO友好的SSR，而其他页面需要富交互性的CSR的情况。

优点：

  • 结合SSR和CSR：允许在同一应用程序中结合使用SSR和CSR，以根据需要提供性能和交互性。
  • 灵活性：可以根据页面需求选择渲染方式。

缺点：

  • 复杂性：组合使用两种渲染方式可能增加开发和维护的复杂性。

适用场景：

  • 应用程序中某些页面需要SEO友好的SSR，而其他页面需要富交互性的CSR。
  • 对于混合渲染有特殊需求的应用。

7. Web Components​

具体介绍：

  • Web组件是一种用于创建自定义HTML元素的技术，包括HTML、CSS和JavaScript。
  • 它们允许开发人员将页面元素封装为可重用的组件，提高了代码的可维护性和可复用性。
  • Web组件可以在不同的前端框架和应用中重复使用，因为它们是平台无关的。
  • Web组件支持封装内部功能、自定义事件和属性等功能。

优点：

  • 组件化开发：可以创建自定义的可重用Web组件，提高代码的可维护性和可复用性。
  • 跨框架：Web组件可以在不同的前端框架和应用中使用。

缺点：

  • 浏览器兼容性：在某些旧版浏览器中可能需要额外的Polyfill支持。

适用场景：

  • 希望将前端代码组织为可重用组件的应用。
  • 跨框架或多团队协作的项目。

8. Serverless Rendering​

具体介绍：

  • 无服务器渲染是一种使用无服务器计算（例如函数即服务 - FaaS）来动态渲染页面的方式。
  • 页面的渲染是通过无服务器函数来完成的，这些函数根据需要进行自动扩展，并根据请求来生成HTML。
  • 无服务器渲染允许动态渲染页面，同时无需管理传统服务器。
  • 它适用于需要动态渲染能力的应用，但又不希望管理传统服务器的情况。

优点：

  • 动态渲染：使用无服务器计算来动态渲染页面，有弹性的渲染能力。
  • 自动扩展：无服务器计算可以根据需求自动扩展，适应流量变化。

缺点：

  • 学习曲线：使用无服务器架构可能需要一些学习和配置。
  • 成本：随着使用量增加，无服务器计算可能会导致成本上升。

适用场景：

  • 需要动态渲染能力的应用，但又不希望管理传统服务器。
  • 流量波动较大的应用，需要弹性

扩展能力。

每种页面渲染方式都有其独特的优势和限制，选择最适合项目需求的方式非常重要。通常，项目可能需要组合使用不同的渲染方式，以满足不同页面和功能的要求。

FAQ​

CSR和SSR分别是什么？​

对于html的加载，以React为例，我们习惯的做法是加载js文件中的React代码，去生成页面渲染，同时，js也完成页面交互事件的绑定，这样的一个过程就是CSR（客户端渲染）。

但如果这个js文件比较大的话，加载起来就会比较慢，到达页面渲染的时间就会比较长，导致首屏白屏。这时候，SSR（服务端渲染）就出来了：由服务端直接生成html内容返回给浏览器渲染首屏内容。

但是服务端渲染的页面交互能力有限，如果要实现复杂交互，还是要通过引入js文件来辅助实现，我们把页面的展示内容和交互写在一起，让代码执行两次，这种方式就叫同构。

CSR和SSR的区别在于，最终的html代码是从客户端添加的还是从服务端。