• Home
  • About
  • Agent Skills
  • Projects
  • Blog
  • Contact
Resume
Naser Rasouli

Author

Naser Rasouli

Front-End developer - sharing lessons learned, notes, and write-ups from real projects.

GitHubLinkedIn

Last posts

Optimistic UI in React Without the Common Bugs
2026-09-11•1 min read

Optimistic UI in React Without the Common Bugs

A practical React optimistic UI pattern using useOptimistic, transitions, failure recovery, and server reconciliation without duplicating authoritative state.

Debugging INP in React Apps: From Field Data to Profiler
2026-09-10•1 min read

Debugging INP in React Apps: From Field Data to Profiler

A practical workflow for tracing slow React interactions from field data and long tasks to event handlers, React renders, and main-thread work.

Type-Safe React Forms with React Hook Form and Zod
2026-09-07•1 min read

Type-Safe React Forms with React Hook Form and Zod

A schema-first approach to React forms with React Hook Form and Zod, covering inferred types, field arrays, API errors, conditional fields, and client/server validation boundaries.

JavaScript SEO for React: What Google Actually Sees

JavaScript SEO for React: What Google Actually Sees

2026-09-10
reactseojavascriptssrrendering

JavaScript SEO for React: What Google Actually Sees

A page working in your browser does not automatically mean its important content is easy for a crawler to discover and render. Treat crawling, rendering, and indexing as separate stages and make each route predictable.

Inspect the initial document

Check whether the route exposes its title, primary heading, important copy, and internal links without depending on a chain of client-side requests. Client rendering is not inherently invalid, but it adds more conditions that must succeed before the final content exists.

Choose SSR or prerendering for a reason

Public, SEO-sensitive pages often benefit from server rendering or prerendering because the important content is available earlier. That does not mean every React screen needs SSR. Dashboards, authenticated tools, and highly interactive private routes have different constraints.

Keep navigation crawlable

Use real links for discoverable destinations:

<a href="/blog/react-performance">React Performance</a>

A click handler that only mutates client state is not a replacement for a stable URL and link graph.

Do not gate primary content behind interaction

Lazy loading images and secondary modules can be useful, but critical text should not require a user-specific click, hover, or custom event before it can render. Keep the content path deterministic.

Test rendering failures separately

A route may work in your logged-in browser while failing in a clean rendering environment because of authentication assumptions, browser-only APIs, API errors, or timeouts. Test public routes without session state and verify meaningful HTTP status and redirect behavior.

Make metadata route-specific

Titles, descriptions, canonicals, and shareable URLs should describe the current route rather than a single SPA shell. Duplicate metadata often signals that routing and document metadata are owned by different parts of the application without a clear contract.

Practical review checklist

  • primary content can be rendered reliably;
  • internal destinations use real links;
  • public routes do not require a user session;
  • metadata and canonical URLs match each route;
  • lazy loading does not hide essential content behind interaction;
  • redirects and status codes communicate the actual result;
  • mobile and desktop expose equivalent primary content.

Good JavaScript SEO is mostly predictable rendering, stable URLs, and a crawlable information architecture—not a collection of crawler-specific hacks.