DEV Community: Kashif Nehal

Page Router vs. App Router in Next.js: What's the difference with Example/Analogy

Kashif Nehal — Wed, 19 Mar 2025 08:46:06 +0000

Page Router vs. App Router in Next.js: What's the Difference?

🚀
Next.js has evolved significantly over the years, and one of the biggest changes came with Next.js 13—the introduction of the App Router.
If you're wondering whether to stick with the Page Router or switch to the new App Router, this blog will clear up the confusion!

📌 What is the Difference Between Page Router and App Router?

Next.js now has two ways to define routes in your application:

Page Router (pages/ directory) → The traditional Next.js routing system used before Next.js 13.
App Router (app/ directory) → The modern approach introduced in Next.js 13, leveraging React Server Components and improved performance techniques.

Let’s break it down with a simple analogy!

🍽️ Analogy: A Traditional Restaurant vs. A Modern Buffet

Imagine you're running a restaurant and serving food to customers.

Page Router = Traditional Restaurant 🍛
- Customers (users) order from a fixed menu (file-based routes).
- The kitchen (server) prepares a whole dish (full page reload) whenever a customer places an order.
- Even if only a small item changes, the kitchen remakes the entire dish (full page render).
- The process works, but it can be inefficient.
App Router = Modern Buffet with Live Stations 🍱
- Customers can pick only what they need (React Server Components + Partial Rendering).
- Some dishes are pre-made (Server Components), while others are made fresh (Client Components).
- If a customer wants a minor change (like extra sauce), only that part is updated (granular rendering).
- The kitchen is optimized—some food is prepared ahead of time, and some is cooked on demand.

🛠️ Feature Comparison: Page Router vs. App Router

❌ Features Removed in App Router:

getServerSideProps, getStaticProps, getInitialProps (Replaced with Server Components & fetch())
_app.js and _document.js (Replaced with layout.tsx)
Link requiring prefetch={false} (Now automatic prefetching)

✅ New Features Added in App Router:

Server Components (Default) → Smaller bundle size, better performance.
Client Components ("use client") → When interactivity is needed.
Streaming & Suspense → Pages load faster with automatic streaming.
loading.tsx & error.tsx → Built-in loading & error handling.
Server Actions → Handle mutations without API routes.

🔥 Which One Should You Use?

If migrating an old project → Stick with Page Router (pages/) for now.
For new projects → Use App Router (app/) for better performance.
If you need full control over rendering → App Router is better because it optimizes Server & Client rendering automatically.

🚀 Conclusion

The App Router is the future of Next.js, offering better performance, smaller bundle sizes, and more efficient server-side rendering. If you’re starting a new project, definitely go for the App Router! If you have an existing Next.js project, consider migrating when the time is right.
💬 What are your thoughts on the new Next.js App Router? Are you planning to switch? Let’s discuss in the comments!

Nextjs #React #WebDevelopment #JavaScript #Frontend #Performance #Nextjs13 #AppRouter #PageRouter #WebDev #SEO #Coding #Programming

Quick Guide to Cookies, Local Storage, Session Storage, and Other Web Storage Mechanisms

Kashif Nehal — Sat, 30 Nov 2024 16:18:17 +0000

When building web applications, managing data on the client side is a common requirement. Browsers offer various storage options, each with unique characteristics, use cases, and limitations. In this blog, we’ll explore Cookies, Local Storage, Session Storage, and touch on other storage mechanisms, detailing how they work, why they’re needed, their retention policies, and how to use them with examples.

1. Cookies

What Are Cookies?
Cookies are small text files stored on the client’s device by the browser. They are sent to the server with every HTTP request, making them ideal for server-side session management.

Why Are They Needed?
Storing user authentication tokens.
Saving user preferences for personalization.
Tracking users across sessions for analytics or advertising.

Retention and Expiry
Cookies have a configurable expiry date:

Session Cookies: Expire when the browser is closed.
Persistent Cookies: Expire at a specific date and time.

