Web Development Concepts - Mini Guide
1. [Link]: Server-side and Client-side in Same Component
--------------------------------------------------------
In [Link], you can use both server-side and client-side code in the same component, but with rules.
Server-side operations happen in functions like getServerSideProps, getStaticProps, or during
pre-rendering.
Client-side logic (like event handlers, hooks such as useState, useEffect) runs in the browser.
You must keep server-only logic (like database calls, environment secrets) on the server, and client
interactions (DOM updates, user input handling) on the client.
2. ISR (Incremental Static Regeneration)
----------------------------------------
ISR is a feature of [Link] that allows static pages to be updated after the build without rebuilding
the entire project.
How it works:
- You build a static page initially.
- [Link] serves that page to users.
- After a set revalidation time, the next request triggers regeneration of the page in the background.
- The updated page replaces the old one.
This gives the benefits of static generation (fast, cached pages) along with the flexibility to keep
content updated.
3. Event Bubbling and Event Capturing
--------------------------------------
In JavaScript event handling, there are two phases:
- Event Capturing: The event flows from the parent element down to the child.
- Event Bubbling: The event flows from the child element up to the parent.
By default, browsers use event bubbling. Developers can specify capturing by passing 'true' as the
third argument to addEventListener.
4. Load Balancer
----------------
A load balancer is a system that distributes incoming network traffic or requests across multiple
servers.
Benefits:
- Prevents overloading a single server.
- Improves availability and reliability.
- Provides fault tolerance by rerouting traffic if one server fails.
Common types: Layer 4 (transport-level) and Layer 7 (application-level).
5. Rate Limiting
----------------
Rate limiting restricts how many requests a user or client can make in a given time frame.
Example: A user can only make 100 API calls per minute.
This protects servers from abuse, prevents DDoS attacks, and ensures fair usage.
It is usually implemented at the backend (API gateway, server middleware).
From the frontend, developers may use techniques like debouncing and throttling to reduce
excessive requests before they hit the server.
6. Debouncing in Frontend
-------------------------
Debouncing is a technique to delay function execution until after a certain time has passed since
the last event.
Example: While typing in a search box, the API call should trigger only after the user stops typing
for 500ms.
This reduces unnecessary requests and improves performance.
7. Event Handling
-----------------
Event handling is the process of listening to user actions (like clicks, typing, mouse movements)
and responding with code.
Example: onclick for buttons, onchange for inputs.
It is the core of interactive web applications.
8. Micro Test and Macro Test
-----------------------------
- Micro Test (Unit Test): Testing small pieces of code (like a function or component) to ensure they
work correctly.
Tools: Jest, Mocha.
- Macro Test (Integration/E2E): Testing the system as a whole, ensuring different modules work
together.
Tools: Cypress, Playwright, Selenium.
Why: Micro tests catch small bugs early, macro tests ensure the whole system works.
9. Scope in JavaScript
-----------------------
Scope defines the accessibility of variables and functions in code.
Types:
- Global Scope: Accessible everywhere.
- Function Scope: Accessible only inside a function.
- Block Scope: (let, const) accessible only inside a block {}.
Scope ensures variables don’t leak into unintended areas, preventing bugs.
10. Callback Function
----------------------
A callback function is a function passed as an argument to another function, which is executed
later.
Example: setTimeout(() => { [Link]("Hello"); }, 1000);
Callbacks are widely used in async operations (like API requests, timers).
11. Callback Hell
------------------
Callback Hell happens when multiple callbacks are nested deeply, making code hard to read and
maintain.
Example: async1(() => { async2(() => { async3(() => { ... }); }); });
12. How to Prevent Callback Hell
---------------------------------
- Write modular functions.
- Use Promises (then/catch) to flatten callbacks.
- Use Async/Await for cleaner, synchronous-like code flow.
- Error handling becomes easier with these modern techniques.
