Skip to content

feat: add Next.js SSR compatibility support#111

Open
lucky7323 wants to merge 1 commit intoMDTechLabs:mainfrom
lucky7323:feat/nextjs-ssr-compatibility
Open

feat: add Next.js SSR compatibility support#111
lucky7323 wants to merge 1 commit intoMDTechLabs:mainfrom
lucky7323:feat/nextjs-ssr-compatibility

Conversation

@lucky7323
Copy link

Problem

BridgeWise SDK React components and hooks cause runtime errors and hydration mismatches when used in Next.js SSR environments due to direct access to browser APIs (window, document, localStorage) during server-side rendering.

Solution

This PR introduces comprehensive SSR compatibility for BridgeWise components while maintaining backward compatibility with existing client-side usage.

Key Features

🛠️ SSR-Safe Utilities

  • isServer/isClient environment detection
  • safeStorage API with fallback support for localStorage operations
  • createBrowserGuard for explicit server access error handling

⚛️ React SSR Hooks

  • useIsClient - prevents hydration mismatches by detecting client-side hydration completion
  • useIsomorphicLayoutEffect - eliminates SSR warnings from useLayoutEffect

🧩 SSR Components

  • ClientOnly component with fallback support for server-side rendering
  • All existing components remain unchanged but gain SSR safety

📦 Next.js Adapter Package

  • @bridgewise/next-adapter - dedicated package with next/dynamic wrappers
  • Drop-in replacements: BridgeStatusDynamic, BridgeCompareDynamic, ClientOnlyDynamic
  • Zero configuration required for Next.js App Router and Pages Router

Usage Examples

Basic SSR-safe usage:

import { BridgeStatus, ClientOnly } from '@bridgewise/ui-components';

export default function BridgePage() {
  return (
    <ClientOnly fallback={<div>Loading...</div>}>
      <BridgeStatus chainId={1} />
    </ClientOnly>
  );
}

Next.js dynamic imports:

import { BridgeStatusDynamic } from '@bridgewise/next-adapter';

export default function BridgePage() {
  return <BridgeStatusDynamic chainId={1} />;
}

Compatibility

  • ✅ Next.js 13.4+ (App Router and Pages Router)
  • ✅ React 18+ and React 19
  • ✅ Zero breaking changes to existing client-side usage
  • ✅ TypeScript fully supported
  • ✅ 'use client' directives preserved for React 18+ compatibility

Technical Implementation

  • Framework-agnostic core utilities in existing @bridgewise/ui-components
  • Separate Next.js-specific adapters to maintain framework neutrality
  • Proper error boundaries for server-side browser API access
  • Consistent hydration behavior across all components

This implementation ensures BridgeWise components work seamlessly in modern SSR frameworks while preserving full backward compatibility.

Fixes #58

- Add SSR-safe utilities (env detection, safe storage, browser guards)
- Implement useIsClient and useIsomorphicLayoutEffect hooks
- Add ClientOnly component for safe client-side rendering
- Create @bridgewise/next-adapter package with dynamic imports
- Update README with SSR usage examples and migration guide
- Ensure 'use client' directives are preserved for React 18+ compatibility

Resolves MDTechLabs#58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🖥 Implement SSR Compatibility (Next.js Support)

1 participant