Advantages
Accessible on both the client and server.
Can be shared across subdomains (with the domain attribute).

Limitations
Limited to 4 KB in size.
Included in every HTTP request, which can impact performance.

2. Local Storage

What Is Local Storage?
Local Storage provides a way to store key-value pairs in the browser. It is synchronous and available across all tabs of the same origin.

Why Is It Needed?
Saving data that needs to persist across sessions, such as app settings.
Caching data for offline use.

Retention and Expiry
Data persists until explicitly removed by the user or code.
No automatic expiry.

Advantages
Larger storage capacity (typically 5-10 MB per origin).
Data is not sent to the server with requests.

Limitations
Only accessible on the client-side.
Synchronous operations can block the main thread.

3. Session Storage

What Is Session Storage?
Session Storage is similar to Local Storage but with a shorter lifespan. Data is only available for the duration of the page session (i.e., while the tab is open).

Why Is It Needed?
Temporary storage for data like form inputs.
Use cases where data should not persist after the tab is closed.

Retention and Expiry
Data is cleared when the page session ends (tab is closed).

Advantages
Isolated to the specific tab/session.
Larger storage capacity than cookies (typically 5-10 MB per origin).

Limitations
Not persistent across sessions.
Synchronous like Local Storage.

4. IndexedDB

What Is IndexedDB?
IndexedDB is a low-level API for storing large amounts of structured data, including files and blobs. It is asynchronous and designed for more complex storage needs.

Why Is It Needed?
Storing large datasets (e.g., media files or JSON objects).
Building offline-first applications.

Retention and Expiry
Data persists until explicitly removed.

Advantages
High storage capacity (hundreds of MB).
Allows complex querying.

Limitations
Requires a more complex API than Local/Session Storage.
Not ideal for simple key-value pairs.

Best Practices
Use cookies for authentication-related data but avoid storing sensitive data like passwords.
Prefer Local Storage for persisting app settings and user preferences.
Use Session Storage for transient data like form inputs and state during a session.
Leverage IndexedDB for complex or large-scale data needs, such as offline support.
Avoid exceeding storage limits and always handle exceptions for full storage gracefully.

Client Side Rendering (CSR) vs Server Side Rendering (SSR): Simplified Story

Kashif Nehal — Sat, 07 Sep 2024 22:25:40 +0000

Client Side Rendering:

We have to bundle all our components & send them to the client for rendering.
(Large bundles)

This means as our app grows, so does our bundles. Larger the bundle, more memory we need on client to load all these components.
(Resource heavy)

Search-engine bots can't view our content, coz they can't execute JS code so they can't render our components like web browsers do.
(No SEO)

Any sensitive data in our components or their dependencies like API keys will be exposed to the client.
(Less Secure)

Server Side Rendering:

Only send essential components to the client & prevent our bundle from becoming large unnecessarily.
(Small bundles)

Because server handles most of the rendering, we need less resources on the client.
(Resource efficient)

As rendering is done on the server & we send actual content to the client, not the JS files to execute. Search engine bots can view the content, understand & index the pages.
(SEO)

We can keep sensitive data like API keys on the server.
(More Secure)

Wrap-up

Initial Page Load:

CSR: Slower
SSR: Faster

Subsequent Page Loads:

CSR: Faster
SSR: Slower

SEO:

CSR: May be challenging
SSR: Better

User Experience:

CSR: More interactive
SSR: Less interactive (initially)

Server Load:

CSR: Lower
SSR: Higher

JavaScript Requirement:

CSR: Required
SSR: Not required

Difference between anchor tag and Link tag in Next.js

Kashif Nehal — Sat, 07 Sep 2024 21:47:21 +0000

In Next.js, the primary difference between the standard HTML anchor tag and the Next.js Link component is how they handle navigation.

Usage Example:
anchor Tag:

<a href="/about">Go to About Page</a>

Link Component:

import Link from 'next/link';

