前端 - 前后端分离下，首屏（主屏）的用户信息怎么异步加载？

Question

假设，我用 vue 写前端，用 django、flask、fastapi 写后端。

网站有用户登陆功能，但是怎么渲染当前登陆的是谁呢？是每次先请求静态的 vue（html、jss、css），然后再让浏览器请求后端用户接口获取用户信息渲染出用户信息后，再去请求对应的资源（比如用户文章页就去请求用户文章列表）

还是做一个 ssr 服务端渲染，直接在服务端拼装好用户信息，让客户端浏览器渲染的时候直接可以获取带用户信息的 html？

好像目前几乎都是后者的方案？包括思否！为什么？因为后者速度快用户体验更好吗？但是这样的话，必须要 ssr 了？

Answer 1

对你的需求来说，因为“用户验证”这个前置条件的存在，其实 SSR 与否帮助不太大，因为用户关键的信息是不可能开放给爬虫的。这里 SSR 的好处是先渲染，用户可以直接看到想看的内容，体验更优质。但实际提升不大，可能 5/100 吧。

所以这里比较理想的做法是：

1. 如果后端支持 SSR，最好把用户信息放在 cookie，这样可以直接完成身份校验，输出需要的内容
2. 如果前后分离异步更新，那就无所谓，用你最熟悉的做法即可。
3. 如果应用里包含大量用户身份无关的信息，比如思否，那么 SSR 优势大很多，强烈建议用 SSR

Answer 2

两种方案都可以。SPA（单页应用）会在拿到所有的资源后，通过接口获取用户信息，并在客户端重新组装页面。SSR则是在服务端获取用户信息，组装页面发送给客户端。

SPA方案开发和部署简单，但是对搜素引擎的支持不好。（爬虫一般不会执行下载的js文件，然后进行检索。）
SSR方案，由于代码需要同时在客户端和服务端执行一遍，并且后台需要 node 服务，所以开发和部署都会相对比较复杂。但是对于搜索引擎会有比较好的支持。

向思否这种内容平台，需要对搜索引擎有较好的支持，所以一般会采用SSR方案。

Answer 3

在前后端分离的应用中，首屏（主屏）的用户信息通常通过客户端的异步请求来获取并渲染。这是因为前后端分离的核心思想就是服务端负责提供数据和API，而客户端（如Vue）则负责展示和交互。

针对你提出的问题，以下是两种常见的方法及其优缺点：

1. 客户端渲染（通过异步请求）

步骤：

1. 客户端首先加载静态的Vue资源（HTML、CSS、JS）。
2. Vue实例在客户端初始化后，通过API（如axios）向服务端发送请求，获取当前登录用户的信息。
3. Vue在客户端根据获取到的用户信息动态渲染页面。

优点：

• 更好的可维护性和扩展性：前后端职责清晰，前端可以专注于展示和交互，后端专注于数据和API。
• 更好的性能优化：可以通过各种前端技术（如代码分割、懒加载、预加载等）来优化性能。
• 更好的用户体验：可以通过前端路由和状态管理等技术实现更丰富的交互和体验。

缺点：

• 首屏渲染时间可能较长：因为需要等待API请求返回后才能渲染用户信息。
• 需要处理网络错误和超时等问题：因为API请求依赖于网络连接，所以可能出现请求失败或超时的情况。

2. 服务端渲染（SSR）

步骤：

1. 用户在浏览器访问URL时，服务端首先接收到请求。
2. 服务端根据请求中的用户信息（如通过token或session）获取当前登录用户的数据。
3. 服务端将用户数据渲染到HTML模板中，并返回给客户端。
4. 客户端接收到渲染好的HTML后直接展示给用户。

优点：

• 更好的首屏渲染时间：因为服务端已经渲染好了用户信息，所以客户端可以直接展示给用户。
• 更好的SEO效果：因为搜索引擎可以直接抓取到渲染好的HTML内容。

缺点：

• 更高的服务器负载：因为服务端需要处理渲染逻辑，所以会增加服务器的负载。
• 有限的优化空间：相比于客户端渲染，服务端渲染在性能优化方面的空间有限。
• 前后端耦合度较高：服务端需要处理前端模板和渲染逻辑，增加了前后端的耦合度。

为什么目前几乎都是客户端渲染的方案？

• 灵活性：客户端渲染提供了更高的灵活性和可维护性，前端可以更加自由地控制页面的展示和交互。
• 性能优化：通过各种前端技术，可以更好地优化应用的性能和用户体验。
• 前端发展趋势：随着前端技术的不断发展和普及，前端已经能够承担更多的职责和任务，包括数据获取和页面渲染等。

是否必须要SSR？

不是。选择哪种渲染方式取决于你的应用需求和场景。如果你更关注首屏渲染时间和SEO效果，可以考虑使用SSR；如果你更关注性能和灵活性，可以选择客户端渲染。在实际开发中，也可以结合使用两种渲染方式，根据具体页面和场景来选择合适的渲染方式。