初识SSR——服务端渲染

tycho457
196 阅读2分钟

一、为什么需要SSR

（1）白屏问题

在传统的客户端渲染（CSR）中，网站的HTML、CSS和JavaScript文件是由客户端浏览器下载和渲染的。这样会造成较长的加载时间和首次渲染延迟，尤其是在移动端网络条件不佳时。而使用SSR，可以在服务器端动态生成HTML，将HTML文件直接返回给浏览器，这样可以大大缩短页面加载时间，缓解首页白屏，提高网站性能和用户体验。

（2）搜索引擎优化（SEO）

搜索引擎爬虫无法解析JavaScript和CSS文件，因此在CSR中，搜索引擎爬虫只能看到一个空白的HTML页面，无法获取到页面内容。而使用SSR，可以在服务器端生成完整的HTML页面，包含所有的页面内容和数据，这样搜索引擎爬虫可以轻松地抓取页面内容，提高网站的SEO排名。

二、SSR框架介绍

（1）Next.js

Next.js是一个基于React的SSR框架，它提供了一些内置的功能，例如服务器端渲染、自动代码分割、静态生成、动态导航、CSS模块化等，可以帮助开发者更快地搭建React应用。Next.js中文网

（2）Nuxt.js

Nuxt.js是一个基于Vue.js的SSR框架，它提供了一些内置的功能，例如服务器端渲染、自动代码分割、静态生成、动态导航等，可以帮助开发者更快地搭建Vue应用。 Nuxt官网

三、拓展

（1）基于Serverless的服务端渲染

服务端渲染可以很好解决白屏问题和SEO，但同时也为前端开发者带来一些额外的问题：需要前端开发者维护用于渲染的服务器。这时基于Serverless的服务端渲染就凸显出了自己的优势，可以很好地解决运维成本。

image.png

  • 传统的服务端渲染：
    • 每个请求，服务端都有相应的路由实现
  • 基于Serverless的服务端渲染：
    • 将传统服务端渲染的路由拆分为一个个函数，再在FaaS上部署相应的函数。通过这种方式，将运维操作转移到了FaaS平台
avatar
文章
阅读
粉丝