<Link href="/about">
  <a>Go to About Page</a>
</Link>

1. Client-Side Navigation:

anchor Tag: When using a standard anchor tag, the browser performs a full page reload when navigating to a new URL. This means it sends a new HTTP request to the server and fetches the entire page again, leading to slower navigation.
Link Component (Next.js): The Link component provides client-side navigation without a full page reload. It pre-fetches pages in the background (if enabled) and allows for faster transitions _between pages by handling routing on the client side, making it more _efficient for Single Page Applications (SPAs).

2. Routing:

anchor Tag: With an anchor tag, the URL is navigated directly, and the browser handles the routing like a traditional multi-page application.
Link Component (Next.js): The Link component works with Next.js's internal routing system, using the href prop for navigation. It manages routes internally using the Next.js router, which supports features like dynamic routing and query parameters without the need for full page reloads.

3. Preloading Pages:

anchor Tag: Does not offer any preloading capabilities.
Link Component (Next.js): Next.js’s Link component preloads linked pages in the background when they are visible in the viewport, which leads to faster navigation.

4. SEO and Accessibility:

anchor Tag: SEO-friendly by default and provides accessibility for screen readers.
Link Component (Next.js): Also SEO-friendly and accessible, but under the hood, it renders an anchor tag, ensuring that the benefits of HTML remain intact while enhancing navigation behavior.

In summary, you should prefer using the Link component for internal navigation within a Next.js app to take full advantage of client-side routing and performance optimizations

Why do we need Next.js, What are the features of Next.js above react: Quick dive with analogy

Kashif Nehal — Sat, 07 Sep 2024 11:28:46 +0000

Analogy
Before Next.js, building a web application was like assembling a car from individual parts. It was a complex and time-consuming process that required deep knowledge of each component. Next.js, on the other hand, is like buying a pre-assembled car. It comes with everything you need, pre-configured and ready to go. This not only saves you time and effort but also ensures that the final product is well-built and optimized.

Let's understand how it was before React and what changed after Next.js

Before Next.js: The React Landscape
Before Next.js, React developers faced a number of challenges when building web applications. While React provided a powerful component-based approach to building user interfaces, it left many crucial aspects of web development up to developers to implement themselves.

1. Routing

Manual Implementation: Developers had to manually create and manage routing logic using libraries like React Router, which often involved complex configuration and state management.
Limited Features: These libraries, while functional, lacked the advanced features and optimizations offered by Next.js's built-in router.

2. Rendering

Client-Side Rendering (CSR): All rendering was done on the client-side, which could lead to slower initial page loads, especially for complex applications.
Server-Side Rendering (SSR): SSR was possible but required significant manual setup and could be challenging to maintain.
No Static Rendering: There was no built-in support for statically generating pages, which can significantly improve performance and SEO.

3. Data Fetching

Manual Data Fetching: Developers had to manually fetch data using libraries like Axios or fetch, which often involved complex state management and error handling.
Lack of Optimization: There were no built-in mechanisms for data caching, revalidation, or request memoization.

4. Styling

Limited Support: While React supported CSS, there were no built-in solutions for CSS Modules, Tailwind CSS, or CSS-in-JS.
Manual Management: Developers had to manually manage styling and handle conflicts between different stylesheets.

5. Performance Optimization

Manual Optimization: Developers had to manually optimize images, fonts, and scripts to improve performance and Core Web Vitals.
Lack of Tools: There were no built-in tools to help with these optimizations.

6. TypeScript Support

Limited Support: While TypeScript could be used with React, there were limitations in terms of type checking and compilation speed.
Manual Setup: Developers had to manually set up TypeScript and configure it for their projects.

Next.js: A Game-Changer

Next.js addressed many of these challenges by providing a comprehensive framework built on top of React. It introduced several key improvements:

1. Simplified Routing

File-System-Based Routing: Next.js automatically generates routes based on the structure of your project's files, making routing much simpler and more intuitive.
Advanced Features: It supports layouts, nested routing, loading states, error handling, and other advanced routing features.

