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 matching the route.
2.
The component is rendered to an HTML string.
3.
That HTML is sent back to the browser.
•
Browser immediately displays pre-rendered HTML → SSR works without extra setup.
API Routes
•
/pages/api/* or app/api/* become serverless API endpoints.
export default function handler(req, res) {
res.status(200).json({ message: "Hello Next.js API!" });
}
JavaScript
복사
•
Enables a lightweight API server in Next.js.
Serverless Functions
•
Run only when requested, then shut down automatically.
•
Pros: no idle resources.
•
Cons: short-lived, DB connections cannot persist.
Serverless-Friendly Databases
•
MongoDB Atlas → cloud-managed, pools connections.
•
AWS DynamoDB → fully serverless NoSQL DB.
Question 2. What is CSR vs SSR, and what’s the difference?
CSR (Client-Side Rendering)
•
Server returns minimal HTML + JS bundle.
•
Browser executes JS → builds DOM.
•
Pros: great for SPAs.
•
Cons: slower first paint, weaker SEO.
SSR (Server-Side Rendering)
•
Server sends fully rendered HTML.
•
Browser shows page immediately, then hydrates with JS.
•
Pros: faster initial paint, better SEO.
•
Cons: higher server load.
Modern Hybrid
•
First load = SSR (SEO, fast).
•
Subsequent navigation = CSR (app-like experience).
Question 3. What is XSS (Cross-Site Scripting), and how to prevent it?
•
Happens when unsanitized input is injected into DOM as code.
•
Example: <script>alert("hacked")</script> in comments.
Prevention
1.
Sanitize/escape HTML input.
2.
CSP (script-src 'self').
3.
HttpOnly cookies for auth tokens.
4.
Use frameworks that escape HTML (React, Vue).
Question 4. What is SQL Injection, and how to prevent it?
•
Happens when user input is concatenated into SQL.
•
Attackers manipulate queries → steal/delete data.
Prevention
1.
Use parameterized queries / prepared statements.
2.
Validate and sanitize input.
3.
Restrict DB privileges.
Question 5. What is CSRF (Cross-Site Request Forgery)?
•
Exploits cookies automatically sent with requests.
•
Tricks logged-in users into unintended actions.
Prevention
1.
SameSite cookies (Lax/Strict).
2.
CSRF tokens → random tokens validated on server.
3.
Verify request origin (Origin, Referer).
Question 6. Why is HTTPS necessary?
•
HTTP = plain text → attackers can sniff traffic.
•
HTTPS = HTTP + TLS → encrypted communication.
Benefits
1.
Confidentiality → data encrypted.
2.
Integrity → prevents tampering.
3.
Authentication → TLS cert validates site identity.
Question 7. How can SEO be improved?
1.
robots.txt & sitemap.xml for crawlers.
2.
Meta tags & OpenGraph for previews.
3.
SSR/SSG for important pages.
4.
Semantic HTML for crawlability.
Question 8. What is an Error Boundary in React?
Purpose
•
Catch JS errors during render/lifecycle.
•
Prevents entire app from crashing.
Behavior
•
On error:
◦
Render fallback UI.
◦
Log details (e.g., Sentry).
Limitations
•
Cannot catch:
◦
Async errors (setTimeout, fetch).
◦
Event handler errors (need try/catch).
Usage
<ErrorBoundary>
<App />
</ErrorBoundary>
JavaScript
복사
•
Wrap whole app or isolate critical widgets.
Question 9. (Extra) DOMContentLoaded vs Load
•
DOMContentLoaded → fires when DOM parsed (before images loaded).
•
Load → fires when all resources (images, CSS, iframes) are loaded.
DOMContentLoaded = early init point. Load = everything ready, but later.