Forem: aryan015

How to Write Your Own Static File Server in Pure Node.js

aryan015 — Mon, 17 Nov 2025 07:53:29 +0000

Prerequisites 💻

A computer (Windows, macOS, or Linux)
Node.js installed
About 5 minutes of your time

How-to 🎬

Create a project folder (i.e. node-project)
Create public folder inside you node-project folder
Inside your public create index.html and style.css
Paste below content on your index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aryan – Freelance Developer</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <h1>Hello, I'm Aryan Khandelwal — a freelance developer from India 🇮🇳</h1>

        <p>I help businesses build fast, modern, and scalable web applications.
            My key services include:</p>

        <ul>
            <li>ReactJS / RemixJS Development</li>
            <li>Node.js / Express.js APIs</li>
            <li>WordPress Websites & Custom Themes</li>
            <li>Full-stack Development & Consulting</li>
            <li>AWS Lambda & Serverless Applications</li>
            <li>AWS S3 Static Hosting & File Storage</li>
            <li>AWS CloudFront CDN Setup</li>
            <li>AWS EC2 Deployment & Optimization</li>
        </ul>

        <p class="cta">
            You can contact me here
            <a href="mailto:aryankhandelwal15@gmail.com">email</a>
        </p>
        <p class="cta">
            Visit my portfolio:
            <a href="https://aryankhandelwal.in" target="_blank">website</a>
        </p>
    </div>
</body>

</html>

Paste Below css in your style.css file

body {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  margin: 0;
  padding: 0;
  color: #222;
}

.container {
  max-width: 700px;
  margin: 60px auto;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

h1 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.6;
}

ul {
  margin-top: 12px;
}

ul li {
  margin-bottom: 8px;
}

a {
  color: #0066ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.cta {
  margin-top: 20px;
  font-weight: bold;
}

Create a two files main.js and static.js inside your root folder (ie. node-project)
Put below code inside static.js. (It is just a Bare minimum code to start with)

const fs = require('fs')
const path = require('path')
function static(req, res, public) {
    const files = fs.readdirSync(public)
    let obj = {}
    for (let file of files) {
        if (req.url == '/') {
            obj.filePath = public + 'index.html'
            obj.contentType = "text/html"
            break;
        }
        else if ('/' + file == req.url) {
            obj.filePath = public + file
            const extname = String(path.extname(public + file)).toLowerCase();
            switch (extname) {
                case '.js':
                    obj.contentType = 'text/javascript';
                    break;
                case '.css':
                    obj.contentType = 'text/css';
                    break;
                case '.json':
                    obj.contentType = 'application/json';
                    break;
                case '.png':
                    obj.contentType = 'image/png';
                    break;
                case '.jpg':
                    obj.contentType = 'image/jpg';
                    break;
                case '.gif':
                    obj.contentType = 'image/gif';
                    break;
                case '.svg':
                    obj.contentType = 'image/svg+xml';
                    break;
            }
        }
    }
    if (obj.contentType && obj.filePath) {
        let readS = fs.createReadStream(obj.filePath)
        res.writeHead(200, { "Content-type": obj.contentType })
        readS.pipe(res)
    }
    else {
        res.writeHead(404, { "Content-type": "text/html" })
        res.write("<h1>Not found</h1>")
        res.end()
    }
}

module.exports = static

Again put mention code to main.js

const http = require('http')
const static = require('./app')


http.createServer((req, res) => {
    static(req, res, './public/')
}).listen(3000)

Now It is time to run our server

node main.js

Conclusion 🗒️

Never resort to this approach. 💀
Always use backend framework for better optimization. 🚁
keep learning !!! 🦸

Social

Support me 🐣

What Do You Mean by Open Source LLM? 💡

aryan015 — Mon, 23 Jun 2025 09:08:44 +0000

An Open Source LLM (Large Language Model) refers to a machine learning model trained to understand and generate human-like language, whose codebase, model weights, or both are publicly accessible and can be used, modified, or distributed by anyone under a permissive license.

🔐 Key Characteristics

Transparency
The architecture, training data (or a description of it), and model behavior are open for examination.
Accessibility
Anyone can download and run the model locally or on the cloud, depending on system requirements.
Modifiability
Developers and researchers can fine-tune or adapt the model for specific tasks.
License Freedom
Open source LLMs usually come with licenses like Apache 2.0, MIT, or Creative Commons that allow broad reuse.