2. Optimized Rendering

Server-Side Rendering: Next.js makes it easy to render pages on the server, improving initial page load times and SEO.
Static Rendering: It also supports statically generating pages, which can further enhance performance and reduce server load.
Edge and Node.js Runtime Support: Next.js can be deployed to edge networks for even faster performance.

3. Simplified Data Fetching

Async/Await in Server Components: Data fetching is made easier with the use of async/await in Server Components.
Extended Fetch API: Next.js provides an extended fetch API with features like request memoization, data caching, and revalidation.

4. Improved Styling

Built-in Support: Next.js supports popular styling methods like CSS Modules, Tailwind CSS, and CSS-in-JS.
Automatic CSS Extraction: It automatically extracts CSS from your components, making styling management easier.

5. Enhanced Performance Optimization

Built-in Optimizations: Next.js includes built-in optimizations for images, fonts, and scripts, helping to improve your application's Core Web Vitals.
Automatic Code Splitting: It automatically splits your code into smaller bundles, reducing initial load times.

6. Better TypeScript Support

Improved Type Checking: Next.js provides better type checking and more efficient compilation, thanks to its custom TypeScript plugin and type checker.
Simplified Setup: TypeScript is pre-configured in Next.js projects, making it easier to get started.

Frontend Performace: What does Core Web Vitals, Profiler, Tree Shaking, SSR, SSG do.

Kashif Nehal — Fri, 06 Sep 2024 14:03:40 +0000

Frontend performance is a critical aspect of web development that directly impacts user experience. Slow-loading web pages can lead to frustration, decreased engagement, and even lost revenue. To optimize frontend performance, developers must understand various factors that influence page load times and responsiveness.

Core Web Vitals (CWV)

CWV is a set of metrics defined by Google to measure the user experience of a web page. These metrics include:

Largest Contentful Paint (LCP): Measures the perceived load time of the main content on the page.
First Input Delay (FID): Measures the time it takes for the page to become interactive after the user's first interaction.
Cumulative Layout Shift (CLS): Measures the visual stability of the page as elements shift around unexpectedly.

Profiler

A profiler is a tool that helps developers identify performance bottlenecks in their code. By measuring the time it takes for different parts of the code to execute, profilers can pinpoint areas that are causing slowdowns.

Tree Shaking

Tree shaking is a process that removes unused code from your JavaScript bundle. This can significantly reduce the size of your bundle and improve load times.

Server-Side Rendering (SSR)

SSR is a technique that renders web pages on the server instead of the client. This can improve perceived load times, as users see the content of the page immediately instead of waiting for it to be rendered by the browser.

Static Site Generation (SSG)

SSG is a technique that pre-renders web pages at build time. This can improve load times, as pages are served directly from the server as static files.

Examples of the Impact of CWV, Profiler, Tree Shaking, SSR, and SSG

Consider CWV:

Improved user experience: By optimizing for CWV, you can ensure that your web pages load quickly and are visually stable, leading to a better user experience.
Higher search engine rankings: Google uses CWV as a ranking factor, so optimizing for CWV can help your website appear higher in search results.

Not Consider CWV:

Decreased user experience: Slow-loading web pages can lead to frustration and decreased engagement.
Lower search engine rankings: Google may penalize websites with poor CWV scores.

Consider Profiler:

Identify performance bottlenecks: Profilers can help you pinpoint areas of your code that are causing slowdowns.
Optimize code: Once you've identified performance bottlenecks, you can take steps to optimize your code and improve performance.

Not Consider Profiler:

Performance issues: Without a profiler, it can be difficult to identify and address performance issues.

Consider Tree Shaking:

Reduced bundle size: Tree shaking can significantly reduce the size of your JavaScript bundle, improving load times.
Improved performance: Smaller bundle sizes lead to faster load times and better overall performance.
Not Consider Tree Shaking:

