🚀 Web Development Interview Questions with Answers — Part 10: Advanced Web Development

🧠 191. What is a Progressive Web App (PWA)?

A Progressive Web App (PWA) is a web application that provides an app-like experience in a browser.

Features:

✅ Works offline

✅ Fast loading

✅ Installable on devices

✅ Push notifications

✅ Responsive design

Examples: Twitter Lite, Pinterest, Starbucks PWA

Benefits:

No app store required

Better performance

Improved user engagement

🧠 192. What is a Service Worker?

A Service Worker is a JavaScript file that runs in the background independently of a webpage.

Responsibilities:

Caching resources

Offline support

Push notifications

Background sync

Example:

navigator.serviceWorker.register("/service-worker.js")

Benefits:

✅ Offline access

✅ Faster page loading

✅ Better user experience

🧠 193. What is Lazy Loading?

Lazy loading means loading resources only when they are needed.

Examples: Images, Components, Videos

React Example:

const Home = React.lazy(() => import("./Home"))

Benefits:

✅ Faster initial page load

✅ Better performance

✅ Reduced bandwidth usage

🧠 194. What is Code Splitting?

Code splitting divides a large JavaScript bundle into smaller chunks.

Example:

Instead of loading: app.js = 5 MB

Load: home.js, profile.js, dashboard.js

Benefits:

✅ Faster loading

✅ Better performance

✅ Smaller bundles

🧠 195. What is Tree Shaking?

Tree shaking removes unused code from final production bundles.

Example: import { add } from "./math"

Unused functions are removed during build.

Benefits:

✅ Smaller bundle size

✅ Faster application

🧠 196. What is SSR in Next.js?

SSR stands for: Server-Side Rendering

In SSR, HTML is generated on the server before being sent to the browser.

Benefits:

✅ Better SEO

✅ Faster initial page load

✅ Improved performance

Flow: Browser → Server → Rendered HTML → Browser

🧠 197. What is Hydration in React?

Hydration is the process where React attaches event handlers to server-rendered HTML.

Flow: Server Render HTML → Browser Loads HTML → React Adds Interactivity

Benefits: ✅ Interactive pages, ✅ Better user experience

🧠 198. What is Webpack?

Webpack is a module bundler that combines project files into optimized bundles.

Responsibilities:

Bundling files

Minification

Code splitting

Asset optimization

Example:

module.exports = {
   entry: "./src/index.js"
}