🚀 Popular Open Source LLMs

Meta’s LLaMA (with some usage restrictions)
Mistral
Falcon by TII
Bloom by BigScience
OpenLLaMA

📝 Why Open Source LLMs Matter

Democratization of AI: Lowers the barrier for individuals and organizations to access powerful models.
Research & Innovation: Accelerates progress by enabling reproducibility and community contributions.
Customization: Businesses can build domain-specific tools without depending on proprietary vendors.

🔎 Open Source vs Closed Source LLMs

Feature	Open Source LLM	Closed Source LLM
Access	Public	Restricted
Customization	Full	Limited or None
Licensing	Permissive	Proprietary
Example	Mistral, Bloom	GPT-4, Claude, Gemini

In summary, an Open Source LLM provides transparency, adaptability, and community-driven innovation. It empowers developers, startups, and researchers to integrate or enhance AI capabilities freely.

How CPU Interacts with GPU 🕹

aryan015 — Mon, 23 Jun 2025 08:35:42 +0000

The CPU interacts with the GPU through the system's bus (usually PCIe) and driver-level APIs. Here's a breakdown of the process:

🔄 How the Interaction Happens:

CPU Prepares Work

Runs the main game or application logic.
Determines what needs to be rendered (e.g., scene, camera angle, models).

Sends Commands to GPU

Uses graphics APIs like:
- DirectX (Windows)
- OpenGL / Vulkan
- Metal (macOS)
These APIs translate CPU intentions into GPU-friendly instructions.

Data Transfer via PCIe

CPU sends:
- Textures
- Geometry (models, vertices)
- Shaders
- Instructions
All transferred over the PCIe bus into the GPU's VRAM.

GPU Executes Tasks

GPU receives and processes rendering tasks in parallel.
Uses thousands of cores to efficiently compute visuals.

Result Output to Display

GPU sends the final rendered frame to the display via HDMI or DisplayPort.

Summary:

CPU = Director: Plans and instructs.
GPU = Worker: Executes rendering and parallel computations.
Communication relies on PCIe bus and graphics APIs.

Why Do Companies Like Zotac, Gigabyte, and PowerColor Rebrand NVIDIA/AMD GPUs? 📷

aryan015 — Sat, 21 Jun 2025 03:14:55 +0000

💡 The Core Fact:

Only two companies in the world design and manufacture the actual GPU chips:

NVIDIA (e.g., AD104, GA102)
AMD (e.g., Navi 31, Navi 33)

These chips are called GPU dies and are the heart of any graphics card.

🏠 Enter AIBs (Add-In Board Partners):

Companies like Zotac, Gigabyte, MSI, ASUS, PowerColor, etc. are known as AIB partners. They buy the GPU chips from NVIDIA or AMD and then design and build the actual graphics card you buy.

⚙️ What AIB Partners Actually Do:

Task	Description
Custom PCB	Design power delivery, VRMs, and memory layout
Cooling System	Add fans, heatsinks, and thermal pads for cooling
Overclocking	Apply factory overclocks or custom BIOS settings
Aesthetics	Add RGB lighting, backplates, and branding
Support/Warranty	Provide after-sales service, packaging, and regional support

↺ Real-World Example:

NVIDIA makes the RTX 4060 chip
Gigabyte uses it to build the Gigabyte RTX 4060 Windforce OC, which may feature:
- Dual fans
- Factory overclock
- RGB lighting
- Custom cooling and aesthetics

🤔 Why This Model Exists:

Lets NVIDIA/AMD focus on R&D and chip production
Offers variety for consumers (silent, RGB, compact, liquid-cooled versions)
Encourages competition between AIBs, which lowers prices and increases innovation

✅ Summary:

Role	Company
GPU Chip Design & Production	NVIDIA / AMD
Graphics Card Assembly & Customization	Zotac, Gigabyte, ASUS, MSI, PowerColor, etc.

This division of roles results in more choices, better cooling options, and different pricing tiers for the same GPU chip.

Sanity (Headless) CMS Overview

aryan015 — Thu, 17 Apr 2025 04:12:11 +0000

Sanity is a powerful headless CMS that gives developers full control over content structure, frontend frameworks, and backend management. It separates content management from content presentation, making it ideal for modern web development workflows.

🧠 Backend: Structured Content and APIs