Increased bundle size: Unused code can increase the size of your JavaScript bundle, leading to slower load times.

Consider SSR:

Improved perceived load times: SSR can improve perceived load times, as users see the content of the page immediately instead of waiting for it to be rendered by the browser.
Better SEO: SSR can improve SEO, as search engines can crawl and index the content of your web pages more easily.

Not Consider SSR:

Slower initial load times: SSR can sometimes lead to slower initial load times, as the server needs to render the page before it can be sent to the client.

Consider SSG:

Improved load times: SSG can improve load times, as pages are served directly from the server as static files.
Better performance: SSG can lead to better overall performance, as there is no need for the server to render the page on each request.

Not Consider SSG:

Dynamic content: SSG is not suitable for websites with a lot of dynamic content that needs to be updated frequently.

React.js Security Best Practices: A Comprehensive Guide

Kashif Nehal — Fri, 30 Aug 2024 10:25:57 +0000

Security is paramount for any web application. As a developer building React.js applications, it's crucial to understand and implement best practices to protect your users' data and prevent vulnerabilities. This blog post will delve into common security threats and provide practical examples of how to mitigate them.

Cross-Site Scripting (XSS)

XSS attacks occur when malicious code is injected into a web page. This can lead to unauthorized access to user data, session hijacking, and other harmful consequences.

Example:

// Vulnerable component
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Prevention:

// Sanitize input using a library like DOMPurify
import DOMPurify from 'dompurify';

function Greeting({ name }) {
  const sanitizedName = DOMPurify.sanitize(name);
  return <h1>Hello, {sanitizedName}!</h1>;
}

Use code with caution.

Key points:

Always sanitize user-generated input before rendering it on the page.
Use a trusted library like DOMPurify for input sanitization.
Implement Content Security Policy (CSP) to restrict the resources a web page can load.

SQL Injection

SQL injection attacks occur when malicious SQL code is injected into a web application, allowing attackers to manipulate databases or steal sensitive data.

Example:

// Vulnerable component
function Search({ query }) {
  const sql = `SELECT * FROM users WHERE name = '${query}'`;
  // ...
}

Prevention:

// Use prepared statements with a database library like Knex.js
import Knex from 'knex';

function Search({ query }) {
  const knex = Knex({ /* ... */ });
  knex('users')
    .where('name', query)
    .then((results) => {
      // ...
    });
}

Key points:

Always use prepared statements or parameterized queries to prevent SQL injection.
Avoid concatenating user input directly into SQL queries.
Use a database library like Knex.js that provides built-in protection against SQL injection.

Insecure Direct Object References

Insecure direct object references occur when an application directly references objects in URLs or forms without proper authorization checks.

Example:


// Vulnerable component
function UserProfile({ userId }) {
  const url = `/users/${userId}`;
  // ...
}

Prevention:

// Use a server-side API to validate and retrieve user data
import axios from 'axios';

function UserProfile({ userId }) {
  axios.get(`/api/users/${userId}`)
    .then((response) => {
      const user = response.data;
      // ...
    })
    .catch((error) => {
      // Handle errors
    });
}

Key points:

Avoid directly exposing sensitive data in URLs or forms.
Use server-side validation to ensure that users have appropriate permissions before accessing resources.
Consider using a token-based authentication system to protect against unauthorized access. Missing Function Level Access Control

Missing function level access control occurs when an application fails to implement proper permissions checks at the function level.

Example:

// Vulnerable component
function AdminDashboard() {
  return (
    <div>
      {/* Sensitive data and actions */}
    </div>
  );
}

Prevention:


// Implement role-based access control
import { useAuth } from './AuthContext';

function AdminDashboard() {
  const { user } = useAuth();

  if (!user.isAdmin) {
    return <Redirect to="/" />;
  }

  return (
    <div>
      {/* Sensitive data and actions */}
    </div>
  );
}

Key points:


