Ditch REST: How React + SQL + WebSockets Can Power Real-Time Apps Without the Overhead

Ditch REST: How React + SQL + WebSockets Can Power Real-Time Apps Without the Overhead

Tired of polling? Hate Redux overload? Want snappy real-time updates without diving into Firebase lock-in? Here's a bold new way to build full-duplex apps with SQL + React + WebSockets that actually scales.

🚨 Why REST Doesn’t Cut It Anymore

We’ve been building web apps the “RESTful” way for the last two decades: client requests -> server responds. While it works for a lot of CRUD-style apps, the internet is changing. Take a look at:

• Real-time collaboration (e.g. Google Docs)
• Multiplayer experiences (e.g. Figma, Trello)
• Dashboards that auto-update (e.g. Trading apps)

Polling every few seconds is a waste of resources and bad UX. You might consider Firebase, Hasura, or GraphQL subscriptions — but what if you could get real-time capabilities with tools you already know?

Enter React + SQL + WebSockets.

---

🧠 The Stack

We'll build a basic chat app (yes, revolutionary 🙃) but the idea scales:

• Frontend: React with Hooks and WebSocket connection
• Backend: Node.js with Express and WebSocket server
• Database: PostgreSQL (because SQL still rocks)
• Real-Time Sync: PostgreSQL triggers + WebSocket pushing delta

---

🛠️ Pre-requisites

Before diving in, make sure you’ve got:

• Node.js ≥ 18
• PostgreSQL ≥ 12
• Basic knowledge of React
• Familiarity with Express

---

🧪 Step 1 – PostgreSQL Setup with Trigger

Let’s enable PostgreSQL to notify our backend when new data comes in.

-- Create messages table
CREATE TABLE messages (
  id SERIAL PRIMARY KEY,
  content TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Function to notify
CREATE OR REPLACE FUNCTION notify_new_message()
RETURNS trigger AS $$
DECLARE
BEGIN
  PERFORM pg_notify('new_message', row_to_json(NEW)::text);
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Trigger
CREATE TRIGGER trigger_new_message
AFTER INSERT ON messages
FOR EACH ROW EXECUTE FUNCTION notify_new_message();

Now, every time you INSERT a message, PostgreSQL sends a NOTIFY event.

---

👂 Step 2 – Node.js WebSocket Listening on PostgreSQL

Let’s write the backend that pipes SQL NOTIFY messages to WebSocket clients.

const express = require('express');
const { Pool } = require('pg');
const WebSocket = require('ws');
const http = require('http');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

const pgPool = new Pool({
  connectionString: process.env.DATABASE_URL // or use config
});

(async () => {
  const client = await pgPool.connect();
  await client.query('LISTEN new_message');

  client.on('notification', msg => {
    const payload = JSON.parse(msg.payload);
    console.log('💬 New message:', payload);

    wss.clients.forEach(ws => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify(payload));
      }
    });
  });
})();

app.use(express.json());
app.post('/messages', async (req, res) => {
  const { content } = req.body;
  const { rows } = await pgPool.query(
    'INSERT INTO messages (content) VALUES ($1) RETURNING *',
    [content]
  );
  res.json(rows[0]);
});

server.listen(3001, () => console.log('🚀 Server listening on port 3001'));

Now the server acts like a bridge from PostgreSQL -> WebSocket.

---

⚛️ Step 3 – React Hook for WebSocket Subscription

On the React side, we set up a WebSocket hook to connect to the backend and render messages.

import React, { useEffect, useRef, useState } from 'react';

function useWebSocketMessages(url) {
  const [messages, setMessages] = useState([]);
  const ws = useRef(null);

  useEffect(() => {
    ws.current = new WebSocket(url);

    ws.current.onmessage = (e) => {
      const data = JSON.parse(e.data);
      setMessages((prev) => [...prev, data]);
    };

    return () => ws.current.close();
  }, [url]);

  return messages;
}

function Chat() {
  const messages = useWebSocketMessages('ws://localhost:3001');

  return (
    <div>
      <h2>Real-time Chat</h2>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>{msg.content}</li>
        ))}
      </ul>
    </div>
  );
}

export default Chat;

---

🧬 Architectural Benefits

This architecture is surprisingly powerful:

• 🔥 Realtime — updates as they happen, no polling
• 🪝 React hooks fit naturally with WebSocket streams
• 📦 Lightweight backend — no need for GraphQL or Firebase
• 🧠 Declarative updates from SQL without Redux
• 🔁 Full control over data & auth

---

⏭️ Where to Go From Here?

This pattern isn’t limited to a chat app. You can extend it to:

• Real-time stock tickers
• IoT sensor visualization
• Collaborative whiteboards
• Multiplayer boards (Kanban, Trello clones)

Bonus: Add authentication, debounce updates, or event sourcing with PostgreSQL logical replication.

---

🏁 Conclusion

Imagine a future where:

• Your server speaks SQL + WS natively
• Your client only fetches once
• You skip Redux, polling, and stale data

With a small upgrade to your architecture, you can get real-time SQL in the browser — and you didn’t even need Firebase.

REST is slow. GraphQL is heavy. WebSockets + SQL is underrated.

Try it.

---

🔗 Resources:

• WebSocket spec: https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
• PostgreSQL NOTIFY: https://www.postgresql.org/docs/current/sql-notify.html
• React state management without Redux: https://recoiljs.org/

---

🧠 If you enjoyed this article, follow the blog for deeper real-time explorations, async patterns, and minimalist web architectures that scale.

Happy hacking 🖖

---

👉 If you need this done – we offer fullstack-development services.