Sanity’s backend is built around the concept of structured content, defined using a simple schema in JavaScript. Here's how it manages the backend:

1. Content Studio

Sanity provides a customizable React-based admin interface called Sanity Studio.
Developers define schemas for content types like posts, authors, and categories.
Content editors use this studio to input and manage data in a structured format.

2. GROQ (Graph-Relational Object Queries)

Sanity uses GROQ, a query language designed for JSON-based content.
Developers query content efficiently for use in any frontend or backend system.

3. Sanity API

All content is accessible via real-time APIs (REST or GraphQL).
APIs return structured JSON, making it easy to use across different applications.

4. Webhooks and Real-Time Updates

Sanity supports webhooks for triggering builds or syncing with other services.
Real-time content updates allow instant previews and collaboration.

🎨 Frontend: Flexibility and Framework Freedom

Sanity doesn't lock you into a specific frontend. You can use any framework you prefer—React, Next.js, Vue, Svelte, etc.

1. Portable Text

Rich text content is stored in a portable format, allowing precise rendering control on the frontend.
Developers can define how each content block should render, offering complete design flexibility.

2. Framework Integration

Popular starter templates and toolkits are available for Next.js, Nuxt, and Gatsby.
Sanity's APIs integrate smoothly with frontends via SDKs or direct HTTP calls.

3. Live Preview and Real-Time Collaboration

Sanity supports live preview setups where editors can see changes immediately.
Great for teams working on content-heavy sites with dynamic components.

🔄 Summary

Sanity acts as a central content hub with:

Backend: Customizable schema, real-time APIs, and structured content storage.
Frontend: Freedom to use any framework, with support for rich text rendering and instant updates.

This makes Sanity ideal for JAMstack, content-heavy applications, and teams who want maximum control over how content is created and displayed.

What is OpenAI.fm?

aryan015 — Thu, 17 Apr 2025 04:03:16 +0000

OpenAI.fm is an interactive platform developed by OpenAI that allows users to convert text into natural-sounding speech using advanced AI models. It leverages OpenAI's latest text-to-speech technologies, including models like GPT-4o-mini-TTS, to generate realistic and expressive audio outputs.

Key Features:

Real-Time Voice Generation: Convert text to speech instantly with natural intonation.
Diverse Voice Options: Choose from various voices such as Alloy, Ash, Ballad, Coral, Echo, Fable, Nova, Sage, Shimmer, and Verse.
Emotional Tone Detection: Adjust the emotional tone of the speech to match the context, with styles like Dramatic, Sports Coach, Mad Scientist, Auctioneer, and Connoisseur.
Multilingual Support: Generate audio in multiple languages and accents.
Flexible Input Options: Accepts raw text or TXT files for conversion.
Zero Data Retention: Ensures privacy by automatically deleting text and audio post-processing.
API Access: Provides an API for developers to integrate text-to-speech functionality into their applications.

Use Cases:

Educational Enhancement: Create audio narrations for course materials to improve accessibility and cater to different learning styles.
Voice Assistant Development: Power voice assistants with natural-sounding, conversational interactions.
Podcast Creation: Generate voiceovers for podcast episodes with various emotional tones to enhance storytelling.

You can explore and use OpenAI.fm for free by visiting their official website: openai-fm.com.

How to shut down a windows computer😁

aryan015 — Wed, 02 Apr 2025 04:45:37 +0000

1. Press `ctrl` + `r`

2. Type `shutdown /s /t 0` for instant shutdown

3. Type `shutdown /r /t 0` for instant restart

4. Type `showdown /s /t 60` for shutdown after 60s

5. Type `showdown /r /t 60` for restart after 60s

6. Type `showdown /a` terminate schedule shutdown

How to serve PHP without Apache Distribution 🎅

aryan015 — Tue, 01 Apr 2025 01:01:09 +0000

Some people might know that PHP comes with build in server

php -S localhost:8000

note: But you will still need xampp 😆 for working with DB

Difference Between REST API and Normal API

aryan015 — Tue, 25 Mar 2025 14:16:24 +0000

🚀 1. 🔥 What is a Normal API?

API (Application Programming Interface) is a generic term for any set of functions or methods that allow applications to communicate with each other.
It can be:
- Local or remote.
- Can use any protocol (HTTP, TCP, UDP, etc.).
Not restricted to web-based communication.
Examples:
- Library API: Python’s math.sqrt() function.
- Database API: MySQL Connector for interacting with a database.
- System API: Linux system calls like read() or write().
- Hardware API: DirectX for rendering graphics.

