bilel salem

Posted on Sep 26

Cracking the MERN Interview: React 19, Next.js 15, Supabase, PostgreSQL & Design Patterns Cheat Sheet

bilel salem · 2025-09-26T10:02:19Z

I. Backend Optimization 1. Caching Use Redis or in-memory caching for reusable queries (e.g., top products, categories). Prevents unnecessary DB hits. Can also cache at API gateway level or Next.js cache layer . 2. Sharding Split data horizontally across multiple servers. Example: Users with IDs 0–1M on DB1, 1M–2M on DB2. Improves scalability for write-heavy apps. 3. DB Replicas Write DB (Postgres) + Read replicas (NoSQL or Postgres replicas) . Scale read traffic with replicas. Use eventual consistency where real-time sync is not critical. 4. Microservices Split heavy modules (e.g., auth, socket, notifications). Communicate via Kafka / RabbitMQ . Improves resilience: one service failing won’t kill the app. II. Code-Level Best Practices Push validation & blocking logic into middleware/guards , not services. Heavy calculations → move to DB side (SQL aggregations, indexes). Keep request flow minimal (reject invalid requests early). III. Frontend Optimization 1. Data Fetching Minimize useEffect usage. Prefer TanStack Query or React use() for declarative fetching. Benefit: caching, retries, background refresh, fewer re-renders. 2. Virtualization Use libraries like react-window or react-virtualized for long lists. Only render items in viewport (e.g., task manager with 1000+ tasks). 3. SSR / ISR SSR : Fetch fresh data on every request (dynamic). SSG : Pre-generate static pages at build time (fast). ISR : Best of both → regenerate after revalidate interval. IV. TanStack Query 1. Benefits vs useEffect Built-in caching . Silent background revalidation . No manual loading state, avoids flicker. 2. Stale vs Fresh Data Stale : Data older than staleTime , eligible for re-fetch. Fresh : Recently fetched, served instantly. 3. Invalidate Queries After mutation (create/update/delete), call: queryClient . invalidateQueries ([ ' products ' ]) Enter fullscreen mode Exit fullscreen mode Forces refetch of updated list. V. Supabase 1. Core Features Authentication & Authorization out of the box. Realtime (via Postgres subscriptions). Cloud integrations (email, phone, storage). Built-in SQL editor & API SDK. 2. Row-Level Security (RLS) Granular rules: who can read/write which rows. Example: A user can only see their own orders. Protects DB directly, not just API layer. VI. PostgreSQL Essentials 1. Indexes Speed up searches like a dictionary reference . Primary key index → unique IDs. Composite index → combine fields ( username + email ). GIN index → full-text search (e.g., search “keyword” inside paragraph). VII. Next.js 15 Advanced 1. Server Actions Skip API routes → hit DB directly. No HTTP overhead = faster & safer. Called via useTransition from client. 2. Built-in Caching Next.js caches server action results by default. Avoids duplicate DB queries. 3. State Management Remote: Server Actions + cache. Local (client): Context API. Local (server): Params, cookies. VIII. React 19 Features 1. use() Hook Replace useEffect + useState for data fetching. Works in server + client components. Example: const data = use ( fetchUser ()) Enter fullscreen mode Exit fullscreen mode Suspense pauses UI until ready → smoother UX. 2. Suspense Show fallback ( loading... ) until data loads. Prevents partial/flickering UI. 3. React Compiler New optimization → auto-memoizes expensive renders. Reduces need for useMemo & useCallback . IX. NestJS Concepts 1. Guards Run before controller. Used for auth, permissions, points validation. 2. Middleware Run before controller OR before response leaves server. Generic → can log, validate, modify requests/responses. 3. Interceptors Used for transforming response/request. Example: file upload, logging, wrapping responses. X. Design Patterns (Refactoring Guru style) 1. Singleton Only one instance. Example: DB connection. 2. Observer One-to-many dependency. Example: RxJS streams in NestJS. 3. Strategy Swap algorithms easily. Example: Payment methods (Stripe, PayPal). 4. Decorator Add behavior dynamically. Example: NestJS @Controller , React HOCs. 5. Factory Create objects without knowing exact class. Example: NotificationFactory → Email/SMS/Push. 6. Adapter Makes incompatible interfaces work. Example: Wrap legacy API to work with new interface. 7. Proxy Control access to object. Example: API rate limiter, caching layer. 8. Builder Build complex objects step by step. Example: Build User with optional props. XI. Practical Mixed Questions How to optimize frontend with heavy data lists? → Virtualization + TanStack Query cache + Suspense. How to secure Supabase DB? → RLS + role-based auth + JWT in headers. When would you use ISR over SSR? → If data changes occasionally (products, blogs). SSR if data changes on every request (stock price). Explain Strategy Pattern with code. → PaymentStrategy interface → StripePayment & PaypalPayment classes → dynamically injected. Why prefer Server Actions over API routes in Next.js? → Faster, secure (no network), less boilerplate.

#systemdesign #interview #backend #postgres

