vivo商城架构升级-SSR实战篇

2023-10-28 12:44:31

前言

在前面几篇文章中，相信大家对vivo官网商城的前端架构演变有了一定的了解，从稳步推进前后端分离到小程序多端探索实践，团队不断创新尝试。在本文中，我们来分享一下vivo官网商城在Node服务端渲染（SSR）实战经验，介绍SSR的优势和实现方式，以及在vivo商城中的应用实践，对电商平台前端架构优化有借鉴意义。

SSR概述

什么是SSR？

服务端渲染（SSR）是一种前端渲染技术，它将页面的渲染工作从浏览器转移到服务器端完成，然后将渲染好的HTML直接发送给浏览器，从而减少了浏览器需要处理的数据量，提升了页面的加载速度和首屏渲染速度。

SSR的优势

SSR具有以下优势：

提高页面加载速度：SSR将页面的渲染工作转移到服务器端完成，减少了浏览器需要处理的数据量，从而提升了页面的加载速度。
改善首屏渲染速度：SSR可以将渲染好的HTML直接发送给浏览器，无需等待浏览器解析和渲染，从而改善了首屏渲染速度。
增强搜索引擎优化（SEO）：SSR可以生成静态HTML页面，有利于搜索引擎的抓取和索引，从而增强搜索引擎优化（SEO）效果。
提高代码复用性：SSR可以将页面的渲染逻辑从前端代码中剥离出来，并将其放在服务器端完成，从而提高了代码的复用性。

SSR的实现方式

SSR有两种主要的实现方式：

全栈渲染 ：将页面的所有内容都在服务器端渲染完成，然后将渲染好的HTML直接发送给浏览器。这种方式可以实现最快的页面加载速度和首屏渲染速度，但对服务器的性能要求较高。
混合渲染 ：将页面的部分内容在服务器端渲染完成，然后将渲染好的HTML和剩余的未渲染内容一起发送给浏览器。浏览器在收到HTML后，再将剩余的未渲染内容渲染完成。这种方式可以降低服务器的性能压力，但页面加载速度和首屏渲染速度会比全栈渲染慢一些。

vivo商城SSR实践

SSR选型

在vivo商城SSR的选型过程中，我们考虑了以下几个因素：

性能：SSR框架的性能是首要考虑因素，我们需要选择一个性能优异的SSR框架。
易用性：SSR框架的易用性也是一个重要的考虑因素，我们需要选择一个易于上手和使用的SSR框架。
社区支持：SSR框架的社区支持也是一个重要的考虑因素，我们需要选择一个拥有活跃社区的SSR框架。

经过综合考虑，我们最终选择了Next.js作为vivo商城SSR的框架。Next.js是一个基于React的SSR框架，它具有以下优点：

性能优异：Next.js采用了一种称为“增量静态生成”（ISR）的渲染方式，这种方式可以将页面的渲染工作拆分成多个小任务，并在服务器端并行执行这些任务，从而提高了页面的加载速度和首屏渲染速度。
易于使用：Next.js提供了开箱即用的SSR支持，并且具有丰富的文档和教程，使开发人员可以轻松上手和使用。
社区支持活跃：Next.js拥有一个活跃的社区，社区成员乐于分享经验和帮助他人解决问题。