🔥 2. ⚙️ What is a REST API?

REST (Representational State Transfer) is a specific type of web API.
It follows the RESTful architecture and uses HTTP methods to interact with resources.
REST APIs:
- Use stateless communication (each request is independent).
- Use standard HTTP methods:
  - GET → Retrieve data.
  - POST → Create new data.
  - PUT/PATCH → Update existing data.
  - DELETE → Remove data.
- Use JSON or XML for data exchange.
Examples:
- GitHub REST API: To access GitHub data over HTTP.
- OpenWeather API: For weather data retrieval.
- Stripe API: For payment processing.

⚙️ 3. Key Differences:

Feature	Normal API	REST API
Scope	Generic term for all APIs	Specific type of web API
Protocol	Uses any protocol (TCP, UDP, etc.)	Uses HTTP/HTTPS only
State management	Can be stateful or stateless	Stateless by design
Data format	Any format (binary, JSON, XML)	Mostly JSON or XML
Methods	Varies (no fixed methods)	Uses standard HTTP methods
Communication	Local or remote	Web-based (remote) communication
Example	File System API, Database API	GitHub, Stripe, AWS S3 REST API

✅ 🔥 Final Takeaway:

Normal API: A broad term covering all APIs (local, web, database, etc.).
REST API: A specific type of web API that uses HTTP and follows RESTful principles.
All REST APIs are APIs, but not all APIs are RESTful. 🚀

Creating an AWS Lambda Function Using Serverless Framework

aryan015 — Mon, 24 Mar 2025 10:01:18 +0000

🔥 What is AWS Lambda?

AWS Lambda is a serverless compute service that lets you run code without managing servers. You simply upload your code, and Lambda automatically handles the infrastructure, scaling, and execution.

🛠️ Benefits of Using Serverless Framework

The Serverless Framework is a powerful open-source tool that simplifies the process of creating and managing AWS Lambda functions.

✅ Key Advantages

Simplifies Deployment: Easily deploy Lambda functions with simple commands.
Infrastructure as Code: Use the serverless.yml file to define infrastructure and configuration.
Supports Multiple Providers: AWS, Azure, Google Cloud, etc.
Built-in Support: Manages API Gateway, DynamoDB, S3, and other AWS services.

🔥 1. Install Serverless Framework

First, install the Serverless CLI globally using npm:

npm install -g serverless

Verify the installation:

serverless --version

🛠️ 2. Create a New Serverless Project

Generate a new Serverless project with AWS as the provider:

serverless create --template aws-nodejs --path my-lambda-function

aws-nodejs → AWS Lambda with Node.js runtime.
my-lambda-function → Your project folder name.

Go into the project directory:

cd my-lambda-function

🔧 3. Install Dependencies

Install the necessary dependencies:

npm install

🌐 4. Configure AWS Credentials

If you haven’t already, configure your AWS credentials:

serverless config credentials --provider aws --key <AWS_ACCESS_KEY> --secret <AWS_SECRET_KEY>

✅ Get your access key and secret key from AWS IAM.

🛠️ 5. Edit `serverless.yml` Configuration

Open the serverless.yml file and define your Lambda function:

service: my-lambda-service

provider:
  name: aws
  runtime: nodejs18.x
  region: us-east-1

functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: hello
          method: get

✅ Explanation:

service: Name of your Lambda service.
provider: AWS settings, including the region and runtime.
functions: The Lambda function definition.
events: Triggering the Lambda through an HTTP request.

🔥 6. Write the Lambda Function

Open the handler.js file and add the following code:

module.exports.hello = async (event) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: "Hello from Lambda!",
      input: event,
    }),
  };
};

✅ This function returns a simple JSON response.

🚀 7. Deploy the Lambda Function

Deploy your Lambda function to AWS:

serverless deploy

Once deployed, you’ll see the API Gateway endpoint:

Service deployed to: https://<your-api-id>.execute-api.<region>.amazonaws.com/dev/hello

🌐 8. Test the Lambda Function

You can test the function using:

curl https://<your-api-id>.execute-api.<region>.amazonaws.com/dev/hello

Or:

serverless invoke -f hello