I. Backend Optimization

1. Caching

Use Redis or in-memory caching for reusable queries (e.g., top products, categories).
Prevents unnecessary DB hits.
Can also cache at API gateway level or Next.js cache layer.

2. Sharding

Split data horizontally across multiple servers.
Example: Users with IDs 0–1M on DB1, 1M–2M on DB2.
Improves scalability for write-heavy apps.

3. DB Replicas

Write DB (Postgres) + Read replicas (NoSQL or Postgres replicas).
Scale read traffic with replicas.
Use eventual consistency where real-time sync is not critical.

4. Microservices

Split heavy modules (e.g., auth, socket, notifications).
Communicate via Kafka / RabbitMQ.
Improves resilience: one service failing won’t kill the app.

II. Code-Level Best Practices

Push validation & blocking logic into middleware/guards, not services.
Heavy calculations → move to DB side (SQL aggregations, indexes).
Keep request flow minimal (reject invalid requests early).

III. Frontend Optimization

1. Data Fetching

Minimize useEffect usage.
Prefer TanStack Query or React use() for declarative fetching.
Benefit: caching, retries, background refresh, fewer re-renders.

2. Virtualization

Use libraries like react-window or react-virtualized for long lists.
Only render items in viewport (e.g., task manager with 1000+ tasks).

3. SSR / ISR

SSR: Fetch fresh data on every request (dynamic).
SSG: Pre-generate static pages at build time (fast).
ISR: Best of both → regenerate after revalidate interval.

IV. TanStack Query

1. Benefits vs `useEffect`

Built-in caching.
Silent background revalidation.
No manual loading state, avoids flicker.

2. Stale vs Fresh Data

Stale: Data older than staleTime, eligible for re-fetch.
Fresh: Recently fetched, served instantly.

3. Invalidate Queries

After mutation (create/update/delete), call:

  queryClient.invalidateQueries(['products'])

Forces refetch of updated list.

V. Supabase

1. Core Features

Authentication & Authorization out of the box.
Realtime (via Postgres subscriptions).
Cloud integrations (email, phone, storage).
Built-in SQL editor & API SDK.

2. Row-Level Security (RLS)

Granular rules: who can read/write which rows.
Example: A user can only see their own orders.
Protects DB directly, not just API layer.

VI. PostgreSQL Essentials

1. Indexes

Speed up searches like a dictionary reference.
Primary key index → unique IDs.
Composite index → combine fields (username + email).
GIN index → full-text search (e.g., search “keyword” inside paragraph).

VII. Next.js 15 Advanced

1. Server Actions

Skip API routes → hit DB directly.
No HTTP overhead = faster & safer.
Called via useTransition from client.

2. Built-in Caching

Next.js caches server action results by default.
Avoids duplicate DB queries.

3. State Management

Remote: Server Actions + cache.
Local (client): Context API.
Local (server): Params, cookies.

VIII. React 19 Features

1. `use()` Hook

Replace useEffect + useState for data fetching.
Works in server + client components.
Example:

  const data = use(fetchUser())

Suspense pauses UI until ready → smoother UX.

2. Suspense

Show fallback (loading...) until data loads.
Prevents partial/flickering UI.

3. React Compiler

New optimization → auto-memoizes expensive renders.
Reduces need for useMemo & useCallback.

IX. NestJS Concepts

1. Guards

Run before controller.
Used for auth, permissions, points validation.

2. Middleware

Run before controller OR before response leaves server.
Generic → can log, validate, modify requests/responses.

3. Interceptors

Used for transforming response/request.
Example: file upload, logging, wrapping responses.

X. Design Patterns (Refactoring Guru style)

1. Singleton

Only one instance.
Example: DB connection.

2. Observer

One-to-many dependency.
Example: RxJS streams in NestJS.

3. Strategy

Swap algorithms easily.
Example: Payment methods (Stripe, PayPal).

4. Decorator

Add behavior dynamically.
Example: NestJS @Controller, React HOCs.

5. Factory

Create objects without knowing exact class.
Example: NotificationFactory → Email/SMS/Push.

6. Adapter

Makes incompatible interfaces work.
Example: Wrap legacy API to work with new interface.

7. Proxy

Control access to object.
Example: API rate limiter, caching layer.

8. Builder

Build complex objects step by step.
Example: Build User with optional props.

XI. Practical Mixed Questions

How to optimize frontend with heavy data lists?
→ Virtualization + TanStack Query cache + Suspense.
How to secure Supabase DB?
→ RLS + role-based auth + JWT in headers.
When would you use ISR over SSR?
→ If data changes occasionally (products, blogs). SSR if data changes on every request (stock price).
Explain Strategy Pattern with code.
→ PaymentStrategy interface → StripePayment & PaypalPayment classes → dynamically injected.
Why prefer Server Actions over API routes in Next.js?
→ Faster, secure (no network), less boilerplate.

Top comments (1)

david duymelinck • Sep 26

You know the M in MERN stands for MongoDB, right?