Frontend Interview Questions (Part 2)

This is Part 2 of key frontend interview questions. These topics cover SSR/CSR, security (XSS, CSRF, HTTPS), Next.js serverless architecture, SEO, and error boundaries.

Question 1. How does Next.js enable SSR?

• Next.js runs on top of Node.js, with a built-in HTTP server.

• When a request arrives:

  1. Next.js executes the React component that matches the requested route.
  2. The component’s result is rendered to an HTML string.
  3. That HTML is sent back to the browser.
• The browser can immediately display the pre-rendered HTML → SSR works out of the box without manually setting up an Express server.

API Routes

• Next.js provides /pages/api/* or app/api/* folders.
• Functions placed here become serverless API endpoints.

• Example:

  export default function handler(req, res) {
    res.status(200).json({ message: "Hello Next.js API!" });
  }
  

• This enables running a lightweight API server within the same Next.js project.

Serverless Functions

• Run only when requested, then shut down automatically.
• Benefit: no idle resource usage.

• Downsides:

  • Short-lived → DB connections cannot persist.
  • Traditional databases (MySQL/Postgres) expect long-lived connections.

Serverless-Friendly Databases

• MongoDB Atlas → cloud-managed, handles connection pooling.
• AWS DynamoDB → fully serverless NoSQL DB, integrates with Lambda.

Question 2. What is CSR vs SSR, and what’s the difference?

CSR (Client-Side Rendering)

• Server returns a minimal HTML file + JS bundle.
• Browser executes JS, builds the DOM, and renders UI.
• Pros: Great for SPAs, interactive apps.
• Cons: First paint is slower, weaker SEO.

SSR (Server-Side Rendering)

• Server sends fully rendered HTML.
• Browser shows the page immediately, then hydrates with JS.
• Pros: Faster initial paint, better SEO.
• Cons: Higher server load, hydration still required for interactivity.

Modern Approach

• Hybrid strategy:

  • First page = SSR for fast SEO-friendly load.
  • Subsequent navigation = CSR for app-like experience.

Question 3. What is XSS (Cross-Site Scripting), and how to prevent it?

XSS

• Occurs when user input is not sanitized and gets injected into the DOM as executable code.
• Example: posting <script>alert("hacked")</script> into a comment field.

Prevention

1. Input validation / sanitization (escape HTML special chars).
2. CSP (Content Security Policy): restrict allowed script sources (script-src 'self').
3. HttpOnly cookies: prevent JS from accessing authentication tokens.

4. Use frameworks like React/Vue that escape HTML by default.

   • Exception: dangerouslySetInnerHTML (must be used carefully).

Question 4. What is SQL Injection, and how to prevent it?

SQL Injection

• Happens when user input is concatenated directly into SQL queries.
• Attackers can manipulate queries to steal or delete data.

Prevention

1. Always use parameterized queries / prepared statements.
2. Validate and sanitize inputs on the server.
3. Restrict database user privileges (principle of least privilege).

Question 5. What is CSRF (Cross-Site Request Forgery)?

• Exploits the fact that browsers automatically include cookies with requests.
• Attackers trick a logged-in user into making unintended requests (e.g., clicking a malicious link that performs a bank transfer).

Prevention

1. SameSite cookies (SameSite=Lax or Strict).
2. CSRF tokens: server issues a random token, client must include it in requests.
3. Verify request origin headers (Origin, Referer).

Question 6. Why is HTTPS necessary?

• Without HTTPS, communication is in plain text.
• Attackers (e.g., on public Wi-Fi) can sniff traffic and steal passwords.
• HTTPS = HTTP + TLS (SSL) → encrypts all communication.

Benefits

1. Confidentiality: data encrypted end-to-end.
2. Integrity: prevents tampering with requests/responses.
3. Authentication: TLS certificates confirm site identity (prevents DNS spoofing/phishing).

Question 7. How can SEO be improved?

1. robots.txt & sitemap.xml → guide search engine crawlers.
2. Meta tags & OpenGraph → optimize previews on search engines and social platforms.
3. SSR or Static Generation for important pages → ensure content is visible to crawlers immediately.
4. Use semantic HTML (<header>, <main>, <article>) for better crawlability.

Question 8. What is an Error Boundary in React?

Purpose

• Catch JavaScript errors during rendering, lifecycle methods, or in child components.
• Prevents the entire React app from crashing.

Behavior

• When an error occurs:

  • The error boundary renders a fallback UI (e.g., “Something went wrong.”).
  • Error details can be logged (e.g., Sentry).

Limitations

• Cannot catch:

  • Errors in async code (e.g., setTimeout, fetch).
  • Errors in event handlers (need try/catch).

Usage

<ErrorBoundary>
  <App />
</ErrorBoundary>

• Wrap entire app → prevents blank screens.
• Wrap specific components (e.g., <ChartWidget />) → isolates failures.

Question 9. (Extra) DOMContentLoaded vs Load

• DOMContentLoaded: Fires when HTML is parsed and DOM tree is built (CSS included, but images may still be loading).
• Load: Fires when all resources (images, CSS, iframes, etc.) are fully loaded.

👉 DOMContentLoaded = early script init point 👉 Load = everything ready, but much later