面试题：Vue CLI的SSR与SSG在复杂业务场景下的抉择与实现

Question

假设你正在开发一个大型电商应用，部分页面需要实时数据展示，部分页面为商品介绍等相对静态的内容。请详细说明如何在Vue CLI中抉择使用SSR还是SSG来构建不同页面，并描述具体的实现思路和关键技术点。

Answer 1

实时数据展示页面选择SSR

1. 原因：实时数据展示需要根据用户请求动态获取最新数据，SSR（服务器端渲染）能够在服务器端将组件渲染为HTML字符串，在请求时实时生成包含最新数据的页面，满足实时性要求。
2. 实现思路：
   • 安装依赖：在Vue CLI项目中，安装@nuxtjs/nuxt等相关SSR框架（Nuxt.js基于Vue.js的SSR框架）。
   • 配置服务器端渲染：在Nuxt.js项目中，在pages目录下创建实时数据展示相关页面组件。在服务器端代码中配置路由、数据获取等逻辑。例如，在页面组件的asyncData（Nuxt.js提供的方法）中获取实时数据，服务器端会在渲染页面时调用该方法获取最新数据并注入到页面中。
   • 部署：将服务器端代码部署到服务器上，用户请求时，服务器实时渲染页面并返回。
3. 关键技术点：
   • 服务器资源管理：SSR会增加服务器的负载，需要合理配置服务器资源，如使用负载均衡、缓存策略等。
   • 数据获取与缓存：为了提高性能，对于实时数据可以采用适当的缓存策略，如设置较短的缓存时间，同时要确保缓存更新机制能及时获取最新数据。
   • 同构代码：尽量编写同构代码，即服务器端和客户端都能运行的代码，减少重复工作。

商品介绍等静态页面选择SSG

1. 原因：商品介绍等页面内容相对静态，不需要实时更新，SSG（静态站点生成）可以在构建时生成HTML文件，提高页面加载性能，减少服务器压力。
2. 实现思路：
   • 安装依赖：如果使用Vue CLI，可安装@vuepress/cli（VuePress是一个基于Vue的静态站点生成器）。
   • 配置静态站点生成：在VuePress项目的docs目录下创建商品介绍等页面的Markdown文件或Vue组件。在构建时，VuePress会将这些文件转换为静态HTML页面。例如，在Markdown文件中编写商品介绍内容，利用VuePress的配置选项设置页面布局、导航等。
   • 部署：将生成的静态文件部署到静态文件服务器，如GitHub Pages、Vercel等。用户请求时，直接返回预先生成的静态页面。
3. 关键技术点：
   • 数据更新：虽然是静态页面，但如果商品信息有更新，需要重新构建并部署静态站点。可以设置定时构建或在商品信息更新时触发构建流程。
   • SEO优化：静态页面利于SEO，要合理设置页面标题、元描述等SEO相关信息，确保搜索引擎能正确索引页面内容。