[RFC] 141 - Migrate from RSC to SPA Architecture for Better Performance

[arvinxx]

🎯 Background

We've received multiple user reports about performance issues and UI lag in LobeChat, particularly affecting the Windows platform. Users have reported:

• Significant lag when navigating between pages (Windows extremely slow #8724, Using developer mode to simulate mobile browser on PC is smooth, but normal usage is laggy #8346)
• High CPU usage during page transitions (Windows extremely slow #8724, [Request] Performance optimization request #8581)
• Slow loading times and blocked rendering ([Request] Performance optimization request #8581)
• Overall sluggish user experience that impacts productivity

Related Issues:

• Windows extremely slow #8724
• Using developer mode to simulate mobile browser on PC is smooth, but normal usage is laggy #8346
• Performance optimization request #8581

🔍 Problem Analysis

The current Next.js App Router architecture using React Server Components (RSC) has several performance bottlenecks:

1. Blocking Page Loads: RSC requires server-side data fetching before rendering, which blocks the initial page load
2. Poor tRPC Reusability: When connecting to different tRPC backends, RSC implementations cannot be properly reused
3. Navigation Overhead: Each page transition requires a new server round-trip
4. Client Hydration Cost: Large RSC payloads need to be hydrated on the client side

💡 Proposed Solution

Migrate key pages from RSC to Single Page Application (SPA) architecture using client-side rendering with SWR/React Query for data fetching.

Benefits

• Instant Navigation: Client-side routing eliminates server round-trips
• Better Caching: Smart client-side data caching reduces redundant requests
• Improved Perceived Performance: Skeleton/loading states provide immediate feedback
• Lower Server Load: Less server-side rendering overhead
• Better Code Reusability: Shared data fetching logic across different deployment modes

✅ Completed Migrations

We have successfully migrated 2 major sections:

1. Settings Page (PR #8961)

• Merged: 2025-09-22
• Changes:
  • Converted from Server-Side Rendering (SSR) to Client-Side Rendering (CSR)
  • Removed nested routes under /settings for simpler routing
  • Introduced useSettingsStore hook for centralized state management
  • Memoized components to reduce re-renders
  • Unified desktop/mobile layouts

Result: Noticeably smoother settings page navigation and reduced CPU spikes

2. Discover Page (PR #9828)

• Merged: 2025-10-22
• Changes:
  • Migrated from Next.js RSC to SPA using react-router-dom
  • Introduced DiscoverRouter with MemoryRouter for client-side navigation
  • Created dedicated list/detail components for assistants, models, providers, plugins
  • Replaced useRouter/usePathname with useNavigate/useLocation
  • Added responsive mobile/desktop layouts

📋 Proposed Migration Plan

Based on our successful migrations, we propose to continue migrating the following high-traffic pages:

🎨 Technical Approach

Based on our completed migrations, we'll follow this pattern:

1. Router: Use react-router-dom with MemoryRouter for client-side routing
2. Data Fetching: Replace RSC with SWR/React Query for data fetching
3. State Management: Centralize state with Zustand stores (e.g., useSettingsStore)
4. Navigation: Replace Next.js useRouter/Link with react-router equivalents
5. Layouts: Create responsive mobile/desktop layout variants
6. Performance: Memoize expensive components, implement virtualization where needed
7. Static Generation: Where possible, generate static pages for initial load

📊 Expected Impact

Based on user feedback from our completed migrations:

• Settings Page: "比之前确实好了点" (Indeed better than before) - #8724
• Discover Page: Resolved blocking issue #9803
• Overall: Reduced CPU usage and eliminated UI freezing during navigation

We expect similar or greater improvements as we migrate the remaining high-traffic pages.

💬 Feedback Welcome

We'd love to hear from the community:

• Have you noticed performance improvements in Settings/Discover pages?
• Which pages do you think should be prioritized?
• Any concerns about this architectural shift?
• Suggestions for testing and rollout strategy?

---

Related PRs:

• Settings Migration: refactor: refactor the settings page to improve the experience & change ssr as csr #8961
• Discover Migration: ♻️ refactor: change discover page from rsc to SPA to improve performance #9828