Web Client vs RPC Client

'use client';
import { useEffect, useState } from 'react';
import { Client } from '@nimiq/core-web';
 
function NimiqWebClient() {
  const [balance, setBalance] = useState<number | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const address = 'NQ05 U1RF QJNH JCS1 RDQX 4M3Y 60KR K6CN 5LKC';
 
  useEffect(() => {
    const client = new Client({
      network: 'test',
      consensus: 'light'
    });
 
    async function init() {
      try {
        await client.waitForConsensus();
        setIsConnected(true);
        
        const addressBalance = await client.getBalance(address);
        setBalance(addressBalance);
      } catch (error) {
        console.error('Nimiq Client Error:', error);
      }
    }
 
    init();
  }, []);
 
  return (
    <div className="space-y-4">
      <div>Status: {isConnected ? 'Connected' : 'Connecting...'}</div>
      <div>Balance: {balance !== null ? `${balance} NIM` : 'Loading...'}</div>
    </div>
  );
}

'use client';
import { useState, useEffect } from 'react';
 
function NimiqRPC() {
  const [blockNumber, setBlockNumber] = useState<number | null>(null);
  const [balance, setBalance] = useState<number | null>(null);
  const rpcUrl = 'https://yourRpcUrl';
  const address = 'NQ05 U1RF QJNH JCS1 RDQX 4M3Y 60KR K6CN 5LKC';
 
  const fetchRpcData = async () => {
    try {
      // Get latest block
      const blockResponse = await fetch(rpcUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          jsonrpc: '2.0',
          method: 'getBlockNumber',
          params: [],
          id: 1
        })
      });
      const blockData = await blockResponse.json();
      setBlockNumber(blockData.result);
 
      // Get balance
      const balanceResponse = await fetch(rpcUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          jsonrpc: '2.0',
          method: 'getBalance',
          params: [address],
          id: 2
        })
      });
      const balanceData = await balanceResponse.json();
      setBalance(balanceData.result);
    } catch (error) {
      console.error('RPC Error:', error);
    }
  };
 
  useEffect(() => {
    fetchRpcData();
    const interval = setInterval(fetchRpcData, 10000);
    return () => clearInterval(interval);
  }, []);
 
  return (
    <div className="space-y-4">
      <div>Current Block: {blockNumber ?? 'Loading...'}</div>
      <div>Balance: {balance !== null ? `${balance} NIM` : 'Loading...'}</div>
    </div>
  );
}