Front-end Architecture Decisions

As a Tech Lead or Senior Engineer, interviews frequently focus on your technical decision-making process. Here are structured answers to common architectural questions based on your real experiences.

1. Rendering: SSR vs CSR

The choice between Server-Side Rendering (SSR) and Client-Side Rendering (CSR) is not absolute; it depends on the product requirements:

• SSR (Server-Side Rendering / Next.js): Choose SSR if the application needs strong SEO (e-commerce, blogs), if it has heavy public routes that require a fast First Contentful Paint (FCP), or if you want to mask data traffic and sensitive keys by executing requests on the server.
• CSR (Client-Side Rendering / React SPA): This is the best option when the application requires high user interactivity (like complex dashboards, administrative panels with many filters) and where data changes in real time and doesn’t rely on SEO. Once JavaScript is loaded, navigating between routes is instantaneous.

2. Micro-frontends (Module Federation)

If asked about scaling large applications with multiple teams, Micro-frontends are the ideal answer.

• Why use it: It allows different squads to develop and deploy independently, without blocking each other and without massive code conflicts.
• How to manage state/routing: To avoid tight coupling between micro-frontends, create an orchestrator in the browser. Use native event emission (Custom Events from the Browser API) to share simple global states, such as user login or active routes.

3. React Performance and Memory Management

When interviewers ask about a “slow application where network requests are fast,” the focus is on DOM processing.

• Diagnosis: The first tool to use should be the React Profiler (or Chrome’s Performance tab) to track memory usage and identify which components are rendering unnecessarily.
• Solution: Use React.memo to memoize static positions in the DOM tree that shouldn’t update, and useMemo to avoid heavy recalculations (math or array parsing). Additionally, apply Code Splitting (with React.Suspense and dynamic imports) to split files and not overload the browser’s initial memory with views the user isn’t currently accessing.

Relacionadas: entrevistas-moc · entrevista-live-coding