面试题：React 条件渲染元素隐藏显示与 SSR/SSG 的深度融合

实现思路

状态管理：
- 使用状态管理库，如 Redux 或 MobX，来管理用户登录状态和权限信息。在 SSR/SSG 场景下，Redux 配合 redux - toolkit 和 next - redux - wrapper 等工具，可在服务器端和客户端同步状态。例如，在 Redux 中创建一个 userSlice 来存储登录状态（isLoggedIn）和权限（permissions）。
- 在服务器端，通过中间件（如 redux - saga）获取用户信息并初始化状态。在客户端，从存储（如 localStorage）中恢复状态。

服务器端渲染（SSR）处理：

在 SSR 框架（如 Next.js）中，利用 getServerSideProps（在 Next.js 中）函数获取用户登录状态和权限。这可以通过 API 调用或从服务器端会话（session）中获取。
根据获取的状态，在服务器端渲染页面时就进行条件渲染。例如，在 React 组件中：

import React from'react';
import { useSelector } from'react-redux';

const RestrictedComponent = () => {
  const { isLoggedIn, permissions } = useSelector(state => state.user);
  if (!isLoggedIn ||!permissions.includes('view - restricted - content')) {
    return null;
  }
  return <div>Restricted content here</div>;
};

export default RestrictedComponent;

静态站点生成（SSG）处理：
- 在 SSG 场景（如 Next.js 的 getStaticProps）中，同样需要获取用户状态和权限。由于 SSG 是在构建时生成页面，可能无法直接获取实时用户状态。可以考虑以下方法：
  - 对于公开内容，直接在 getStaticProps 中生成页面。
  - 对于受限内容，可以设置一个通用的占位符，然后在客户端根据用户登录状态和权限替换为实际内容。例如，使用一个 PlaceholderComponent 在 SSG 生成的页面中占位，然后在客户端挂载时替换。

客户端过渡一致性：

在客户端，使用 React 的 hydration 机制。当客户端 JavaScript 加载并执行后，它会与服务器端渲染的 DOM 进行“水合”（hydration）。确保状态管理库中的状态与服务器端传递的状态一致，这样条件渲染在客户端过渡时就不会出现闪烁。
可以使用 React 的 useEffect 钩子在客户端挂载后检查状态并重新渲染。例如：

import React, { useEffect } from'react';
import { useSelector } from'react-redux';

const ConditionalComponent = () => {
  const { isLoggedIn, permissions } = useSelector(state => state.user);
  useEffect(() => {
    // 检查状态，可用于进一步逻辑处理或确保一致性
  }, [isLoggedIn, permissions]);
  if (!isLoggedIn ||!permissions.includes('view - component')) {
    return null;
  }
  return <div>Component content</div>;
};

export default ConditionalComponent;

可能遇到的问题及解决方案

服务器端获取用户状态：
- 问题：在 SSR 中，获取用户登录状态和权限可能依赖外部服务（如身份验证 API），这可能导致性能问题或服务不可用。
- 解决方案：使用缓存机制，如 Redis，来缓存用户状态。在每次请求时，先检查缓存中是否有用户状态，若有则直接使用，减少对外部服务的调用。同时，设置合理的缓存过期时间，以确保状态的实时性。
SSG 中的动态内容：
- 问题：如前所述，SSG 在构建时无法获取实时用户状态，导致受限内容无法正确生成。
- 解决方案：除了使用占位符，还可以采用增量静态再生（在 Next.js 中通过 revalidate 选项）。在一定时间间隔或特定事件触发时，重新生成包含受限内容的页面。例如，当用户登录或权限更新时，触发页面的重新生成。
客户端闪烁：
- 问题：在客户端“水合”过程中，由于状态不一致或渲染时机问题，可能会出现元素闪烁（如先显示后隐藏）。
- 解决方案：确保服务器端和客户端状态同步。在服务器端渲染时，将状态信息通过 props 传递给客户端。在客户端，尽快初始化状态管理库，并在渲染组件前确保状态已正确加载。可以使用 React 的 Suspense 和 ErrorBoundary 来处理加载状态和错误，避免闪烁和异常渲染。例如，将需要条件渲染的组件包裹在 Suspense 中：
```
import React, { Suspense } from'react';

const RestrictedComponent = React.lazy(() => import('./RestrictedComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RestrictedComponent />
    </Suspense>
  );
};

export default App;
```

星途面试题库

面试题：React 条件渲染元素隐藏显示与 SSR/SSG 的深度融合

知识考点

面试题答案

实现思路

可能遇到的问题及解决方案