- Implement role-based access control (RBAC) to assign permissions based on user roles.
- Use authorization checks to verify that users have the necessary permissions before accessing sensitive resources.
- Follow the principle of least privilege, granting users only the minimum necessary permissions.

Cross-Site Request Forgery (CSRF)

CSRF attacks occur when a malicious website tricks a user into performing an unwanted action on a trusted site.

Example:


// Vulnerable form
<form action="/update-profile" method="POST">
  {/* ... */}
  <button type="submit">Update Profile</button>
</form>

Prevention:

// Use a CSRF token
import { useCSRFToken } from './CSRFContext';

function UpdateProfileForm() {
  const { csrfToken } = useCSRFToken();

  return (
    <form action="/update-profile" method="POST">
      <input type="hidden" name="csrfToken" value={csrfToken} />
      {/* ... */}
      <button type="submit">Update Profile</button>
    </form>
  );
}

Key points:

Use a CSRF token to verify that requests originate from the trusted site.
Store the CSRF token in a session cookie or hidden field.
Validate the CSRF token on the server-side before processing requests.
Additional Security Measures
Regular updates: Keep software and libraries up-to-date to address security vulnerabilities.
Strong passwords: Encourage users to use strong, unique passwords and enable multi-factor authentication.
Secure coding practices: Follow secure coding guidelines to prevent common vulnerabilities.
Security testing: Conduct regular security testing, including vulnerability assessments and penetration testing.
Incident response plan: Develop a comprehensive incident response plan to handle security breaches effectively.

Optimizing React and Next.js: Things to know about Performance, Security, and System Design

Kashif Nehal — Fri, 30 Aug 2024 10:12:13 +0000

Introduction

React and Next.js are powerful tools for building modern web applications. However, to ensure optimal performance, security, and scalability, it's crucial to address specific concerns. This blog post will explore key areas that can impact your project and provide practical solutions.

For Security Comprehensive guide: https://dev.to/kashifnehal/reactjs-security-best-practices-a-comprehensive-guide-4jjj

Performance Optimization

Code Splitting: Utilize Next.js's built-in code splitting to load only necessary components on demand, improving initial page load times.
Image Optimization: Employ Next.js's image optimization features to automatically resize and compress images, reducing file size and improving load times.
Data Fetching: Consider using getStaticProps or getServerSideProps to fetch data on the server side, enhancing SEO and reducing client-side rendering time.
Memoization: Implement memoization in React components to avoid unnecessary re-renders, especially for expensive calculations or data fetching.
Profiling: Use tools like React DevTools to identify performance bottlenecks and optimize accordingly.

Security Best Practices

Input Validation: Sanitize user input to prevent injection attacks like XSS and SQL injection.
Dependency Management: Keep dependencies up-to-date to address security vulnerabilities.
Secure API Interactions: Use HTTPS to protect sensitive data transmitted over the network.
Authentication and Authorization: Implement robust authentication and authorization mechanisms to control access to resources.
Security Headers: Set appropriate security headers like Content-Security-Policy and HTTP Strict Transport Security to mitigate risks.

System Design Considerations

Scalability: Design your application with scalability in mind. Consider using serverless functions or a content delivery network (CDN) for distributed content.
Error Handling: Implement proper error handling and logging to identify and address issues promptly.
Accessibility: Ensure your application is accessible to users with disabilities by following accessibility guidelines like WCAG.
Caching: Utilize browser caching and server-side caching to improve page load times and reduce server load.

Impact on Project and Organization

Neglecting performance, security, and system design can have significant consequences:

User Experience: Poor performance can lead to frustrated users and decreased engagement.
SEO: Slow loading times can negatively impact search engine rankings.
Security Breaches: Vulnerabilities can expose sensitive data and damage your organization's reputation.
Scalability Issues: A poorly designed application may struggle to handle increased traffic.
Increased Costs: Remediating performance or security issues can be costly and time-consuming.

Implementing Polyfills in JavaScript: A Quick Dive

