双十一SSR的优化实践，新玩法带来秒开率新高度

双十一会场是每年双十一的主角之一，会场的用户体验自然也是每年最关注的点。在日趋复杂的业务需求下，如何保障我们的用户体验不劣化甚至能更优化是永恒的命题。

今年（2020），我们在不改变现有架构，不改变业务的前提下，在会场上使用了SSR技术，将秒开率提高到了新的高度（82.6%）；也观测到SSR方案对今年双十一技术方案的完整性，以及对整个业务链路提供了很好的稳定性和保障。

本文将介绍如何通过使用SSR技术将秒开率提升到新的高度，以及如何保障用户体验不劣化，甚至能更优化。

1. 什么是SSR？

SSR（Server-Side Rendering），即服务端渲染，是指在服务器端将页面渲染成HTML并返回给客户端，客户端收到后直接显示。

与传统的客户端渲染（CSR）相比，SSR具有以下优点：

• 更快的首屏加载速度：SSR将页面渲染成HTML并返回给客户端，客户端收到后直接显示，无需再等待客户端下载JavaScript并执行渲染。
• 更高的SEO排名：SSR生成的HTML页面可以被搜索引擎直接爬取和索引，有利于提高SEO排名。
• 更好的用户体验：SSR可以提供更流畅、更无缝的用户体验，因为客户端无需等待JavaScript下载和执行即可看到页面内容。

2. 双十一SSR优化实践

2.1 SSR架构设计

我们在双十一会场的SSR架构设计中，使用了以下技术：

• Node.js ：作为服务器端的运行时环境。
• React ：作为客户端的UI框架。
• Next.js ：作为SSR框架。
• Redis ：作为缓存服务器。

2.2 SSR优化策略

我们在双十一会场的SSR优化过程中，使用了以下策略：

• 使用CDN加速静态资源加载 ：我们将静态资源（如JavaScript、CSS、图片等）放到CDN上，以加快加载速度。
• 使用服务端缓存 ：我们将SSR生成的HTML页面缓存到Redis中，以减少服务器的压力，提高性能。
• 使用预渲染 ：我们将一些页面预渲染成HTML页面，以进一步提高加载速度。
• 优化CSS和JavaScript代码 ：我们将CSS和JavaScript代码压缩、混淆和分包，以减少文件大小，提高加载速度。

3. SSR优化效果

通过使用SSR技术，我们在双十一会场的秒开率从去年的78.2%提高到了82.6%，提升了4.4个百分点。

SSR技术不仅提高了秒开率，还提高了用户体验。用户在访问双十一会场时，无需等待JavaScript下载和执行，即可看到页面内容，这带来了更流畅、更无缝的用户体验。

4. 总结

SSR技术是一种非常有效的优化前端性能的技术。通过使用SSR技术，我们可以提高页面的加载速度、提高SEO排名和改善用户体验。

双十一会场的SSR优化实践证明，SSR技术可以显著提高秒开率和用户体验。我们相信，SSR技术将在未来得到更广泛的应用，并成为前端开发的标准实践。