⚙️ 9. Cleaning Up

To remove the Lambda function and free up resources:

serverless remove

✅ Key Takeaways

Serverless Framework simplifies AWS Lambda deployment.
Automatic Scaling: No need to manage infrastructure.
Cost-Efficient: You only pay for what you use.
Quick Deployment: Easily create and deploy Lambda functions with minimal configuration.

🚀 Next Steps

Add more Lambda functions.
Integrate with AWS services like S3, DynamoDB, and API Gateway.
Optimize and secure your serverless functions.

Redis: A Powerful In-Memory Data Store

aryan015 — Tue, 18 Mar 2025 06:55:17 +0000

Introduction

Redis (Remote Dictionary Server) is an open-source, in-memory data store that functions as a key-value database, cache, and message broker. Known for its lightning-fast performance, Redis is widely used in real-time applications, such as gaming leaderboards, session storage, and caching frequently accessed data. With support for multiple data structures and atomic operations, Redis has become a go-to solution for enhancing application performance and scalability.

Key Features of Redis

1. In-Memory Storage

Redis stores all data in RAM, making it extremely fast with low latency.
Ideal for caching and real-time analytics.

2. Data Structures

Redis supports a variety of data types:
- Strings: SET, GET
- Lists: LPUSH, LRANGE
- Hashes: HSET, HGET
- Sets: SADD, SREM
- Sorted Sets: ZADD, ZREM
- Bitmaps, HyperLogLogs, and Streams.

3. Persistence

Despite being in-memory, Redis offers persistence using:
- RDB (Redis Database): Snapshots of data saved at regular intervals.
- AOF (Append Only File): Logs every write operation for durability.

4. Replication & Clustering

Redis supports master-slave replication, enabling read scalability.
Redis Cluster allows horizontal scaling by partitioning data across multiple nodes.

5. Pub/Sub Messaging

Redis provides a Publish/Subscribe (Pub/Sub) mechanism, making it suitable for event notification systems and real-time communication.

Use Cases of Redis

✅ Caching

Redis is commonly used as a cache layer in web applications to reduce database load.
Example: Caching API responses or session data.

✅ Session Management

Storing user sessions for faster authentication in web apps.
Example: Storing JWT tokens or temporary authentication data.

✅ Rate Limiting

Redis helps implement rate limiting by tracking the number of requests from a user within a time frame.
Example: Preventing API abuse by limiting requests.

✅ Real-Time Analytics

Redis processes large volumes of data quickly, making it suitable for real-time analytics.
Example: Tracking page views or clicks on a website.

✅ Message Queues

Redis serves as a lightweight message broker.
Example: Delayed job execution or task queues.

Redis vs. Other Databases

Feature	Redis	Memcached	MongoDB
Storage Type	In-memory	In-memory	Disk (document-based)
Persistence	RDB, AOF	No persistence	Fully persistent
Data Structures	Strings, Lists, Sets	Strings	Documents
Replication	Master-slave, Cluster	Multi-threaded architecture	Replica sets
Use Case	Cache, Session store	Cache only	NoSQL database

Redis Commands and Examples

🔥 Set and Get a Key:

SET username "Aryan"
GET username

🔥 Increment and Decrement:

INCR counter    # Increments by 1
DECR counter    # Decrements by 1

🔥 List Operations:

LPUSH students "John" "Alice"  # Add elements to the list
LRANGE students 0 -1           # Retrieve all elements

🔥 Hash Operations:

HSET user:1001 name "Aryan" age "25"
HGET user:1001 name

🔥 Expiration and TTL:

SET session:1234 "active"
EXPIRE session:1234 60   # Expires after 60 seconds
TTL session:1234         # Check time-to-live

Benefits of Redis

✅ Speed: In-memory operations result in blazing-fast read/write speeds.

✅ Flexibility: Supports multiple data types for versatile use cases.

✅ Scalability: Easy to scale horizontally with Redis Cluster.

✅ Reliability: Offers persistence through snapshots and logs.

✅ Simplicity: Easy to use with simple and consistent commands.

Challenges and Limitations

❌ Memory-Intensive: As an in-memory database, Redis requires large amounts of RAM for bigger datasets.

❌ Limited Query Capabilities: Lacks the complex querying features of traditional RDBMS.

❌ Persistence Trade-off: While Redis supports persistence, it is not as robust as disk-based databases.