Kashif Nehal — Sun, 18 Aug 2024 13:38:36 +0000

Polyfills are bits of code that make modern JavaScript features work in older browsers that don't support them. They help you use the latest features without worrying about breaking your site for users with outdated browsers.

Things to Keep in Mind Before creating a polyfill:

Check First: See if someone else has already made a polyfill for what you need. Libraries like core-js might already have it.
Don't Overwrite: Make sure your polyfill only runs if the browser doesn't support the feature. Use feature detection.
Keep It Fast: Polyfills can slow down your code. Write efficient polyfills and test performance.
Follow Standards: Stick to the official JavaScript specifications so your polyfill works correctly.

Simple Polyfills
Here are some basic polyfills you might need:

Array.prototype.map

if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
    const result = [];
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        result[i] = callback.call(thisArg, this[i], i, this);
      }
    }
    return result;
  };
}

Array.prototype.forEach


if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(callback, thisArg) {
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        callback.call(thisArg, this[i], i, this);
      }
    }
  };
}

Array.prototype.findIndex

if (!Array.prototype.findIndex) {
  Array.prototype.findIndex = function(predicate, thisArg) {
    for (let i = 0; i < this.length; i++) {
      if (predicate.call(thisArg, this[i], i, this)) {
        return i;
      }
    }
    return -1;
  };
}

String.prototype.charAt

if (!String.prototype.charAt) {
  String.prototype.charAt = function(index) {
    return this[index] || '';
  };
}

Promise

Here's a very basic Promise polyfill:

if (!window.Promise) {
  window.Promise = function(executor) {
    let state = 'pending';
    let value;
    const handlers = [];

    function resolve(result) {
      if (state !== 'pending') return;
      state = 'fulfilled';
      value = result;
      handlers.forEach(h => h());
    }

    function reject(error) {
      if (state !== 'pending') return;
      state = 'rejected';
      value = error;
      handlers.forEach(h => h());
    }

    this.then = function(onFulfilled, onRejected) {
      return new Promise((resolve, reject) => {
        handlers.push(() => {
          if (state === 'fulfilled') resolve(onFulfilled ? onFulfilled(value) : value);
          if (state === 'rejected') reject(onRejected ? onRejected(value) : value);
        });
      });
    };

    executor(resolve, reject);
  };
}

Conclusion:
Polyfills are handy for making sure your code works everywhere. Keep them simple, efficient, and check if a good one already exists before making your own.

How to Boost Your Website's Speed: A Quick dive

Kashif Nehal — Fri, 16 Aug 2024 19:12:05 +0000

Optimizing your website's frontend performance is crucial to ensuring a smooth and enjoyable user experience.

Key Parameters to Monitor
To effectively measure your website's performance, focus on the following metrics:

Page Load Time: The total time it takes for a page to load completely.
Time to First Byte (TTFB): The time it takes for the first byte of data to arrive from the server.
First Contentful Paint (FCP): The time it takes for the browser to render any content on the page.
Largest Contentful Paint (LCP): The time it takes for the largest content element on the page to load.
Interactive: The point at which the page is fully interactive and responsive to user input.
Cumulative Layout Shift (CLS): A measure of visual stability, indicating how much content moves unexpectedly.

Tools to Verify Performance
Several tools can help you measure and analyze your website's performance:

Google Lighthouse: A built-in Chrome DevTools audit that provides actionable insights.
Google PageSpeed Insights: Offers detailed performance recommendations.
WebPageTest: Allows for in-depth performance testing from different locations.
Chrome DevTools Performance Panel: Provides real-time performance data during development.

Frontend Development Best Practices
To achieve optimal performance, consider these essential practices:

