Spartacus SSR 期间使用 browser function 会导致 error，回退到 CSR

准则：Any error during rendering will result in the fallback to CSR.

服务器端渲染应用的 CSR Fallback 现象

在Web前端应用开发中，我们通常会面对两种主要的页面渲染方式，即客户端渲染（Client Side Rendering，CSR）和服务器端渲染（Server Side Rendering，SSR）。每种渲染方式都有其优势和劣势，而在复杂的应用中，开发者可能会采用一种混合的方式，其中就涉及到CSR Fallback现象。

CSR Fallback 是什么？

CSR Fallback是指在服务器端渲染应用中，当某些情况下无法进行服务器端渲染时，系统会退回到客户端渲染的机制。这种机制允许在SSR不可行的情况下，通过客户端渲染来保证页面的正常展示和交互。

为什么需要 CSR Fallback？

1. 异步数据获取： 在一些情况下，服务器端渲染可能无法立即获取所需的异步数据。这可能是由于复杂的业务逻辑、第三方API调用等原因。

2. 性能优化： 有时候，为了提高性能，开发者可能选择部分页面使用CSR，以减轻服务器端的压力。

3. 复杂交互逻辑： 某些页面可能包含复杂的交互逻辑，难以在服务器端进行处理，此时CSR可以提供更好的用户体验。

CSR Fallback 的实现方式

在实际开发中，我们可以通过一些策略来实现CSR Fallback。

1. 条件渲染： 根据特定条件判断是否进行服务器端渲染。如果条件不满足，可以通过客户端渲染来替代。

   // 伪代码示例
   if (条件满足) {
     // 服务器端渲染
     renderOnServer();
   } else {
     // 客户端渲染
     renderOnClient();
   }
   

2. 延迟加载： 在一开始进行服务器端渲染，然后通过客户端渲染延迟加载更复杂的部分。

   // 伪代码示例
   renderOnServer();
   
   // 等待异步数据加载完成后，再进行客户端渲染
   if (异步数据加载完成) {
     renderOnClient();
   }
   

举例说明

假设我们有一个电子商务网站，其中商品详情页面包含了大量的用户评论数据，这些评论数据是通过调用第三方API异步获取的。由于评论数据的获取比较耗时，我们希望在页面加载初期能够快速展示商品信息，而评论数据可以稍后加载。

在这种情况下，我们可以采用CSR Fallback的策略。首先，在服务器端渲染时，只渲染商品基本信息，而将评论数据的获取留给客户端。如果客户端在加载评论数据的过程中发现获取失败或超时，可以回退到一个默认状态，保证用户至少能看到商品的基本信息。这种做法在提高页面加载速度的同时，也保障了用户体验的一致性。

// 伪代码示例
// 服务器端渲染，只渲染商品基本信息
const serverRenderedContent = renderProductDetails();

// 在客户端进行评论数据的获取
fetchCommentsData()
  .then(comments => {
    // 客户端渲染，包括评论数据
    renderProductDetailsWithComments(serverRenderedContent, comments);
  })
  .catch(error => {
    // 客户端渲染，评论数据获取失败时的回退
    renderProductDetailsWithFallback(serverRenderedContent, error);
  });

这样的实现方式允许在大多数情况下享受服务器端渲染的好处，同时在特殊情况下能够 gracefully 回退到客户端渲染，提升了系统的健壮性和用户体验。

总结

CSR Fallback是在服务器端渲染应用中为了应对一些特殊情况而采用的一种策略，它能够保障页面的展示和交互在服务器端渲染不可行时的正常运作。通过条件渲染和延迟加载等方式，开发者可以灵活地控制页面的渲染逻辑，以便更好地平衡性能和用户体验。在实际应用中，需要根据具体场景选择合适的CSR Fallback策略，以达到最佳的开发效果。