❌ Single-threaded Performance: Although Redis handles multiple connections concurrently, it uses a single-threaded model, which can be a bottleneck under heavy CPU-bound operations.

Conclusion

Redis is a powerful in-memory data store that offers blazing-fast performance and versatility. Whether used for caching, message queues, or real-time analytics, Redis significantly boosts application performance. Its simplicity, speed, and support for various data structures make it a valuable tool in modern web and cloud-based applications.

🔥 Have you used Redis in your projects? Share your experience in the comments!

Static Site Generation (SSG) vs. Incremental Static Regeneration (ISR) in Modern Web Development

aryan015 — Sun, 16 Mar 2025 03:31:27 +0000

When building web applications, performance and scalability are critical. Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are two powerful techniques that help developers create fast, SEO-friendly, and efficient web experiences.

In this blog, we’ll explore SSG and ISR, how they work, their advantages, and when to use each.

What is Static Site Generation (SSG)?

Static Site Generation (SSG) is a method where HTML pages are generated at build time and served as static files. These pre-rendered pages ensure fast loading speeds and improved SEO.

How SSG Works?

At build time, the framework generates static HTML pages from dynamic content.
These static pages are deployed to a CDN or hosting service.
When a user requests a page, it is served instantly without any server processing.

Pros of SSG:

✅ Super Fast Performance – Pages are pre-built and served instantly.
✅ Better SEO – Search engines can easily crawl and index pages.
✅ Reduced Server Load – No need to process requests dynamically.
✅ Works Offline – Since the pages are static, they can be cached for offline access.

Cons of SSG:

❌ Slow Build Times – If the site has many pages, builds can take longer.
❌ Not Suitable for Frequently Changing Data – Since pages are built once, updates require a full rebuild.

Common Use Cases for SSG:

Blogs and News Websites
Marketing & Landing Pages
Documentation Sites (e.g., Next.js, Docusaurus)
Portfolio Websites

🛠 Popular Frameworks for SSG:

Next.js
Gatsby
Hugo
Jekyll

What is Incremental Static Regeneration (ISR)?

Incremental Static Regeneration (ISR) is an advanced version of SSG that allows real-time updates to static pages without rebuilding the entire site. This means that you can get the performance benefits of SSG while still handling dynamic content updates efficiently.

How ISR Works?

The site is initially generated at build time like SSG.
When a user requests a page, it serves the pre-rendered static version.
If the page needs to be updated, the framework regenerates it in the background and caches the new version for future requests.

Pros of ISR:

✅ Faster Builds – Only specific pages are updated instead of the whole site.
✅ Handles Dynamic Content – Content updates can be reflected without redeploying.
✅ Improved Performance – Users always get a cached version while updates happen asynchronously.
✅ Ideal for Large Websites – Useful for e-commerce sites, news platforms, or apps with frequent content changes.

Cons of ISR:

❌ Slightly Slower Initial Request – If the page is being regenerated, the first user might experience a delay.
❌ Complex Caching – Requires proper cache invalidation strategies.

Common Use Cases for ISR:

News Websites (frequent updates)
E-commerce Stores (product availability changes)
Real-time Event Listings
Large Blogs with Many Posts

🛠 Popular Framework for ISR:

Next.js (with revalidate property in getStaticProps)

SSG vs. ISR: Key Differences

Feature	SSG (Static Site Generation)	ISR (Incremental Static Regeneration)
Performance	🚀 Extremely Fast	⚡ Fast with occasional delays
SEO-Friendly	✅ Yes	✅ Yes
Handles Dynamic Data	❌ No (requires full rebuild)	✅ Yes (updates pages without full rebuild)
Build Time	⏳ Can be slow for large sites	🕒 Faster since pages regenerate incrementally
Best For	Static content (blogs, portfolios, docs)	Frequently updated content (news, e-commerce)

When Should You Use SSG or ISR?

Use SSG if your content is mostly static and does not change frequently (e.g., blogs, portfolios, marketing pages).
Use ISR if your website has frequent updates but you still want static-like performance (e.g., e-commerce, news sites).

Final Thoughts

Both SSG and ISR are powerful techniques that optimize speed, SEO, and scalability. If you're using Next.js, you can combine both approaches to get the best of performance and flexibility.

Which approach do you prefer for your web projects? Let me know in the comments! 🚀