Optimize Images: Compress images without sacrificing quality, use appropriate formats (JPEG, PNG, WebP), and implement lazy loading.
Minify Files: Reduce the size of HTML, CSS, and JavaScript files by removing unnecessary characters.
Leverage Browser Caching: Store static assets in the browser's cache to reduce load times.
Reduce HTTP Requests: Combine files, use CSS sprites, and minimize external resources.
Optimize Fonts: Use font formats like WOFF2, and consider font preloading.
Prioritize Visible Content: Load above-the-fold content first.
Code Splitting: Break down JavaScript code into smaller chunks to improve load times.
Choose Efficient Frameworks: Select lightweight frameworks that prioritize performance.
Test Across Devices: Ensure your website performs well on different screen sizes and devices.
Continuous Monitoring: Regularly track performance metrics and make necessary optimizations.

Reconciliation: How Reconciliation work

Kashif Nehal — Sat, 03 Aug 2024 18:29:05 +0000

Understanding the Challenge

Directly manipulating the DOM is slow. Every change, no matter how small, triggers a repaint or reflow, impacting performance.

React's Solution: The Virtual DOM

React addresses this by creating a virtual representation of the UI, called the Virtual DOM. This in-memory copy is cheaper to manipulate.

The Reconciliation Process

When a component's state or props change, React creates a new Virtual DOM. It then compares this new version with the old one using a diffing algorithm.

Diffing Algorithm: This algorithm efficiently identifies the minimal set of changes required to update the real DOM.
DOM Updates: Based on the diff, React applies only the necessary changes to the actual DOM, optimizing performance.

Example:

Consider a list of items:

const items = ['apple', 'banana', 'orange'];

Initially, React creates a Virtual DOM representing this list. If we add 'grape' to the list, a new Virtual DOM is created. The diffing algorithm will:

Identify that a new item has been added.
Create a new DOM element for 'grape'.
Append this new element to the DOM efficiently.

Key Points to Remember:

React's reconciliation process significantly improves performance.
The Virtual DOM is a key concept in understanding React's efficiency.
Diffing algorithms are optimized to minimize DOM manipulations.

Understanding the Virtual DOM in Detail

We've established that React uses a virtual DOM to optimize updates. But what exactly is it?

The Virtual DOM is essentially a JavaScript object tree representing the UI. It's a lightweight representation of the actual DOM, making it cheaper to manipulate. When a component's state or props change, React creates a new Virtual DOM tree and compares it to the previous one using a diffing algorithm.

The Diffing Algorithm Under the Hood

React's diffing algorithm is highly optimized to perform efficiently. Key points include:

Tree Reconciliation: React compares the structure of the two Virtual DOM trees. It starts at the root and recursively compares child elements.
Component Identity: Components with different types are treated as completely different, and their children are ignored.
List Reconciliation: For lists, React uses a heuristic to determine the most efficient way to update the DOM. It attempts to reuse existing DOM elements whenever possible.
Key Optimization: Using unique keys for list items is crucial for efficient reconciliation. React uses keys to identify which items have changed, moved, or been added/removed.

JavaScript Engine and Performance

While React handles the high-level reconciliation process, the underlying JavaScript engine plays a vital role in performance.

Object Comparison: The diffing algorithm involves comparing JavaScript objects. Modern JavaScript engines have optimized object comparison, contributing to performance.
Memory Management: Efficient memory management by the JavaScript engine is crucial for preventing performance bottlenecks.
Just-in-Time (JIT) Compilation: Many JavaScript engines use JIT compilation to optimize code execution, including React's reconciliation process.

Beyond the Basics

To further optimize your React applications, consider these additional factors:

ShouldComponentUpdate: For performance-critical components, implement shouldComponentUpdate to prevent unnecessary re-renders.
Immutable Data Structures: Using immutable data structures can help with performance optimization, as they can be compared efficiently.
Memoization: Memoize pure components to avoid redundant calculations.
Profiling: Use React's built-in profiling tools to identify performance bottlenecks.

By understanding how React reconciliation works under the hood, you can make informed decisions about optimizing your applications.

Conclusion

React's reconciliation process is a powerful tool for building performant user interfaces. By understanding the core concepts and utilizing best practices, you can create efficient and responsive applications.