Traditional methods often rely on server sessions and cookies. Those work, but they don’t always scale well, especially when you’re building APIs or mobile apps that talk to multiple services. This is why JWTs, or JSON Web Tokens, are useful. They’re small, self-contained tokens that can carry user data safely between a client and a server.

JWTs make it easy to verify users without constantly checking a database – but they also expire fast to reduce risk. To keep users logged in without forcing them to sign in again every few minutes, we use something called a refresh token. It’s a separate, long-lived token that can request new access tokens when the old ones expire.

In this guide, we’ll walk through how to build a secure authentication system using JWTs and refresh tokens. You’ll learn how to generate tokens, validate them, handle expiry, and keep everything safe from common security threats.

Table of Contents

1. Understanding JWTs (JSON Web Tokens)

2. Setting Up the Project

3. How to Implement JWT Authentication

4. How to Verify JWTs and Protect Routes

5. Refresh Tokens and Rotation

6. Conclusion

Understanding JWTs (JSON Web Tokens)

A JWT, short for JSON Web Token, is a compact way to share information between a client and a server. It’s often used to prove that a user is who they say they are. The token is created on the server after a user logs in and is then sent back to the client. The client then includes this token with each request, so the server knows who is making the call.

A JWT has three parts: a header, a payload, and a signature.

• The header usually tells the system which algorithm was used to sign the token.

• The payload contains the data, such as the user’s ID or role.

• The signature is the part that keeps everything secure. It’s created by hashing the header and payload with a secret key.

Once created, a JWT looks like a long string of random characters separated by dots. When the client sends it back to the server, the server verifies the signature using the same secret key. If it matches, the request is trusted.

One of the main benefits of JWTs is that they are stateless. The server doesn’t need to store session data. Everything needed to verify the user is already inside the token. This makes them fast and easy to use in modern APIs and microservices.

JWTs do have a downside: they cannot be revoked easily once issued. If a token is stolen, the attacker can use it until it expires. This is why short token lifetimes matter. It’s also why refresh tokens exist.

In the next section, we’ll finish the basic JWT setup. After that, we’ll add refresh tokens in “Refresh Tokens and Rotation.” That part shows how to handle expiry without making users log in again.

Setting Up the Project

Before writing any code, let’s set up a simple backend where we can build and test our authentication system. For this guide, we’ll use Node.js with Express, since it’s lightweight and easy to follow. You can use any stack later once you understand the flow.

Prerequisites

Make sure you have:

• Node.js and npm installed

• A text editor (VS Code works great)

• Basic knowledge of JavaScript and APIs

1. Initialize the Project

Create a new folder and open it in your terminal.

mkdir jwt-auth-demo
cd jwt-auth-demo
npm init -y

This creates a package.json file that will track your dependencies.

2. Install Dependencies

You’ll need a few packages to get started:

• express: the web framework

• jsonwebtoken: to create and verify tokens

• bcryptjs: to hash passwords

• dotenv: to manage environment variables

Install them all at once like this:

npm install express jsonwebtoken bcryptjs dotenv

If you want auto-reloading while developing, install nodemon as a dev dependency:

npm install --save-dev nodemon

3. Project Structure

Here’s a clean structure to keep things organized:

jwt-auth-demo/
│
├── server.js
├── .env
├── package.json
│
├── config/
│   └── db.js
│
├── middleware/
│   └── auth.js
│
├── routes/
│   └── auth.js
│
└── models/
    └── user.js

4. Basic Express Setup

In server.js, start with a minimal Express server.

require('dotenv').config();
const express = require('express');
const app = express();

app.use(express.json());

app.get('/', (req, res) => {
  res.send('JWT Auth API running');
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

You can now run it using:

node server.js

or, if you’re using nodemon:

npx nodemon server.js

If everything is set up correctly, visiting http://localhost:5000 should display “JWT Auth API running”:

How to Implement JWT Authentication

Now that your server is up, let’s add real authentication. We’ll start with user registration, password hashing, and login. Each user will get a token after logging in, which they can use to access protected routes.

1. Set Up the User Model

We’ll store users in a simple database. For this demo, let’s use MongoDB with Mongoose, since it’s quick to set up and easy to scale later.

Install the required packages:

npm install mongoose

Then create models/user.js:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true }
});

module.exports = mongoose.model('User', userSchema);

We store users with a unique email and a hashed password. The database never sees the raw password. Hashing makes stolen data harder to use.

2. Connect to MongoDB

Inside config/db.js:

const mongoose = require('mongoose');

const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI);
    console.log('MongoDB connected');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;

mongoose.connect reads the connection string from .env. If the connection fails, we exit the process so we don’t continue in a broken state.

Update your server.js to include the connection:

const connectDB = require('./config/db');
connectDB();

And don’t forget to add your MongoDB URI in the .env file:

MONGO_URI=mongodb+srv://yourusername:yourpassword@cluster.mongodb.net/auth
JWT_SECRET=your_jwt_secret_key

3. Create Registration and Login Routes

In routes/auth.js:

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/user');

const router = express.Router();

// Register a new user
router.post('/register', async (req, res) => {
  try {
    const { username, email, password } = req.body;

    const existingUser = await User.findOne({ email });
    if (existingUser) return res.status(400).json({ message: 'User already exists' });

    const hashedPassword = await bcrypt.hash(password, 10);

    const newUser = new User({ username, email, password: hashedPassword });
    await newUser.save();

    res.status(201).json({ message: 'User created successfully' });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

// Login and issue JWT
router.post('/login', async (req, res) => {
  try {
    const { email, password } = req.body;

    const user = await User.findOne({ email });
    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const payload = { id: user._id, email: user.email };

    const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '15m' });

    res.json({ token });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

module.exports = router;

Add it to your server in server.js:

const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);

4. Test It Out

You can now test these routes using Postman or Insomnia.

Send a POST request to /api/auth/register with a JSON body:

{
  "username": "demoUser",
  "email": "demo@email.com",
  "password": "mypassword"
}

The register route checks for an existing user by email. It hashes the password with a cost factor of 10 and then returns a 201 on success. We don’t log the password or include it in the response.

Then log in at /api/auth/login to receive a JWT.

The login route finds the user by email and compares the password with bcrypt.compare. If it matches, we sign a token with a small payload: the user ID and email. The JWT_SECRET signs the token so the server can verify it later. The expiresIn: '15m' setting keeps the token short-lived to limit risk. The response only includes the token. User data can be fetched from a protected route.

Once you get the token, copy it, you’ll use it to access protected routes later.

How to Verify JWTs and Protect Routes

Now that login returns a token, we should verify it on each request that needs auth. We will write a small middleware that checks the Authorization header, validates the token, and adds the user info to the request.

1. Create the Auth Middleware

Create middleware/auth.js:

const jwt = require('jsonwebtoken');

function auth(req, res, next) {
  const authHeader = req.headers.authorization || '';
  const [scheme, token] = authHeader.split(' ');

  if (scheme !== 'Bearer' || !token) {
    return res.status(401).json({ message: 'Missing or invalid Authorization header' });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = { id: decoded.id, email: decoded.email };
    next();
  } catch (err) {
    if (err.name === 'TokenExpiredError') {
      return res.status(401).json({ message: 'Access token expired' });
    }
    return res.status(401).json({ message: 'Invalid token' });
  }
}

module.exports = auth;

What it does:

• Reads the Authorization header.

• Checks for the Bearer <token> format.

• Verifies the token with the secret.

• Attaches a simple user object to req for later use.

2. Create the Protected Route

Create a small profile route that returns the current user. Add routes/profile.js:

const express = require('express');
const auth = require('../middleware/auth');
const User = require('../models/user');

const router = express.Router();

router.get('/me', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    if (!user) {
      return res.status(404).json({ message: 'User not found' });
    }
    res.json({ user });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

module.exports = router;

Wire it in server.js:

const profileRoutes = require('./routes/profile');
app.use('/api/profile', profileRoutes);

Now a GET /api/profile/me call will only work with a valid token.

3. Handle Token Expiry Clearly

Short access tokens reduce damage if they leak. We set expiresIn: '15m' during login. When a token expires, the middleware returns a 401 with Access token expired.

We won’t refresh the token here because refresh requires its own endpoint, storage, and rotation rules. You’ll add that in “Refresh Tokens and Rotation.” For now, the 401 proves that the expiry is enforced.

4. Testing the Flow

In this section, we’ll test that the server blocks requests without a valid token and allows requests with a valid token.

Log in at /api/auth/login and copy the token. Then call /api/profile/me with:

Authorization: Bearer <paste_token_here>

You should see the current user without the password field.

Then remove the header or change the token and call again. You should get a 401.

Next, wait for the token to expire or change expiresIn to a very short value for a quick test. Call again and confirm you get Access token expired.

Tips for debugging

• 401 with “Missing or invalid Authorization header” means the header format is wrong. Use Authorization: Bearer <token>.

• 401 with “Invalid token” means the token string is wrong, signed with the wrong secret, or corrupted.

• 401 with “Access token expired” means the expiry check works. You will fix the client experience with the refresh endpoint later.

• If all calls fail, confirm your JWT_SECRET is set in .env and that the server was restarted after changes.

5. Optional Cookie Support

You can store tokens in HTTP-only cookies. The browser sends them automatically. Scripts cannot read HTTP-only cookies, which reduces the risk from XSS.

Install and enable cookies:

npm install cookie-parser

// server.js
const cookieParser = require('cookie-parser');
app.use(cookieParser());

Read the access token from a cookie as a fallback:

// middleware/auth.js
const jwt = require('jsonwebtoken');

function auth(req, res, next) {
  const header = req.headers.authorization || '';
  const [scheme, tokenFromHeader] = header.split(' ');
  const tokenFromCookie = req.cookies?.access_token;

  const token = scheme === 'Bearer' && tokenFromHeader ? tokenFromHeader : tokenFromCookie;

  if (!token) return res.status(401).json({ message: 'No token provided' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = { id: decoded.id, email: decoded.email };
    next();
  } catch (err) {
    const msg = err.name === 'TokenExpiredError' ? 'Access token expired' : 'Invalid token';
    return res.status(401).json({ message: msg });
  }
}

module.exports = auth;

How this works:

• The access token can live in a cookie named access_token.

• Mark the cookie as httpOnly and secure in production.

• Set sameSite: 'strict' to reduce CSRF risk.

• For APIs used by browsers, cookies simplify sending tokens. For SPAs that call many domains, an Authorization header may be simpler.

In the next section, we’ll use the same cookie approach for the refresh token. That section explains why refresh belongs in a cookie and how rotation blocks replay.

Refresh Tokens and Rotation

Access tokens are short-lived and used on every request. They prove the user identity quickly. Refresh tokens live longer and are used only to get new access tokens when the old ones expire. This split keeps day-to-day requests fast and limits the damage if a token leaks.

We will store the refresh token in an HTTP-only cookie. This reduces exposure to scripts and keeps the flow smooth.

1. Install and Setup

We already have cookie-parser. We won’t add anything new for now, but we will use Node’s built-in crypto module to hash the refresh token before storing it. As a reminder, hashing means the raw token is never saved. If the database leaks, attackers cannot use the hashes to log in.

Create models/refreshToken.js:

const mongoose = require('mongoose');

const refreshTokenSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', index: true },
  tokenHash: { type: String, required: true, unique: true },
  jti: { type: String, required: true, index: true },
  expiresAt: { type: Date, required: true, index: true },
  revokedAt: { type: Date, default: null },
  replacedBy: { type: String, default: null }, // new jti when rotated
  createdAt: { type: Date, default: Date.now },
  ip: String,
  userAgent: String
});

module.exports = mongoose.model('RefreshToken', refreshTokenSchema);

2. Token Helpers

Create utils/tokens.js for clean, reusable logic.

const jwt = require('jsonwebtoken');
const crypto = require('crypto');
const RefreshToken = require('../models/refreshToken');

const ACCESS_TTL = '15m';
const REFRESH_TTL_SEC = 60 * 60 * 24 * 7; // 7 days

function hashToken(token) {
  return crypto.createHash('sha256').update(token).digest('hex');
}

function createJti() {
  return crypto.randomBytes(16).toString('hex');
}

function signAccessToken(user) {
  const payload = { id: user._id.toString(), email: user.email };
  return jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: ACCESS_TTL });
}

function signRefreshToken(user, jti) {
  const payload = { id: user._id.toString(), jti };
  const token = jwt.sign(payload, process.env.REFRESH_TOKEN_SECRET, { expiresIn: REFRESH_TTL_SEC });
  return token;
}

async function persistRefreshToken({ user, refreshToken, jti, ip, userAgent }) {
  const tokenHash = hashToken(refreshToken);
  const expiresAt = new Date(Date.now() + REFRESH_TTL_SEC * 1000);
  await RefreshToken.create({ user: user._id, tokenHash, jti, expiresAt, ip, userAgent });
}

function setRefreshCookie(res, refreshToken) {
  const isProd = process.env.NODE_ENV === 'production';
  res.cookie('refresh_token', refreshToken, {
    httpOnly: true,
    secure: isProd,
    sameSite: 'strict',
    path: '/api/auth/refresh',
    maxAge: REFRESH_TTL_SEC * 1000
  });
}

async function rotateRefreshToken(oldDoc, user, req, res) {
  // revoke old
  oldDoc.revokedAt = new Date();
  const newJti = createJti();
  oldDoc.replacedBy = newJti;
  await oldDoc.save();

  // issue new
  const newAccess = signAccessToken(user);
  const newRefresh = signRefreshToken(user, newJti);
  await persistRefreshToken({
    user,
    refreshToken: newRefresh,
    jti: newJti,
    ip: req.ip,
    userAgent: req.headers['user-agent'] || ''
  });
  setRefreshCookie(res, newRefresh);
  return { accessToken: newAccess };
}

module.exports = {
  hashToken,
  createJti,
  signAccessToken,
  signRefreshToken,
  persistRefreshToken,
  setRefreshCookie,
  rotateRefreshToken
};

In this code,

• signAccessToken creates a short token with the user ID and email.

• signRefreshToken creates a long-lived token with a jti value. The jti lets us rotate and track tokens.

• persistRefreshToken hashes the refresh token and stores metadata like expiry and device info.

• setRefreshCookie writes the HTTP-only cookie so the browser sends it to the refresh endpoint automatically.

• rotateRefreshToken revokes the old token, issues a new pair, and saves the new record. Rotation blocks replay if an old refresh token is stolen.

3. Issue Refresh Token on Login

Update your routes/auth.js login handler to create and store a refresh token, then set the cookie.

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/user');
const RefreshToken = require('../models/refreshToken');
const {
  createJti,
  signAccessToken,
  signRefreshToken,
  persistRefreshToken,
  setRefreshCookie
} = require('../utils/tokens');

const router = express.Router();

router.post('/login', async (req, res) => {
  try {
    const { email, password } = req.body;

    const user = await User.findOne({ email });
    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const accessToken = signAccessToken(user);

    const jti = createJti();
    const refreshToken = signRefreshToken(user, jti);

    await persistRefreshToken({
      user,
      refreshToken,
      jti,
      ip: req.ip,
      userAgent: req.headers['user-agent'] || ''
    });

    setRefreshCookie(res, refreshToken);

    res.json({ accessToken });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

module.exports = router;

On login, we issue both tokens. The access token goes to the JSON response. The refresh token goes to an HTTP-only cookie scoped to /api/auth/refresh. This keeps the refresh token away from frontend code while still letting the browser send it to the refresh endpoint.

4. The Refresh Endpoint

Create an endpoint that reads the refresh cookie, verifies it, checks the database entry, and rotates it. If all checks pass, it returns a new access token and sets a new refresh cookie.

Add to routes/auth.js:

const { hashToken, rotateRefreshToken } = require('../utils/tokens');

router.post('/refresh', async (req, res) => {
  try {
    const token = req.cookies?.refresh_token;
    if (!token) return res.status(401).json({ message: 'No refresh token' });

    let decoded;
    try {
      decoded = jwt.verify(token, process.env.REFRESH_TOKEN_SECRET);
    } catch (err) {
      return res.status(401).json({ message: 'Invalid or expired refresh token' });
    }

    const tokenHash = hashToken(token);
    const doc = await RefreshToken.findOne({ tokenHash, jti: decoded.jti }).populate('user');

    if (!doc) {
      return res.status(401).json({ message: 'Refresh token not recognized' });
    }
    if (doc.revokedAt) {
      return res.status(401).json({ message: 'Refresh token revoked' });
    }
    if (doc.expiresAt < new Date()) {
      return res.status(401).json({ message: 'Refresh token expired' });
    }

    const result = await rotateRefreshToken(doc, doc.user, req, res);
    return res.json({ accessToken: result.accessToken });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

The refresh endpoint verifies the cookie, checks the database record, confirms it is not expired or revoked, then rotates it. Rotation sets revokedAt on the old record and creates a new one with a fresh jti. The response returns a new access token and sets a new refresh cookie.

5. Logout and Revoke

On logout, revoke the current refresh token and clear the cookie.

router.post('/logout', async (req, res) => {
  try {
    const token = req.cookies?.refresh_token;
    if (token) {
      const tokenHash = hashToken(token);
      const doc = await RefreshToken.findOne({ tokenHash });
      if (doc && !doc.revokedAt) {
        doc.revokedAt = new Date();
        await doc.save();
      }
    }
    res.clearCookie('refresh_token', { path: '/api/auth/refresh' });
    res.json({ message: 'Logged out' });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

Logout revokes the matching refresh token if present and clears the cookie. This ends the session cleanly on the server side and the client side.

6. Client Flow

Here is how the browser app should behave:

• Keep the access token in memory. Do not put it in localStorage.

• Call protected APIs with the Authorization header or let cookies handle it if you chose the cookie approach for access.

• If a call fails with Access token expired, call /api/auth/refresh. The browser sends the refresh cookie automatically.

• Replace the in-memory access token with the new one.

• Retry the original request.

• On logout, call /api/auth/logout and clear any local state.

7. Security Notes

There are some key steps you can take to make sure everything is secure:

Separate secrets

Use a different secret for access and refresh tokens. If the access secret leaks, refresh tokens still use a different key. Set JWT_SECRET and REFRESH_TOKEN_SECRET in .env.

HTTPS only

Serve production traffic over HTTPS. Cookies marked secure: true only travel over HTTPS. This protects tokens in transit.

Rotate on every refresh

Issue a new refresh token and revoke the old one each time you refresh. Rotation makes a stolen old token useless after the next refresh.

Hash refresh tokens in the database

Store a SHA-256 hash, not the raw token. This way a database leak does not give attackers the actual token string.

Scope and flags for cookies

Use httpOnly: true, secure: true in production, sameSite: 'strict', and a narrow path such as /api/auth/refresh. These flags reduce XSS and CSRF risk and limit where the cookie is sent.

Short access TTL and moderate refresh TTL

Keep access tokens short, such as 15 minutes. Use a refresh lifetime like 7 days. This keeps risk low without annoying users.

Device awareness

Store ip and userAgent. If patterns change in a suspicious way, you can revoke or challenge the session.

Auditing and limits

Log refresh events and consider rate limits on the refresh endpoint. This helps detect abuse.’

Add to .env:

REFRESH_TOKEN_SECRET=your_refresh_secret_key

Conclusion

You now have a working authentication system that uses JWTs and refresh tokens to keep users logged in safely. The access token handles quick verification. The refresh token quietly renews access when it expires. Together, they strike a balance between security and convenience.

You built user registration, login, protected routes, and a full refresh flow. You also learned how to rotate refresh tokens, store them securely, and handle logout cleanly. Each step adds another layer of safety that keeps your app and users protected.

From here, you can expand this setup to match your real project. You can add role-based permissions, track user sessions by device, or move the logic into a dedicated authentication service. What matters most is understanding the flow and keeping tokens short-lived and well-guarded.

Static pages are created once when you build your project. They’re fast because the server doesn’t have to do any extra work when someone visits the page.

Dynamic pages are created on the fly. Every time a user asks for a page, the server builds it fresh. This can be slower, but it means the content is always up-to-date.

Both options have benefits and drawbacks. Static pages are very fast, but they can show old content if something changes after the build. Dynamic pages are always fresh, but they can be slow because the server has to work harder.

This is where Incremental Static Regeneration (ISR) comes in. ISR gives you the best of both worlds: the speed of static pages with the freshness of dynamic pages.

In this article, we will explore what ISR is, how it works in Next.js, and how you can use it to make your websites faster and smarter.

Table of Contents

1. What is Incremental Static Regeneration (ISR)

2. How ISR Works Behind the Scenes

3. When Does ISR Trigger a New Page Generation?

4. Common Use Cases for ISR

5. Best Practices for Using ISR

6. Potential Pitfalls and How to Avoid Them

7. Advanced Tips: On-Demand ISR

8. Conclusion

What is Incremental Static Regeneration (ISR)?

Incremental Static Regeneration (ISR) is a feature in Next.js that lets you update static pages after you have built your site.

In the past, if you built a static site and needed to change something, you had to rebuild the whole site from scratch. This could take a lot of time, especially for large websites.

ISR solves this problem. With ISR, you can tell Next.js to rebuild a page in the background after a certain amount of time, or whenever you ask it to. The user still sees a fast static page, but the page can also update itself behind the scenes without you having to rebuild everything manually.

In simple words, pages are pre-rendered and served like static files. After a set time, Next.js can regenerate the page with fresh data and users always get fast, reliable pages.

How ISR Works Behind the Scenes

To understand ISR, let’s first look at the three ways you can build pages in Next.js:

• Static Generation (SSG): Pages are built once when you deploy. They never change unless you rebuild the whole site.

• Server-Side Rendering (SSR): Pages are built fresh on every request. This can slow things down because the server is doing work every time.

• Incremental Static Regeneration (ISR): Pages are built at request time only if needed after a certain amount of time has passed. Otherwise, users get the already-built page instantly.

How ISR Actually Works:

When you use ISR:

1. A user visits your page.

2. If the page is already built and not expired, Next.js serves the cached static page.

3. If the page has expired based on the time you set, Next.js rebuilds the page in the background while still serving the old page.

4. The next user who visits gets the fresh new version automatically.

You control when pages expire by setting a time limit, using the revalidate key inside your getStaticProps function.

Here is the basic setup for ISR:

// pages/posts/[id].js

export async function getStaticProps(context) {
  const { id } = context.params;

  const post = await fetch(`https://example.com/posts/${id}`).then(res => res.json());

  return {
    props: {
      post,
    },
    revalidate: 60, // Regenerate the page after 60 seconds
  };
}

export async function getStaticPaths() {
  const posts = await fetch('https://example.com/posts').then(res => res.json());

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: 'blocking' };
}

What this does:

• The page is built and cached the first time someone visits it.

• After 60 seconds, if someone visits again, Next.js will rebuild the page in the background with new data.

• Users always get a page immediately. They never have to wait.

When Does ISR Trigger a New Page Generation?

Now that you know what ISR is, let’s look at when and how a page actually gets regenerated.

Here is the flow:

1. A user requests a page.

2. Next.js checks if a cached (already built) page exists.

3. If the page is still "fresh" (inside the revalidate time), it simply serves the cached page.

4. If the page is "stale" (outside the revalidate time), it serves the old cached page immediately but also starts rebuilding the page in the background.

5. Once the rebuild is done, the next user gets the new updated page.

Important:
No one ever waits. ISR always serves something instantly, either the fresh page or the previous version.

User visits page --> Is page fresh?
         |
    Yes  |  No
    Serve cached page  Serve cached page + Start background regeneration
                           |
                  Regeneration finished
                           |
                  Next user sees updated page

Quick Example

Let’s say you set revalidate: 30 seconds for your page.

• At 12:00:00 PM → Page is built and cached.

• At 12:00:10 PM → A user visits. Page is served from cache (still fresh).

• At 12:00:35 PM → Another user visits. Cache is stale, so Next.js serves the old page but triggers a rebuild.

• At 12:00:36 PM → Rebuild finishes. New page is ready.

• At 12:00:40 PM → Next visitor gets the new fresh page.

In short:

The page is always available fast, and it quietly updates itself without users even noticing.

Common Use Cases for ISR

You might be wondering, when you should actually use ISR?

Here are the most common situations where ISR is the perfect choice:

1. Blogs and News Sites

If you run a blog or a news website, new articles are added often. You want your readers to see fresh content, but you also want the pages to load fast.

With ISR:

• Articles are built as static pages.

• When you publish a new article, it quietly updates after a short time.

• Readers always get fast loading speeds.

Example:
A tech blog updates every few hours. You set revalidate: 3600 (1 hour) so pages refresh with new content once every hour.

2. E-commerce Product Pages

In online stores, product information like prices, availability, and descriptions change often. You want the data to be pretty fresh, but you also need fast page loads for good sales.

With ISR:

• Product pages load instantly.

• If something changes (like a sale), the page quietly updates without hurting the shopping experience.

Example:
You set revalidate: 300 (5 minutes) for your products so that changes show up quickly without slowing down the store.

3. Dashboards and User-Generated Content

If your site has dashboards, reviews, forums, or user profiles that do not change every second, ISR can be a smart choice.

With ISR:

• You can show updated posts, comments, or stats without making the server work too hard.

• The content refreshes at intervals you decide.

Example:
A review site refreshes its "Top Products" list every day using revalidate: 86400 (24 hours).

In short:

If your page changes sometimes (not every second) and you want great speed and fresh content, use ISR.

Best Practices for Using ISR

To get the best results with ISR, you need to set it up correctly. Here are some important tips to make sure everything works smoothly.

1. Choose the Right revalidate Time

Think about how often your content really changes.

• If your content changes hourly, you might set revalidate: 3600 (which is 1 hour).

• If your content changes daily, you might set revalidate: 86400 (which is 24 hours).

• If your content changes every few minutes, you might set revalidate: 300 (which is 5 minutes).

Tip:
Pick a revalidate time that balances newness and server load. Shorter times mean fresher data but can put more pressure on your server.

2. Handle Errors Efficiently

Sometimes, your data source (like an API) might fail when regenerating a page.

To avoid breaking your page:

• Always use a try-catch block in your getStaticProps.

• Show a fallback message or a simple error page if the fetch fails.

Example:

export async function getStaticProps() {
  try {
    const data = await fetch('https://example.com/data').then(res => res.json());

    return {
      props: { data },
      revalidate: 60,
    };
  } catch (error) {
    console.error('Failed to fetch data:', error);

    return {
      props: { data: null },
      revalidate: 60,
    };
  }
}

3. Think About SEO

Since ISR serves static pages fast, it is great for SEO.

Just remember:

• Always return meaningful content even if data fetching fails.

• Avoid showing "Loading..." states when using ISR. The page should feel complete to both users and search engines.

Potential Pitfalls and How to Avoid Them

Even though ISR is amazing, there are a few things that can trip you up if you are not careful. Here is what to watch out for.

1. Stale Data Issues

Sometimes users might see old data if the page has not revalidated yet. This happens because ISR serves the cached version until a new one is built.

How to handle it:

• Set a revalidate time that makes sense for your content.

• If your content is very sensitive (like stock prices), you might want to use Server-Side Rendering (SSR) instead of ISR.

2. Deployment Misconfigurations

ISR needs server support to work correctly. If you are hosting your site on platforms like Vercel or Netlify, they handle this for you.

But if you use a custom server or different hosting, make sure:

• You have serverless functions or backend support running.

• You do not turn your site into static-only hosting by mistake (like plain S3 buckets without any backend).

Tip:
Always check your hosting provider’s docs to confirm they support Next.js ISR properly.

3. Big Rebuilds Can Cause Load Spikes

If your revalidate is too short and you have thousands of pages, the server might get flooded with background regeneration requests.

How to handle it:

• Be smart with your revalidate values.

• For very big sites, consider On-Demand ISR (where you control when pages rebuild manually – we’ll talk about this next).

Advanced Tips: On-Demand ISR

Normally, with ISR, pages regenerate after a set time that you define with revalidate.

But sometimes you want full control. You want to regenerate a page immediately after something happens, like:

• A new blog post is published

• A product is updated

• A user submits new content

This is where On-Demand ISR comes in.

With On-Demand ISR, you manually trigger a page to rebuild using an API route. No waiting for the timer – you decide when it happens.

How to Set Up On-Demand ISR

You need two simple things:

1. An API Route that tells Next.js to revalidate a page.

2. A secret token to protect your API so not just anyone can trigger it.

Example: Basic API Route for On-Demand ISR

Create a file like this:

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Secret token check for security
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    const pathToRevalidate = req.query.path;

    await res.revalidate(pathToRevalidate);

    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).json({ message: 'Error revalidating' });
  }
}

How to Trigger It

You can make a POST request to your API route like this:

POST /api/revalidate?secret=YOUR_TOKEN&path=/your-page-path

For example:

POST /api/revalidate?secret=MY_SECRET_TOKEN&path=/posts/my-new-post

Next.js will immediately rebuild /posts/my-new-post, no need to wait for the timer.

Important:

• Always use a secret token and store it safely (like in .env files).

• Make sure only trusted systems (like your CMS or admin panel) can call the revalidate API.

Conclusion

Incremental Static Regeneration (ISR) is one of the best features in Next.js. It gives you the speed of static pages and the newness of dynamic content at the same time.

With ISR:

• Your pages load instantly.

• Your content stays up-to-date without full rebuilds.

• Your website feels smooth, modern, and professional.

If you use ISR wisely, you can build websites that are faster and smarter without making things complicated.

Each method serves a specific purpose to keep web communication clear, secure, and organized.

In this article, we will break down the most common HTTPS methods and explain how they function to make online interactions work smoothly.

Table of Contents

1. GET Method

2. POST Method

3. PUT Method

4. PATCH Method

5. DELETE Method

6. HEAD Method

7. OPTIONS Method

8. TRACE Method

9. CONNECT Method

10. Conclusion

GET Method

The GET method is one of the most common HTTP methods and is used to request data from a server. Think of it as asking for information without changing anything.

When you visit a webpage, your browser sends a GET request to the server asking for the content of the page. The server then responds with the data (such as HTML, images, or other files) that the browser displays.

One important thing about GET is that it doesn't make any changes to the data. It simply "reads" or retrieves the information. For example, when you browse through social media or search for products online, the app or website uses GET to display data without altering it.

Another key point is that GET requests send parameters in the URL itself. This means any data you're asking for is visible in the browser's address bar. For example, if you're searching for a product on an online store, the search term is included in the URL.

Example of a GET Request

Here’s a simple example of a GET request in JavaScript using the Fetch API:

fetch('https://api.example.com/products?category=shoes')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

In this example, the GET request is made to the URL https://api.example.com/products with a query parameter category=shoes, asking the server to return products in the shoes category.

Use Cases of the GET Method

GET is mainly used to fetch information, and there are many common scenarios where it's applied:

1. Loading a Webpage: Every time you type a URL into your browser or click a link, you're making a GET request. The browser asks the server for the webpage, and the server sends back the content to display.

   • Example: GET /index.html HTTP/1.1

2. Fetching Data from APIs: When developers build applications, they often use APIs (Application Programming Interfaces) to get data from external servers. For instance, a weather app uses a GET request to fetch the current temperature from a weather API.

   • Example:

    fetch('https://api.weather.com/current?city=Lagos')
       .then(response => response.json())
       .then(data => console.log(data));

3. Search Queries: When you search for something on Google or other search engines, a GET request is made. The search term you entered is included in the URL, and the server returns a list of matching results.

   • Example: GET /search?q=JavaScript

4. Retrieving Files: Whether you're downloading an image, viewing a PDF, or playing a video, GET is used to fetch those files from a server.

   • Example: GET /files/image.jpg

Best Practices for GET Requests

To use GET requests effectively, it's important to follow some good practices to ensure smooth and secure data handling:

1. Use GET Only for Retrieving Data: GET requests are meant to fetch data, not to send sensitive information like passwords or personal data. Since the parameters in a GET request are included in the URL, anyone can see them. For example, if you're logging into a website, you shouldn't use GET to send your password, because it would show up in the URL.

   • Example of what not to do:

    fetch('https://example.com/login?username=john&password=secret');

2. Keep URLs Short and Clean: Since GET requests include data in the URL, long URLs can become problematic. There is also a limit to how much data can be included in a GET request URL (depending on the browser and server), so avoid putting too much information there. If you need to send a lot of data, consider using a POST request instead.

3. Enable Caching for Performance: GET requests are often cached by browsers, meaning the browser can store the response and reuse it without contacting the server again. This improves performance, especially for static content that doesn’t change often, like images or style sheets. To take advantage of this, ensure your server sends proper cache-control headers, so frequently requested data can be loaded faster.

   • Example of setting cache headers:

    Cache-Control: max-age=3600

4. Avoid Making GET Requests for Actions That Change Data: Since GET is a "safe" method, it should only be used for actions that don't modify data. If you want to create, update, or delete data, use methods like POST, PUT, or DELETE. For instance, if you accidentally use GET to delete a resource, someone could remove it just by clicking a link or refreshing the page, which is not safe.

   • Example of not using GET for deletion:

    GET /delete/user/123

5. Be Cautious with Sensitive Data: Since GET requests are part of the URL, they can be logged or saved in a browser’s history. Avoid sending sensitive information like passwords, credit card details, or private data in a GET request. Always use methods like POST for handling such information, which keeps it hidden.

POST Method

The POST method is used to send data to a server. Unlike the GET method, which only retrieves data, POST allows you to submit information that the server can use to process or store. POST is commonly used in forms, where users input data such as usernames, passwords, or contact details.

When a POST request is made, the data is sent in the body of the request rather than in the URL. This makes POST ideal for sending larger or more sensitive information, such as passwords, because the data is hidden and doesn’t appear in the browser's address bar.

For example, when you sign up for a website or submit a comment on a blog, the POST method is used to send your information to the server, which processes it and stores it in a database.

Example of a POST Request

Here’s an example of a POST request using the Fetch API to send form data to a server:

const formData = {
  username: 'john_doe',
  password: 'mypassword123'
};

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

In this example, the POST request sends username and password as JSON data in the body of the request, making it a secure way to handle sensitive information like passwords.

Differences Between GET and POST

Although GET and POST are used to communicate with a server, they serve different purposes and handle data in different ways:

Data Transmission:

• GET: Data is included in the URL, making it visible in the address bar. This limits how much data can be sent.

• POST: Data is sent in the body of the request, which allows for sending larger amounts of information. This also keeps sensitive information hidden from the URL.

Purpose:

• GET: Used for retrieving data. It doesn’t change or modify anything on the server.

• POST: Used to send data that may change or add to the server's resources, such as adding a new user to a database or submitting a form.

Caching:

• GET: GET requests can be cached. This means that the browser may save the response, making future requests faster.

• POST: POST requests are not cached, as they often involve new or updated data that shouldn't be reused.

Idempotence:

• GET: Sending the same GET request multiple times doesn’t change the result. It will return the same data every time.

• POST: Sending the same POST request multiple times may result in different outcomes. For example, submitting a form twice could create duplicate entries.

Common Scenarios for Using POST

POST is ideal in situations where you need to send data to the server, often for processing or storage. Here are some common use cases:

1. Submitting Forms: Whenever you fill out and submit a form online, such as signing up for a newsletter or entering your details in a registration form, the POST method is used to send that information to the server. The server then processes the data, stores it, or performs another action based on it.

   • Example:

    <form action="https://example.com/register" method="POST">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit">Sign Up</button>
    </form>

2. User Authentication: When you log in to a website using a username and password, POST is often used to send your credentials securely to the server. The server checks the information and grants access to your account if the credentials match.

3. Uploading Files: POST is also used for uploading files, such as images, documents, or videos. Since the POST method allows sending large amounts of data, it’s perfect for uploading files that need to be processed or stored on the server.

   • Example using a form for file uploads:

    <form action="https://example.com/upload" method="POST" enctype="multipart/form-data">
      <input type="file" name="file" />
      <button type="submit">Upload File</button>
    </form>

4. Creating New Resources: POST is often used in APIs to create new resources. For example, when you add a new product to an online store, the POST method is used to send the product details to the server, which adds the product to the store's database.

   • Example of sending product data:

    const product = {
      name: 'New Sneakers',
      price: 59.99,
      category: 'Footwear'
    };

    fetch('https://example.com/api/products', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(product)
    })
    .then(response => response.json())
    .then(data => console.log('Product added:', data));

5. Sending Data to an API: POST is widely used in APIs when you need to send data that will be processed or stored. For example, an app that tracks your fitness progress may use POST to send your workout details to a server, where it’s stored and analyzed.

6. Making Purchases Online: When you make an online purchase, POST is used to send the payment details to the server for processing. The server processes the transaction and updates the system with your order information.

PUT Method

The PUT method is used to update or replace an existing resource on the server. It sends data to the server and tells it to create a new resource if none exists or replace the current one if it does. The key idea with PUT is that you are telling the server exactly what the resource should look like.

For example, imagine a user profile on a website. If you use PUT to update your profile, the server will replace the entire profile with the new data you provide. Every part of the profile will match exactly what you send, so if some details are missing, they will be overwritten with the new data.

Example of a PUT Request

Here’s an example of a PUT request using the Fetch API to update user data:

const updatedProfile = {
  username: 'john_doe_updated',
  email: 'john_updated@example.com',
  age: 30
};

fetch('https://example.com/users/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(updatedProfile)
})
.then(response => response.json())
.then(data => console.log('Updated:', data))
.catch(error => console.error('Error:', error));

In this example, the PUT request updates the user profile with new data. The profile will be replaced with username, email, and age values. If any data is missing, such as phoneNumber, it will be removed from the profile.

When to Use PUT

PUT is mainly used when you want to update or replace a resource with specific, complete data. Here are some common situations where PUT is appropriate:

1. Updating a Resource: When you need to make changes to an existing resource, PUT is used to send a new version of the entire resource. For example, updating a blog post, product details, or user information would require sending a complete replacement of the resource using PUT.

   • Example:

    const updatedPost = {
      title: 'New Title for My Blog',
      content: 'Updated blog content here...',
      author: 'John Doe'
    };

    fetch('https://example.com/blog/45', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedPost)
    });

2. Creating a Resource if None Exists: If you send a PUT request to a specific URL that doesn't have a resource yet, the server will create one using the data you provide. This is useful when you're working with resources that need to be fully defined upfront.

   • Example of creating a product if it doesn’t exist:

    const newProduct = {
      id: 101,
      name: 'New Sneakers',
      price: 59.99,
      category: 'Footwear'
    };

    fetch('https://example.com/products/101', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newProduct)
    });

3. Working with APIs: When interacting with APIs, PUT is often used when you need to make updates to a resource like a user profile, product details, or any other structured data. For example, a to-do list app might allow you to use PUT to update an existing task with new information.

   • Example of updating a task:

    const updatedTask = {
      title: 'Updated Task Title',
      completed: true
    };

    fetch('https://example.com/tasks/67', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedTask)
    });

PUT vs. POST: Key Differences

Though both PUT and POST can send data to a server, they have different purposes and behaviors:

Purpose:

• PUT: Primarily used for updating or replacing an existing resource. If the resource doesn’t exist, PUT can also create it.

• POST: Mainly used to create new resources or submit data that needs to be processed. POST doesn’t replace existing resources but adds new ones.

Data Handling:

• PUT: Replaces the entire resource with the new data. If a part of the resource is missing in the request, that part gets removed or replaced.

• POST: Adds or updates resources without replacing the entire thing. For example, when submitting a form, POST adds new data to the server without deleting what’s already there.

Idempotence:

• PUT: Is idempotent, so sending the same PUT request multiple times will always result in the same outcome. No matter how many times you update a resource using PUT, the result will be the same.

• POST: Is not idempotent, so submitting the same POST request multiple times could create duplicate resources or have different results.

Use Cases:

• PUT: Best used for updates and full replacements of resources. For instance, if you’re updating product details in an online store, PUT ensures that all the details are replaced with the new ones you send.

• POST: Suited for creating new entries or sending data that requires processing. For example, submitting an online order or filling out a contact form uses POST.

PATCH Method

The PATCH method is used to make partial updates to a resource on the server. Unlike the PUT method, which replaces the entire resource, PATCH allows you to update specific parts of a resource without sending the complete data again. This makes PATCH ideal for scenarios where you only want to tweak certain details without affecting other parts of the resource.

For example, if you have a user profile and want to update only the phone number, PATCH enables you to send just the new phone number while leaving the rest of the profile unchanged. This approach is more efficient and reduces the risk of unintended data loss.

Partial Updates with PATCH

PATCH is designed for making targeted changes to a resource. Here’s how it works:

• Targeted Changes: When you use PATCH, you specify only the fields you want to update. For instance, if a user updates their email address, you send a PATCH request containing just the new email, and everything else stays the same on the server.

• Efficiency: PATCH is more efficient than PUT because it allows you to send only the data that’s being changed. This can reduce bandwidth usage, especially when updating large resources where only a small part needs modification.

• Does Not Overwrite: Unlike PUT, PATCH does not replace the entire resource. It only updates the fields that are provided in the request, ensuring that other fields remain intact.

Example of a PATCH Request

Here’s a basic example of how you might use the PATCH method to update a specific field, such as changing a user's email address:

const updatedEmail = {
  email: 'new_email@example.com'
};

fetch('https://example.com/users/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(updatedEmail)
})
.then(response => response.json())
.then(data => console.log('Email updated:', data))
.catch(error => console.error('Error:', error));

In this example, only the email field is being updated. The rest of the user profile, such as the username or address, remains unchanged.

When to Use PATCH Instead of PUT

There are specific scenarios where PATCH is more appropriate than PUT:

1. Updating Specific Fields: If you need to update only a part of a resource, like changing a user’s email, adding a tag to a blog post, or modifying a single attribute, PATCH is a better choice. It allows you to send only the fields that need updating, making the request more efficient.

   • Example: Updating a user's phone number.

    const updatedPhone = { phoneNumber: '123-456-7890' };

    fetch('https://example.com/users/123', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updatedPhone)
    });

2. Avoiding Unintended Data Loss: When using PUT, leaving out any fields could result in the server removing or overwriting those fields. PATCH avoids this risk by only updating the specific fields provided, ensuring no accidental data loss.

   • Example: If you only want to update a user’s username but don’t want to overwrite other fields like their address or preferences, PATCH ensures only the username is updated.

3. Performance Considerations: PATCH is more efficient for large resources. For instance, if you're managing a database with extensive records and need to change a small portion, PATCH reduces the data sent to the server, improving performance and speeding up the process.

   • Example: Updating the status of a large order without modifying the entire order details.

    const updatedStatus = { status: 'shipped' };

    fetch('https://example.com/orders/987', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updatedStatus)
    });

4. Frequent Updates: In applications where data changes frequently, PATCH makes it easier to update specific parts of a resource without affecting the entire structure. For instance, in an e-commerce platform, users might regularly update their shipping address or payment method, and PATCH can handle those frequent changes without requiring the entire user profile to be re-sent.

   • Example: Updating the delivery address for an order.

    const updatedAddress = {
      shippingAddress: '123 New Street, New City, Country'
    };

    fetch('https://example.com/orders/987', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updatedAddress)
    });

Key Differences Between PUT and PATCH

Here’s a quick comparison of PATCH and PUT to clarify when each method is more appropriate:

PATCH is particularly valuable when you want to make partial updates, avoid overwriting other data, and improve the efficiency of your requests.

DELETE Method

The DELETE method is used to remove a resource from the server. When a DELETE request is made, the server deletes the specified resource, meaning it’s no longer accessible or available. This method is used for tasks like deleting a user account, removing a product from an online store, or clearing old data from a database.

Unlike GET or POST, DELETE doesn’t require sending a body in the request—just the URL of the resource you want to remove is enough. For example, to delete a specific blog post, a DELETE request is sent to the URL of that post, and the server takes care of removing it.

How DELETE Works

To delete a resource, you typically only need to provide the URL of the resource you want to remove. Unlike POST or PUT requests, DELETE requests generally don’t require a body.

Example:

If you want to delete a specific blog post, you can send a DELETE request to its URL:

fetch('https://example.com/posts/123', {
  method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log('Resource deleted:', data))
.catch(error => console.error('Error:', error));

This tells the server to remove the blog post with ID 123.

Safely Using DELETE

DELETE requests can have a significant impact, so it’s important to use them carefully to avoid accidentally removing valuable data. Below are some key considerations for safely handling DELETE requests:

• Permanent Action: Once a DELETE request is processed, the resource is typically gone. In some cases, systems might implement "soft delete" functionality, where the resource is hidden but not completely removed. However, most use a "hard delete," where the resource is fully erased. Soft deletes can be useful for recovery purposes, allowing data to be restored if needed.

• Authentication: DELETE requests should be restricted to authorized users. Before performing a DELETE action, the server should validate that the user has permission to delete the resource. For example, only the owner of a user account should be able to delete it, not another user.

• Confirmation: Many applications prompt users to confirm their intention before processing a DELETE action. This extra step ensures users don't accidentally delete important data, especially for irreversible actions like account deletion.

Example of a Confirmation Step:

if (confirm("Are you sure you want to delete this post?")) {
  fetch('https://example.com/posts/123', {
    method: 'DELETE'
  })
  .then(response => console.log('Post deleted'))
  .catch(error => console.error('Error:', error));
}

• Reversibility (Soft Delete): For important data, it’s often useful to implement a soft delete, which doesn’t completely remove the data but marks it as deleted in the database. This allows the data to be restored later if needed. For example, many email systems keep deleted messages in a "Trash" folder until they are permanently removed.

Best Practices for Handling DELETE Requests

1. Require Authentication: Only authenticated users should be able to perform DELETE actions. This prevents unauthorized users from deleting resources they don't own. For example, users should only be allowed to delete their own data, not that of others.

   • Example: In a content management system (CMS), ensure that only the author of a post or an admin can delete it.

2. Use Confirmation Steps: For critical actions, confirm the user’s intent before proceeding. This is especially important for actions that cannot be undone, such as deleting an account or permanently removing a file.

   • Example: Show a prompt that says, "Are you sure you want to delete your account? This action cannot be undone."

3. Log Deletions: Keep a record of DELETE requests, including who initiated the request and when it occurred. Logging is important for accountability, troubleshooting, and data recovery in case of accidental deletions.

   • Example: In an e-commerce system, log details when a product is removed from the catalog, such as the user who initiated the request and the time of deletion.

4. Soft Delete for Critical Data: Implement a soft delete mechanism for data that may need to be restored later. This is particularly useful in scenarios like user accounts, where a user might want to recover their data after deletion.

   • Example: When a user "deletes" their account, it’s marked as inactive or hidden, rather than fully erased, allowing the user to recover it later.

5. Handle Errors Gracefully: If a DELETE request fails, the server should return an appropriate error message. For example, if the resource doesn’t exist or the user isn’t authorized to delete it, the server should respond with a message like "Resource not found" or "Unauthorized action."

   • Example: A DELETE request for a non-existent user could return a 404 Not Found response.

6. Double-Check URL Targeting: Before sending a DELETE request, ensure the URL points to the correct resource. Accidentally targeting the wrong resource could result in unintended data loss.

   • Example: If you are managing a to-do list and want to delete a single task, ensure the URL points specifically to that task and not to the entire list.

7. Communicate Results to the User: After a successful DELETE request, inform the user that the resource has been deleted. This can be done through a message or notification confirming the action.

   • Example: Show a message like "Item successfully deleted" after a product or post has been removed from the system.

DELETE Response

Typically, a successful DELETE request returns one of the following status codes:

• 200 OK: Indicates that the deletion was successful and includes a response body (for example, a message confirming the deletion).

• 204 No Content: The request was successful, but no content is returned in the response body. This is common when the resource is deleted, and there’s nothing to send back.

• 404 Not Found: Indicates that the resource to be deleted does not exist.

Example of a DELETE Request Response

If the DELETE request is successful and the resource is removed, a server might respond with a 204 No Content status:

HTTP/1.1 204 No Content

This response tells the client that the resource was successfully deleted but doesn’t return any additional data.

HEAD Method

The HEAD method is similar to the GET method but with a key difference: it only retrieves the headers of a resource, not the actual content.

When you send a HEAD request, the server responds with the same headers as a GET request, but without sending the body of the resource (like text, images, or files). This makes HEAD useful for checking information about a resource, such as its size or last modified date, without downloading the entire content.

For example, if you're managing a large file and want to check its size before downloading, you can use a HEAD request to get this information from the server without actually fetching the file itself.

How HEAD Compares to GET

• Same Headers, No Content: The HEAD request provides the same headers you’d receive with a GET request, such as Content-Type, Content-Length, Last-Modified, and so on. However, the response contains no body—just the metadata.

• Faster Requests: Because no body is included, HEAD requests are faster and consume less bandwidth than GET requests. This is helpful when you're only interested in details about the resource, not the content itself.

Use Cases for HEAD

1. Checking Resource Availability: You can use a HEAD request to check whether a resource (such as a webpage or file) exists without fetching the content. For example, if a URL returns a status code like 200 OK, you know the resource is there. A 404 Not Found status code would indicate that it’s not available.

2. Testing Links: If you manage a website with numerous external links, a HEAD request can test whether those links are still valid, saving you from loading the entire page. If a HEAD request returns an error code, you know the link is broken.

3. Fetching File Metadata: If you’re dealing with large files, you might want to check their size before downloading. A HEAD request allows you to gather metadata like the file size (Content-Length) and type (Content-Type) without retrieving the entire file.

4. Optimizing Caching: Browsers and applications can use HEAD requests to check if a resource has been updated since it was cached. The server returns headers like Last-Modified or ETag, and if these values haven’t changed, the cached version can be used, saving bandwidth and time.

5. API Efficiency: HEAD requests can be useful in APIs when a client needs to verify that data exists without downloading the entire response. For example, a request could check whether a record exists in a database without fetching the full details.

6. Server Health Monitoring: HEAD requests can be used to measure server performance. By testing the speed of a response without downloading content, developers can monitor server response times, check for issues, or determine if the server is up.

Best Practices for Using HEAD

• Efficient Testing: HEAD is ideal for validating resources or testing API endpoints without downloading unnecessary data.

• Caching: HEAD requests help with cache validation, ensuring that a resource is up-to-date without consuming bandwidth.

• No Side Effects: Like GET, HEAD should be safe and idempotent, meaning it should not alter the state of the resource. It’s used purely for retrieving information.

OPTIONS Method

The OPTIONS method is used to find out what actions are allowed on a specific resource. It allows a client (like a browser or an API) to ask the server, "What operations can I perform on this resource?" In response, the server lists the HTTP methods it supports for that resource, such as GET, POST, PUT, DELETE, and so on.

OPTIONS doesn’t perform any operation on the resource itself. Instead, it provides information about what the client can do. This makes it useful when you want to check what actions are allowed before actually making a request that changes or retrieves data.

For example, if you’re working with an API and want to see if it supports a DELETE method on a particular endpoint, you can send an OPTIONS request to get that information without affecting the resource.

Retrieving Supported Methods

1. Sending an OPTIONS Request: The client sends an OPTIONS request to a server, typically targeting a specific URL. This request serves as an inquiry about what actions are permitted on the resource at that endpoint.

2. Server’s Response: The server responds with an Allow header that lists the available HTTP methods for the resource. For example, it might return Allow: GET, POST, DELETE, meaning those methods can be used.

3. Testing for Methods: If you're unsure whether a particular method (like PATCH or DELETE) is supported by a server, you can send an OPTIONS request first to check. This avoids attempting methods that the server doesn’t support, which could result in errors.

Example:

OPTIONS /api/resource HTTP/1.1
Host: example.com

Server Response:

HTTP/1.1 200 OK
Allow: GET, POST, DELETE

How OPTIONS is Used in Cross-Origin Resource Sharing (CORS)

One of the most common uses of the OPTIONS method is in handling Cross-Origin Resource Sharing (CORS). CORS is a security feature that ensures resources on one domain aren’t accessed improperly by web pages from another domain.

CORS and Preflight Requests

When a browser needs to make a cross-origin request (for example, a request from domainA.com to api.domainB.com), the browser first sends an OPTIONS request, known as a preflight request, to the target server. The preflight request checks whether the actual request is allowed under the server’s CORS policy.

1. Preflight Request: The browser sends an OPTIONS request before the actual request (such as a POST or PUT). This request asks the server which methods are allowed, which domains can access the resource, and whether specific headers or credentials are permitted.

2. Server’s Response: The server responds with CORS headers, such as Access-Control-Allow-Methods, Access-Control-Allow-Origin, and Access-Control-Allow-Headers. This tells the browser whether the request can proceed and what methods or domains are allowed.

   Example Response:

    HTTP/1.1 204 No Content
    Access-Control-Allow-Origin: https://domainA.com
    Access-Control-Allow-Methods: GET, POST
    Access-Control-Allow-Headers: Content-Type
   

3. Ensuring Security: CORS and the preflight OPTIONS request ensure that cross-origin requests are only allowed when the server permits it. Without this security step, websites could make unauthorized requests to other domains.

4. Handling Complex Requests: If a request includes custom headers, uses HTTP methods other than simple ones like GET or POST, or sends credentials like cookies, the browser automatically sends an OPTIONS preflight request. If the server denies the request (that is, returns headers disallowing the action), the browser blocks the request.

Simplified Workflow:

• Browser: "Can I make this request to api.domainB.com?"

• Server: "Yes, you can use GET and POST, but only from domainA.com and with these headers."

• Browser: Proceeds with the actual request if the response permits.

Use Cases for the OPTIONS Method

• Discovering Available Methods: Useful for developers to check which HTTP methods a resource supports before performing an operation.

• CORS Preflight: Critical in web security to ensure that cross-origin requests are properly authorized.

• Improving API Efficiency: APIs can expose the supported methods for a resource via OPTIONS, making it easier for clients to understand what operations can be performed.

The OPTIONS method is thus essential in web applications for managing request permissions and improving security, particularly in cross-domain scenarios.

TRACE Method

The TRACE method is used to debug web applications and test how requests pass through networks. When you send a TRACE request, it triggers a loopback, where the server sends back the exact request it received, without any changes. This helps developers see if anything is modified as the request travels through different systems, like firewalls or proxies, before reaching the server.

In simple terms, TRACE allows you to trace the path your request takes from your client (like a browser or API tool) to the server and back. This method can be useful for identifying issues during the transmission of a request.

Understanding Loopback Diagnostics

Loopback diagnostics refers to the process of seeing how data is handled as it moves across networks, using TRACE to check if the original request remains intact. Here’s how it works:

1. Sending a TRACE Request: You send a TRACE request to a server. This request is usually small, containing basic information like the method, URL, and headers. It doesn't carry any extra data or payload like POST or PUT methods.

2. Server’s Response: Instead of responding with a resource, the server sends back the exact request it received. This includes the HTTP method, the URL, headers, and anything else in the original request. The server doesn’t modify or process the request—it just returns it exactly as it was received.

3. Tracing the Path: When the TRACE response comes back, it allows you to see the entire path the request took, including any changes made to the request headers or content. This is useful for diagnosing issues such as:

   • Proxy Servers: If your request passes through one or more proxy servers before reaching the destination, TRACE can show if those proxies have altered the request headers or content.

   • Network Firewalls: Some network firewalls might add or modify headers as your request passes through them. TRACE helps reveal these modifications.

   • Error Tracking: If a request fails to behave as expected, TRACE can help track where something went wrong in the transmission.

4. Effective Debugging: TRACE is especially helpful when debugging web applications or APIs. If your application is experiencing errors due to routing, proxies, or server configurations, TRACE lets you see the unaltered request, making it easier to pinpoint the issue.

Security Concerns with TRACE

Although TRACE can be useful for debugging, it is generally considered a security risk and is often disabled on most servers for several reasons:

1. XSS Attacks (Cross-Site Scripting): TRACE can expose sensitive information such as cookies or authentication tokens in the headers. Malicious actors could exploit TRACE to capture these details, leading to security breaches, especially if a vulnerability like cross-site scripting (XSS) is present. This makes TRACE a potential target for attackers trying to steal user data.

2. Request Modification Exposure: Since TRACE shows all modifications made to a request, it can also reveal how internal proxies and firewalls handle requests. This could give attackers insight into the internal workings of a network, making it easier for them to plan further attacks.

3. Disabling TRACE for Safety: For these reasons, TRACE is often disabled on most web servers to prevent abuse. In many modern web applications, more secure methods exist for debugging requests and tracing network paths, so TRACE is rarely necessary in everyday use.

4. Safer Alternatives: Developers can use safer diagnostic tools and logging features built into modern web frameworks and APIs. These alternatives provide similar insights without exposing security risks associated with TRACE.

CONNECT Method

The CONNECT method is mainly used to establish a tunnel between a client and a server through an intermediary, usually a proxy server. When the client sends a CONNECT request, the server creates a tunnel that allows encrypted data to flow between the client and the destination server. This method is crucial for securing connections, especially when dealing with HTTPS.

CONNECT does not handle any actual data on its own. Instead, it sets up a path for secure communication, allowing encrypted information to pass through proxies without being modified or inspected.

How CONNECT Works

1. Sending a CONNECT Request: A client, such as a web browser, sends a CONNECT request to the proxy server. This request includes the target server's hostname and port, typically the standard HTTPS port (443). For example, when accessing https://example.com, the browser sends a CONNECT request to the proxy server asking it to connect to that domain on port 443.

2. Establishing the Tunnel: The proxy server, upon receiving the CONNECT request, establishes a tunnel to the destination server. This tunnel allows encrypted communication to pass through without interference. The proxy simply forwards traffic between the client and the destination, acting as a relay.

3. Encrypted Communication: Once the tunnel is set up, the client and the destination server can communicate directly using a secure encryption protocol, such as TLS (used by HTTPS). The proxy cannot decrypt or modify the data passing through because it’s encrypted between the client and the server.

4. Secure Data Transfer: With the CONNECT method, sensitive data—such as login credentials, personal information, or financial transactions—can be transmitted securely between the client and the server, even when passing through proxies. The encrypted tunnel ensures that the data remains confidential and intact.

Example of a CONNECT Request and Response

• CONNECT Request:

    CONNECT example.com:443 HTTP/1.1
    Host: example.com
  

• Proxy Response (if the tunnel is successfully established):

    HTTP/1.1 200 Connection Established
  

Tunneling with CONNECT

The term tunneling in this context refers to creating a direct, secure link between the client and the destination server via a proxy. The proxy acts as a middleman but does not interfere with or access the encrypted data being transmitted through the tunnel.

Steps of the Tunneling Process:

• Sending the CONNECT Request: The client sends a CONNECT request to the proxy, specifying the destination server and port (for example, port 443 for HTTPS).

• Proxy Sets Up the Tunnel: The proxy server establishes a secure tunnel between the client and the destination server, forwarding traffic between the two endpoints.

• Encrypted Communication Begins: The client and the destination server communicate directly through the encrypted tunnel using HTTPS or another encryption protocol. The proxy forwards the encrypted traffic but cannot access or modify it.

Typical Use Cases of the CONNECT Method

1. HTTPS Through Proxies: One of the most common uses of the CONNECT method is enabling HTTPS traffic through proxies. In many corporate or network environments, internet traffic must pass through a proxy server. For secure websites using HTTPS, the CONNECT method allows the proxy server to establish a tunnel, forwarding encrypted traffic between the client and the destination server without inspecting the data.

   • Example: When you visit a secure banking website from a corporate network, your browser may need to pass through a corporate proxy. The CONNECT method is used to establish an encrypted tunnel between your browser and the bank's website, allowing sensitive data (such as login credentials) to pass through the proxy securely.

2. VPNs and Secure Channels: VPN (Virtual Private Network) services also rely on similar tunneling techniques to encrypt and route internet traffic securely. Some VPN services use CONNECT to create secure tunnels, ensuring that all data transmitted between the user and the internet is encrypted and safe from eavesdropping.

3. Accessing Blocked Content: In environments where certain websites are blocked (for example, schools or offices), CONNECT can sometimes be used to bypass restrictions by establishing a tunnel through a proxy. Although this practice may violate network policies, it illustrates how CONNECT can be used to establish secure, unmonitored access to otherwise blocked resources.

4. Custom Proxies: Developers may set up custom proxies to route application traffic for performance or security reasons. In these cases, CONNECT allows HTTPS or other secure traffic to pass through the proxy while maintaining privacy and security, as the proxy server cannot access the encrypted data inside the tunnel.

Security Considerations

While CONNECT is essential for secure communications, it also presents some security challenges:

• Bypassing Content Filters: Since CONNECT creates an encrypted tunnel that proxies cannot inspect, it can be used to bypass content filtering systems. This allows users to access restricted websites or services, which may violate organizational policies.

• Tunneling Malicious Traffic: CONNECT can be exploited by malicious actors to tunnel harmful or unauthorized traffic through a proxy. Because the traffic is encrypted, firewalls and security systems may not detect malicious activity.

• Mitigation: Many organizations address these risks by closely monitoring and restricting the use of the CONNECT method. Some proxies perform SSL interception to decrypt and inspect HTTPS traffic, though this introduces privacy concerns and may compromise user security.

Conclusion

HTTP methods are essential in enabling communication between web applications and servers. Each method, from GET to CONNECT, is designed for a specific task, such as sending data, retrieving information, updating resources, or setting up secure connections. Choosing the correct method for the job improves the efficiency and security of your application.

GET is ideal for retrieving data, POST and PUT help with creating and updating, PATCH handles partial updates, and DELETE removes resources. HEAD checks response headers without retrieving content, OPTIONS shows supported methods, and TRACE and CONNECT assist with debugging and secure communication.

Using the appropriate HTTP methods ensures your application runs efficiently and securely, offering a smooth experience for users.

If you have any questions or suggestions, feel free to reach out on LinkedIn. If you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

In this article, we’ll talk about some of the new tools and methods available in JavaScript, like findLast, toReversed, toSorted, and more. These features allow you to manipulate arrays and data in smarter ways without changing your original data. We’ll look at how each one works, and I’ll show you examples, explaining how they can make your code better.

Table of Contents

1. Array Methods in JavaScript

2. findLast: Locate the Last Matching Element

3. findLastIndex: Pinpoint the Index of the Last Match

4. toReversed: Reverse Without Changing Original Arrays

5. toSorted: Immutable Sorting for Cleaner Code

6. toSpliced: Create New Arrays by Splicing Without Mutation

7. with: Modify Array Elements by Index

8. Combining New JavaScript Methods for Advanced Data Manipulation

9. Backward Compatibility and Polyfills

10. Conclusion

Array Methods in JavaScript

JavaScript has a variety of methods that make working with arrays easier. Arrays are lists of items, and you’ll often need to search, sort, or update these lists. Older methods like push(), pop(), map(), and filter() have been useful, but they can sometimes change the original data, which isn't always what you want.

Newer JavaScript methods offer better options to handle arrays, especially when you need to keep the original data unchanged. These new methods make coding more reliable and cleaner.

The latest JavaScript methods provide more ways to work with arrays without changing the original list. These methods, like findLast, toSorted, and toReversed, create a new array or give you the result directly, leaving your original array untouched.

findLast: Locate the Last Matching Element

When working with arrays, you might want to search for an item that matches certain conditions. The older find() method helps you get the first matching item, but what if you need the last match instead?

This is where findLast() comes in. It searches the array starting from the end and gives you the last item that meets your condition, without manually reversing the array.

Syntax and Parameters of findLast

The findLast() method works almost like find(), but it looks for the last match. Here’s the basic syntax:

array.findLast(callback(element, index, array), thisArg);

• callback: A function that checks each item in the array.

• element: The current item being checked.

• index: The index of the current item.

• array: The array being processed.

• thisArg: Optional. It can be used as this inside the callback.

Practical Examples of Using findLast

Let’s look at a simple example. Imagine you have an array of numbers, and you want to find the last number greater than 5.

const numbers = [2, 7, 4, 9, 3];

// Find the last number greater than 5
const lastNumberOver5 = numbers.findLast(num => num > 5);
console.log(lastNumberOver5); // Output: 9

In this example, findLast() starts searching from the end of the array and returns the last number that is greater than 5.

Finding the Last Occurrence in Arrays

You can use findLast() to get the last matching item, which can be helpful when there are multiple matches in an array. Let’s say you want to find the last even number in an array:

const numbers = [1, 4, 6, 8, 3, 6];

// Find the last even number
const lastEvenNumber = numbers.findLast(num => num % 2 === 0);
console.log(lastEvenNumber); // Output: 6

Comparison with find()

The key difference between find() and findLast() is the direction in which they search. find() starts from the beginning of the array and stops at the first match, while findLast() starts from the end and returns the last match.

Here’s a comparison:

const numbers = [3, 5, 7, 9, 5];

// Using find()
const first5 = numbers.find(num => num === 5);
console.log(first5); // Output: 5 (first match)

// Using findLast()
const last5 = numbers.findLast(num => num === 5);
console.log(last5); // Output: 5 (last match)

The findLast() method is particularly useful in scenarios where the order of items matters, such as:

1. Retrieving the last message in a chat app that meets a certain condition.

2. Finding the last error in a list of system logs.

3. Getting the last transaction above a certain amount in a financial app.

findLastIndex: Pinpoint the Index of the Last Match

Sometimes, you don’t just need the last matching item in an array, but you also want its position. This is where findLastIndex() helps. It works like findLast(), but instead of returning the value, it returns the index of the last element that meets your condition. This makes it easier to track the location of that item in the array.

Syntax and Key Parameters

The syntax of findLastIndex() is simple and looks a lot like findLast():

array.findLastIndex(callback(element, index, array), thisArg);

• callback: A function that runs for each element in the array.

• element: The current item being checked.

• index: The position of the current item in the array.

• array: The array being processed.

• thisArg: Optional. Used as this inside the callback.

If no element meets the condition, findLastIndex() returns -1.

Practical Examples of findLastIndex in Action

Let’s look at an example. Say you have an array of numbers and want to find the index of the last number greater than 5.

const numbers = [2, 7, 4, 9, 3];

// Find the index of the last number greater than 5
const lastIndexOver5 = numbers.findLastIndex(num => num > 5);
console.log(lastIndexOver5); // Output: 3 (index of 9)

In this case, findLastIndex() returns 3, which is the position of 9, the last number greater than 5 in the array.

Retrieving the Last Index Matching a Condition

If you need to pinpoint the position of the last element that fits a specific condition, findLastIndex() is the right tool. Here’s another example, finding the last even number in an array:

const numbers = [1, 4, 6, 8, 3, 6];

// Find the index of the last even number
const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0);
console.log(lastEvenIndex); // Output: 5 (index of the last 6)

In this case, the index of the last even number is 5.

Contrast with findIndex

The main difference between findIndex() and findLastIndex() is the direction they search. findIndex() starts from the beginning of the array and stops at the first match. findLastIndex() works in reverse, starting from the end and returning the last match.

Here’s a quick comparison:

const numbers = [3, 5, 7, 9, 5];

// Using findIndex()
const first5Index = numbers.findIndex(num => num === 5);
console.log(first5Index); // Output: 1 (first match)

// Using findLastIndex()
const last5Index = numbers.findLastIndex(num => num === 5);
console.log(last5Index); // Output: 4 (last match)

Performance Considerations for Large Data Sets

In small arrays, the performance difference between findIndex() and findLastIndex() might not be noticeable. But with large datasets, the difference can matter. Since findLastIndex() starts from the end of the array, it may be more efficient if you expect the match to be near the end. This can save time compared to scanning from the start using findIndex().

For example, when working with a large log of events, using findLastIndex() could quickly find the most recent event that meets a condition:

const events = new Array(100000).fill(0).map((_, i) => i + 1);

// Find the index of the last number divisible by 5000
const lastDivisibleBy5000 = events.findLastIndex(num => num % 5000 === 0);
console.log(lastDivisibleBy5000); // Output: 99999 (index of 100000)

In large datasets like this, using findLastIndex() helps avoid unnecessary searches when you’re only interested in the most recent or last occurrence.

toReversed: Reverse Without Changing Original Arrays

In JavaScript, the reverse() method is used to flip the order of elements in an array. But it changes the original array. This can cause problems if you want to keep the original data intact. The toReversed() method fixes this issue by allowing you to reverse an array without affecting the original.

Syntax and Usage of toReversed

The toReversed() method is simple to use. It creates a reversed version of the array without modifying the original one. Here’s the basic syntax:

const newArray = array.toReversed();

• array: The array you want to reverse.

• newArray: A new array with the reversed elements.

Examples of Reversing Arrays Safely

Let’s look at an example where you want to reverse an array but still need to keep the original version:

const numbers = [1, 2, 3, 4, 5];

// Reverse the array without changing the original
const reversedNumbers = numbers.toReversed();

console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]
console.log(numbers);         // Output: [1, 2, 3, 4, 5]

In this case, the original numbers array stays the same, and toReversed() returns a new array with the elements flipped.

Avoiding Side Effects with toReversed

One of the biggest benefits of toReversed() is that it avoids side effects. The traditional reverse() method directly changes the original array, which can lead to bugs if the original data is needed elsewhere. With toReversed(), the original array remains unchanged, so you don’t have to worry about unexpected changes.

const letters = ['a', 'b', 'c', 'd'];

// Using toReversed to avoid side effects
const reversedLetters = letters.toReversed();

console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters);         // Output: ['a', 'b', 'c', 'd']

As you can see, the original letters array is still in its original form after calling toReversed().

Comparison with reverse Method

The reverse() method directly modifies the array, while toReversed() leaves the original unchanged. Here’s a quick comparison:

const nums = [10, 20, 30, 40];

// Using reverse()
const reversedNums1 = nums.reverse();
console.log(reversedNums1);  // Output: [40, 30, 20, 10]
console.log(nums);           // Output: [40, 30, 20, 10] (Original array changed)

// Using toReversed()
const reversedNums2 = nums.toReversed();
console.log(reversedNums2);  // Output: [10, 20, 30, 40]
console.log(nums);           // Output: [40, 30, 20, 10] (Original stays as it was after reverse)

As shown, reverse() changes the array itself, but toReversed() doesn’t touch the original array.

How toReversed Enhances Functional Programming Practices

In functional programming, the idea is to avoid changing data directly. Instead, new values are returned from functions, leaving the original data untouched.

toReversed() fits perfectly into this concept, allowing arrays to be reversed without altering the original data. This leads to cleaner and safer code because you reduce the risk of accidentally changing something.

For example, in a functional programming setup, you might want to reverse an array of scores for display purposes without changing the actual scores:

const scores = [95, 87, 75, 60];

// Reverse the scores for display purposes without modifying the original
const displayedScores = scores.toReversed();

console.log(displayedScores); // Output: [60, 75, 87, 95]
console.log(scores);          // Output: [95, 87, 75, 60] (Original scores intact)

toSorted: Immutable Sorting for Cleaner Code

JavaScript has had the sort() method for a long time, which allows you to arrange elements of an array. The issue is that sort() changes the original array, which can lead to unintended problems when the original data is still needed elsewhere.

To fix this, JavaScript introduced toSorted(). This method lets you sort arrays without changing the original, making the code cleaner and more reliable.

Syntax and Parameters

The syntax for toSorted() is straightforward, similar to sort(), but it doesn't modify the original array:

const newArray = array.toSorted(compareFunction);

• array: The array you want to sort.

• compareFunction: Optional. A function that defines how the elements should be sorted. If not provided, the array elements are converted to strings and sorted in ascending order.

Use Cases of toSorted

Let’s say you have a list of students and want to sort them based on their scores, but you need the original list untouched:

const students = [
  { name: 'Dave', score: 85 },
  { name: 'Alexa', score: 92 },
  { name: 'Katie', score: 78 }
];

// Sort students without changing the original array
const sortedStudents = students.toSorted((a, b) => b.score - a.score);

console.log(sortedStudents);
// Output: [{name: 'Katie', score: 92}, {name: 'Dave', score: 85}, {name: 'Katie', score: 78}]

console.log(students);
// Output (unchanged): [{name: 'Dave', score: 85}, {name: 'Alexa', score: 92}, {name: 'Katie', score: 78}]

This allows you to sort the students based on their scores without affecting the original data, which might be useful elsewhere in the code.

Sorting Arrays Without Mutating Original Data

toSorted() provides a safe way to handle sorting without the risk of accidentally changing the original array. This is especially helpful when working on large projects where data might be used in different parts of the code.

Here’s an example where you sort a simple list of numbers:

const numbers = [5, 2, 9, 1, 7];

// Sort the numbers without changing the original array
const sortedNumbers = numbers.toSorted();

console.log(sortedNumbers); // Output: [1, 2, 5, 7, 9]
console.log(numbers);       // Output (unchanged): [5, 2, 9, 1, 7]

Comparison with the Traditional sort Method

The traditional sort() method sorts an array but changes the original, which can cause problems if the original array is needed elsewhere.

const numbers = [3, 1, 4, 2];

// Using sort()
const sortedNumbers1 = numbers.sort();
console.log(sortedNumbers1); // Output: [1, 2, 3, 4]
console.log(numbers);        // Output (original array changed): [1, 2, 3, 4]

// Using toSorted()
const sortedNumbers2 = numbers.toSorted();
console.log(sortedNumbers2); // Output: [1, 2, 3, 4]
console.log(numbers);        // Output (unchanged): [3, 1, 4, 2]

As you can see, sort() changes the original array, but toSorted() keeps it untouched.

Performance and Best Practices

For smaller arrays, performance between sort() and toSorted() will be almost the same. But for larger datasets or when sorting is frequent, toSorted() can help avoid side effects and make the code safer.

Using toSorted() means you can safely pass the original array to other parts of the code without worrying about unexpected changes.

To get the best performance, make sure to always use a proper compare function, especially for complex sorting, like sorting objects:

const people = [
  { name: 'Rash', age: 30 },
  { name: 'Josh', age: 25 },
  { name: 'Sammy', age: 40 }
];

// Sort people by age without mutating the original array
const sortedPeople = people.toSorted((a, b) => a.age - b.age);

console.log(sortedPeople);
// Output: [{name: 'Josh', age: 25}, {name: 'Rash', age: 30}, {name: 'Sammy', age: 40}]

Using toSorted() improves the readability of your code and helps avoid unintended side effects, especially when working with important data.

toSpliced: Create New Arrays by Splicing Without Mutation

The splice() method in JavaScript has been useful for adding, removing, or replacing elements within an array. But it changes the original array, which can lead to unexpected results if you want to keep the original data.

To solve this, toSpliced() was introduced. It works like splice(), but without changing the original array, allowing for a safer and cleaner approach.

Syntax and Practical Usage

Here’s how the toSpliced() method works. It creates a new array after splicing, leaving the original one unchanged.

const newArray = array.toSpliced(start, deleteCount, item1, item2, ...);

• start: The index at which to start modifying the array.

• deleteCount: The number of items to remove from the array (optional).

• item1, item2, ...: The items to add at the start index (optional).

Examples: Splicing Arrays in an Immutable Way

Let’s explore a practical example where you want to remove and replace elements from an array but keep the original intact:

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Create a new array by removing 'banana' and adding 'blueberry' without changing the original
const newFruits = fruits.toSpliced(1, 1, 'blueberry');

console.log(newFruits); // Output: ['apple', 'blueberry', 'cherry', 'date']
console.log(fruits);    // Output: ['apple', 'banana', 'cherry', 'date']

Here, toSpliced() removes 'banana' and adds 'blueberry' at the same position, but the original fruits array stays unchanged.

Comparison with the Traditional splice Method

The key difference between splice() and toSpliced() is that splice() changes the original array, while toSpliced() leaves it untouched and returns a new array.

const numbers = [1, 2, 3, 4];

// Using splice()
const splicedNumbers = numbers.splice(1, 2, 10, 20);
console.log(splicedNumbers); // Output: [2, 3] (Removed elements)
console.log(numbers);        // Output: [1, 10, 20, 4] (Original array changed)

// Using toSpliced()
const newNumbers = numbers.toSpliced(1, 2, 5, 6);
console.log(newNumbers);     // Output: [1, 5, 6, 4]
console.log(numbers);        // Output: [1, 10, 20, 4] (Original array unchanged)

splice() modifies the original array, but toSpliced() does not, giving you more control and avoiding unwanted changes to data.

Use Cases for Functional Programming

toSpliced() fits well with functional programming, which favors avoiding changes to existing data. For example, in applications where you often manipulate arrays (like lists of users or products), toSpliced() helps keep the original data intact.

const users = ['Dave', 'Alexa', 'Katie'];

// Remove 'Bob' and add 'Dan' without modifying the original array
const updatedUsers = users.toSpliced(1, 1, 'Dan');

console.log(updatedUsers); // Output: ['Dave', 'Dan', 'Katie']
console.log(users);        // Output: ['Dave', 'Alexa', 'Katie']

This method makes it easier to manage and work with arrays in situations where the original data needs to be preserved.

Avoiding Pitfalls with toSpliced

The main advantage of toSpliced() is that it avoids unintended changes to the original array. It reduces the chances of bugs caused by data being accidentally modified.

But it’s important to note that creating a new array with toSpliced() means that the old array is not directly updated, so you’ll need to assign the result to a new variable if you want to use the modified data.

const colors = ['red', 'green', 'blue'];

// Create a new array that adds 'yellow' at index 1
const newColors = colors.toSpliced(1, 0, 'yellow');

console.log(newColors); // Output: ['red', 'yellow', 'green', 'blue']
console.log(colors);    // Output: ['red', 'green', 'blue'] (Original unchanged)

with: Modify Array Elements by Index

The with method is a new and powerful tool introduced in JavaScript to help replace elements in an array without changing the original array.

This is helpful when you need to update specific items without affecting the rest of the data, keeping your original array intact. It promotes safer and cleaner code, especially when working with large datasets or in functional programming styles.

Syntax and Key Parameters

The with method allows you to create a new array where one element at a specific index is replaced.

const newArray = array.with(index, newValue);

• index: The position of the element you want to replace.

• newValue: The value to insert at the given index.

Examples of Using with for Element Replacement

Let’s explore a simple example where you want to replace an item at a specific position:

const fruits = ['apple', 'banana', 'cherry'];

// Replace 'banana' with 'blueberry' at index 1
const newFruits = fruits.with(1, 'blueberry');

console.log(newFruits); // Output: ['apple', 'blueberry', 'cherry']
console.log(fruits);    // Output: ['apple', 'banana', 'cherry']

In this example, we replaced 'banana' with 'blueberry', but the original fruits array stays the same, which is very useful to avoid side effects in your code.

Replacing Elements in Arrays While Maintaining Immutability

One of the key strengths of the with method is that it does not change the original array. This helps maintain immutability, which is often needed when handling data in larger applications. You can confidently replace elements without worrying about accidental changes to the original data.

const numbers = [10, 20, 30, 40];

// Replace the number at index 2 (30) with 35
const updatedNumbers = numbers.with(2, 35);

console.log(updatedNumbers); // Output: [10, 20, 35, 40]
console.log(numbers);        // Output: [10, 20, 30, 40] (Original unchanged)

This makes the with method an ideal choice when you need to update data but still want to reference the original array elsewhere in your code.

Applications of the with Method

The with method can be applied in many scenarios, such as updating user profiles, modifying a list of items, or working with any data that requires selective updates. For example, when dealing with a table of users, you can replace a specific user’s data without affecting the entire dataset.

const users = ['Dave', 'Alexa', 'Katie'];

// Update Bob's name to 'Dan'
const updatedUsers = users.with(1, 'Dan');

console.log(updatedUsers); // Output: ['Dave', 'Dan', 'Katie']
console.log(users);        // Output: ['Dave', 'Alexa', 'Katie'] (Original unchanged)

This method helps avoid confusion that can arise from unwanted changes to data when updating specific elements in an array.

with vs Traditional Methods for Element Replacement

Before the introduction of with, replacing elements in arrays required methods like splice() or manual approaches, both of which would modify the original array:

const colors = ['red', 'green', 'blue'];

// Traditional method (using mutation)
colors.splice(1, 1, 'yellow');
console.log(colors); // Output: ['red', 'yellow', 'blue'] (Original array changed)

With the new with method, you can avoid this problem:

const colors = ['red', 'green', 'blue'];

// Using `with` method
const newColors = colors.with(1, 'yellow');
console.log(newColors); // Output: ['red', 'yellow', 'blue']
console.log(colors);    // Output: ['red', 'green', 'blue'] (Original unchanged)

The with method ensures the original data remains intact which makes it a better option for situations where immutability is important.

Combining New JavaScript Methods for Advanced Data Manipulation

The new JavaScript methods like findLast, toSorted, and with provide powerful tools for managing and transforming data. When used together, they allow you to create complex data operations in a simple and readable way.

Let’s look at how you can combine these methods to handle data efficiently and write clean, effective code.

How to Chain Methods like findLast, toSorted, and with

Chaining methods in JavaScript lets you apply multiple transformations to your data in a single flow.

For example, you might want to sort an array, find the last matching element, and then replace it with a new value. Here’s how you can do that using toSorted, findLast, and with:

const numbers = [20, 5, 15, 30, 10];

// Chain methods to sort, find the last element greater than 10, and replace it
const result = numbers
  .toSorted((a, b) => a - b)   // Sort the array in ascending order
  .with(numbers.findLastIndex(num => num > 10), 100);  // Find and replace the last match

console.log(result); // Output: [5, 10, 15, 20, 100]

In this example:

• toSorted() arranges the array in ascending order without changing the original array.

• findLastIndex() finds the last number greater than 10.

• with() replaces that number (which is 30) with 100, without modifying the original array.

This combination is useful when working with complex data workflows and ensures that the original data remains unchanged.

Creating Complex Data Transformations with Ease

The real power of these methods shines when you want to perform multiple actions on arrays in a readable and organized way. Here’s another example where we combine sorting, filtering, and replacing data all in one flow:

const students = [
  { name: 'Dave', score: 85 },
  { name: 'Alexa', score: 75 },
  { name: 'Katoe', score: 90 }
];

// Chain methods to sort, find the last student with a score above 80, and update their score
const updatedStudents = students
  .toSorted((a, b) => b.score - a.score)   // Sort students by score (descending)
  .with(
    students.findLastIndex(student => student.score > 80), 
    { ...students.findLast(student => student.score > 80), score: 95 }
  );

console.log(updatedStudents);

In this case:

• toSorted() sorts students based on their scores from highest to lowest.

• findLastIndex() identifies the last student who scored above 80.

• with() creates a new array with that student’s score updated to 95.

The flexibility of combining these methods means you can manage even complex data structures easily without compromising readability or changing the original data.

Best Practices for Writing Clean, Efficient Code with These Methods

To write clean and efficient code, consider the following tips when using these new JavaScript methods:

1. Avoid Mutating the Original Data: Use methods like toSorted, toReversed, and with that do not change the original array. This ensures that your data remains consistent throughout your code.

2. Use Chaining for Readability: Chain methods when performing multiple transformations. This keeps your code concise and easier to follow.

3. Use Arrow Functions: Short arrow functions help reduce the complexity of your code. For instance:

    const sortedNumbers = numbers.toSorted((a, b) => a - b);
   

4. Combine Methods Thoughtfully: Make sure the methods you chain together logically follow each other. For example, it makes sense to sort data first before finding the last element that matches a condition.

5. Handle Large Datasets Carefully: For very large arrays, consider performance implications. Methods like findLast and toSorted might take time on bigger datasets, so always test your code’s performance with realistic data sizes.

Backward Compatibility and Polyfills

As new JavaScript features are added, not all browsers will support them right away. It’s important to make sure your code still works on older browsers without breaking. Let's talk about how you can handle this and introduce polyfills to fill the gap when using the latest features.

How to Ensure Backward Compatibility with Older Browsers

To make sure your code works smoothly on older browsers that don’t support new JavaScript methods like findLast, toSorted, or with, you can add checks to see if a feature is available before using it. This way, the code doesn’t fail on unsupported browsers.

Here’s an example:

if (Array.prototype.findLast) {
  // Use the findLast method
  const arr = [1, 2, 3, 4, 5];
  const lastOdd = arr.findLast(num => num % 2 !== 0);
  console.log(lastOdd); // Output: 5
} else {
  // Fallback code for older browsers
  console.log('findLast is not supported');
}

This example checks if findLast exists. If it doesn’t, you can run a fallback or show a message. This approach helps maintain backward compatibility.

Overview of Polyfills for New JavaScript Features

A polyfill is a piece of code that adds support for new JavaScript features on browsers that don’t have them yet. It basically provides an alternative implementation of the feature.

For example, let’s create a polyfill for findLast:

if (!Array.prototype.findLast) {
  Array.prototype.findLast = function(callback) {
    for (let i = this.length - 1; i >= 0; i--) {
      if (callback(this[i], i, this)) {
        return this[i];
      }
    }
    return undefined;
  };
}

This polyfill adds the findLast method to arrays that don’t support it. Now, even older browsers can run code that uses this feature.

Polyfills for common methods are available on sites like MDN or through libraries like core-js that cover many modern JavaScript features.

Tools and Resources to Test Browser Support

Before using new features, it’s helpful to check how widely supported they are across different browsers. Here are some tools that can assist:

1. Can I Use: A popular website that shows browser compatibility for new JavaScript features. You can search for methods like toSorted or findLast to see which browsers support them.

   Example: Can I Use: findLast

2. Babel: A JavaScript compiler that converts new JavaScript code into older versions that work on older browsers. Babel can automatically add polyfills for unsupported features.

   Example usage with Babel:

    npm install --save-dev @babel/preset-env
   

   Then configure Babel to use the preset:

    {
      "presets": ["@babel/preset-env"]
    }
   

3. Polyfill.io: A service that automatically serves the necessary polyfills based on the user's browser.

   To use it, simply add this script to your HTML:

    <script src="https://polyfill.io/v3/polyfill.min.js"></script>
   

This script automatically adds only the polyfills needed for the browser loading the page, making it an easy way to handle backward compatibility.

Conclusion

We’ve explored some of the latest JavaScript features, including methods like findLast, findLastIndex, toReversed, toSorted, toSpliced, and with.

These new additions bring more flexibility and efficiency to working with arrays. They help avoid unwanted changes to the original data and make code cleaner and easier to follow. For example, toSorted allows sorting without altering the original array, and findLast makes it simpler to locate the last matching element in a list.

Each of these methods saves time and reduces complexity when managing and transforming data.

As JavaScript continues to evolve, it’s important to start using these methods in future projects. They can simplify complex data manipulation tasks and make your code easier to maintain. Try adding these methods to your current codebase and explore how they can improve the way you write and manage JavaScript.

The next time you work with arrays, consider using toSorted for sorting, findLast for searching, or with for replacing elements without changing the original data. These small adjustments can have a big impact on the quality of your code.

If you have any questions or suggestions, feel free to reach out on LinkedIn. If you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

If you often find yourself wondering where all your money went or how you managed to spend so much, then this project is for you. I created a simple expense tracker to help manage my own finances, and I decided to share a step-by-step tutorial with the developer community.

In this tutorial, we'll walk through the process of building a basic expense tracker from scratch. Whether you're new to web development or looking to enhance your skills, this project will provide you with practical experience in HTML, CSS, and JavaScript.

By the end, you'll have a fully functional tool to track your income, manage expenses, and maintain a clear overview of your finances within a sleek and user-friendly interface.

We'll start by setting up the structure of the tracker, move on to styling it to make it visually appealing, and finally, we'll implement the functionality that will bring it to life.

Table of Contents

1. Setting Up the HTML Structure

2. Styling the Expense Tracker with CSS

3. Implementing Functionality with JavaScript

4. Enhancing the User Experience

5. Testing and Debugging

6. Conclusion

Prerequisites

To get the most out of this tutorial, having a basic understanding of HTML, CSS, and JavaScript will be beneficial. Familiarity with creating simple web pages and handling basic DOM manipulation in JavaScript will help you follow along more easily.

But if you're new to these technologies, don't worry – I'll guide you through each step with detailed explanations.

Setting Up the HTML Structure

First of all, we need to set up the basic HTML structure. This will serve as the foundation for everything else we'll build. Don’t worry if you’re new to HTML. I'll guide you through each step.

1. Create a Basic HTML Template

Start by creating a new file and naming it index.html. This file will hold the structure of our expense tracker. Every HTML file starts with a basic template, which includes the <!DOCTYPE html> declaration, the <html> tag, and the head and body sections.

Here’s what your initial HTML template should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expense Tracker</title>
</head>
<body>

</body>
</html>

2. Adding a Container

Inside the <body> tag, let’s start by adding a div element with a class of container. This container will hold all the content of our expense tracker, such as the title, input fields, and summary. We use a container to center everything on the page and make sure our layout looks neat.

Here’s how you can do it:

<body>
    <div class="container">
        <!-- All content will go here -->
    </div>
</body>

3. Add the Expense Tracker Title

Now, let’s add a title to our expense tracker. We’ll use the <h1> tag for this, which is typically used for the main heading on a webpage.

Add the following code inside the container div:

<h1>Expense Tracker</h1>

This heading will display prominently at the top of your page, letting users know what the application is about.

4. Setting Up Sections for Income and Expenses

Next, we'll add sections for income and expenses. These sections will include input fields where users can enter their income and expense details.

Start by adding two div elements, each with a class of section. One section will be for income, and the other for expenses. Here’s the code:

<div class="section">
    <h2>Income</h2>
    <!-- Income input fields will go here -->
</div>

<div class="section">
    <h2>Expenses</h2>
    <!-- Expense input fields will go here -->
</div>

The <h2> tags inside these sections serve as subheadings to label each section. We’ll add input fields in the next step.

5. Adding Input Fields

Now, let’s add input fields for the income section. Users will need to enter a description (for example, “Salary”) and an amount. Each input field will be wrapped in a div with a class of input-group for easy styling later.

While this example uses Nigerian Naira (₦) for the currency, you can easily adapt it to any currency you prefer. Simply replace the currency symbol in the placeholder or any labels to match your needs.

Here’s how you can add the input fields:

<div class="input-group">
    <label for="income-description">Description</label>
    <input type="text" id="income-description" placeholder="e.g. Salary">
</div>
<div class="input-group">
    <label for="income-amount">Amount (₦)</label>
    <input type="number" id="income-amount" placeholder="e.g. 100000">
</div>

Do the same for the expenses section, but this time, we’ll also add a dropdown for the category of the expense:

<div class="input-group">
    <label for="expense-description">Description</label>
    <input type="text" id="expense-description" placeholder="e.g. Rent">
</div>
<div class="input-group">
    <label for="expense-category">Category</label>
    <select id="expense-category">
        <option value="Housing">Housing</option>
        <option value="Food">Food</option>
        <option value="Transportation">Transportation</option>
        <option value="Entertainment">Entertainment</option>
        <option value="Others">Others</option>
    </select>
</div>
<div class="input-group">
    <label for="expense-amount">Amount (₦)</label>
    <input type="number" id="expense-amount" placeholder="e.g. 50000">
</div>

6. Add a Button to Each Section

Finally, we need a button in each section that users will click to add their income or expense to the tracker. Place a button element inside each section like this:

<div class="button-group">
    <button onclick="addIncome()">Add Income</button>
</div>

And for the expenses section:

<div class="button-group">
    <button onclick="addExpense()">Add Expense</button>
</div>

7. Displaying the Transaction History

After the income and expenses sections, we need a place to display the transaction history. We’ll use a table for this, as it’s a clean and organized way to present data.

Add the following code after the expenses section:

<div class="table-container">
    <h2>Transaction History</h2>
    <table>
        <thead>
            <tr>
                <th>Description</th>
                <th>Category</th>
                <th>Amount (₦)</th>
                <th>Type</th>
                <th>Action</th> <!-- Column for delete button -->
            </tr>
        </thead>
        <tbody id="transaction-history">
            <!-- Transactions will appear here -->
        </tbody>
    </table>
</div>

8. Adding a Summary Section

At the bottom of the container, let’s add a summary section that shows the total income, total expenses, and the balance.

Here’s the code for the summary:

<div class="summary">
    <h2>Budget Summary</h2>
    <p>Total Income: ₦<span id="total-income">0</span></p>
    <p>Total Expenses: ₦<span id="total-expenses">0</span></p>
    <p>Balance: ₦<span id="balance">0</span></p>
</div>

9. Adding a Clear All Button

Lastly, include a button that will allow users to clear all the data in one click. This is particularly useful if they want to reset everything.

Here’s how to add the clear button:

<div class="clear-button-group">
    <button onclick="clearAll()">Clear All</button>
</div>

10. Putting It All Together

When you put all the pieces together, your HTML structure should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Budget Planner</title>
</head>
<body>
    <div class="container">
        <h1>Expense Tracker</h1>
        <div class="section">
            <h2>Income</h2>
            <div class="input-group">
                <label for="income-description">Description</label>
                <input type="text" id="income-description" placeholder="e.g. Salary">
            </div>
            <div class="input-group">
                <label for="income-amount">Amount (₦)</label>
                <input type="number" id="income-amount" placeholder="e.g. 100000">
            </div>
            <div class="button-group">
                <button onclick="addIncome()">Add Income</button>
            </div>
        </div>
        <div class="section">
            <h2>Expenses</h2>
            <div class="input-group">
                <label for="expense-description">Description</label>
                <input type="text" id="expense-description" placeholder="e.g. Rent">
            </div>
            <div class="input-group">
                <label for="expense-category">Category</label>
                <select id="expense-category">
                    <option value="Housing">Housing</option>
                    <option value="Food">Food</option>
                    <option value="Transportation">Transportation</option>
                    <option value="Entertainment">Entertainment</option>
                    <option value="Others">Others</option>
                </select>
            </div>
            <div class="input-group">
                <label for="expense-amount">Amount (₦)</label>
                <input type="number" id="expense-amount" placeholder="e.g. 50000">
            </div>
            <div class="button-group">
                <button onclick="addExpense()">Add Expense</button>
            </div>
        </div>
        <div class="table-container">
            <h2>Transaction History</h2>
            <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Category</th>
                        <th>Amount (₦)</th>
                        <th>Type</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="transaction-history">
                    <!-- Transactions will appear here -->
                </tbody>
            </table>
        </div>
        <div class="summary">
    <h2>Budget Summary</h2>
    <p>Total Income: ₦<span id="total-income">0</span></p>
    <p>Total Expenses: ₦<span id="total-expenses">0</span></p>
    <p>Balance: ₦<span id="balance">0</span></p>
</div>
<div class="clear-button-group">
    <button onclick="clearAll()">Clear All</button>
</div>

Styling the Expense Tracker with CSS

Now that we have our HTML structure in place, it’s time to make our expense tracker visually appealing by adding some CSS. We’ll start with basic styling and then move on to more specific details to ensure everything looks neat and user-friendly.

1. Setting Up the CSS File

First, create a new file named styles.css in the same directory as your index.html file. Link this CSS file to your HTML by adding the following line inside the <head> section of index.html:

<link rel="stylesheet" href="styles.css">

This line tells your HTML file to use the styles defined in styles.css.

2. Styling the Body

Let’s start by adding some basic styles to the <body> to set a nice background color, font, and layout. Open styles.css and add the following code:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

• font-family: We’re using a simple and clean font.

• background-color: A light grey background will give our tracker a soft look.

• display, justify-content, align-items, height: These properties center the content vertically and horizontally.

3. Styling the Container

Next, we’ll style the .container to give it a clean, organized look:

.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

• background-color: White makes the content stand out against the grey background.

• padding: Adds space inside the container so the content isn’t touching the edges.

• border-radius: Rounds the corners for a modern look.

• box-shadow: Adds a subtle shadow to lift the container off the page slightly.

• max-width and width: Ensures the container is responsive and doesn’t exceed a certain width.

4. Styling the Headings

Let’s style the headings to make them more visually distinct:

h1, h2 {
    color: #333;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 15px;
}

• color: A dark grey color for the text will keep it readable.

• text-align: Centers the headings to create a balanced layout.

• margin-bottom: Adds space below the headings.

5. Styling the Input Groups

Now, let’s style the input fields and labels within the .input-group class:

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.input-group input,
.input-group select {
    width: calc(100% - 10px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

• margin-bottom: Adds space between input groups.

• display: block: Ensures the labels take up the full width.

• width: Makes the input fields and select elements responsive.

• padding, border, border-radius: Creates a more polished look for the inputs.

• box-sizing: Ensures padding is included in the element’s total width.

6. Styling the Buttons

Let’s give the buttons a more interactive and appealing look:

.button-group button,
.clear-button-group button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.button-group button:hover,
.clear-button-group button:hover {
    background-color: #FF1493;
}

• background-color: A vibrant pink for the buttons to make them stand out.

• color: White text for contrast against the pink background.

• border, padding, border-radius: No border, ample padding, and rounded corners for a modern look.

• cursor: Changes the cursor to a pointer on hover, indicating the button is clickable.

• hover: Darkens the button color when hovered for a subtle interaction effect.

7. Styling the Transaction History Table

We’ll also style the transaction history table to ensure it’s easy to read and visually consistent with the rest of the tracker:

.table-container {
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #FF69B4;
    color: white;
}

td {
    color: #333;
}

td button {
    background-color: #FF1493;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

td button:hover {
    background-color: #C71585;
}

• border-collapse: Ensures there’s no gap between table borders.

• padding, border-bottom: Adds padding inside table cells and a border under each row for separation.

• background-color for th: Matches the buttons for a cohesive design.

• td button: Adds a delete button inside table cells, styled similarly to the other buttons.

8. Styling the Summary Section

Finally, let’s style the summary section to make it stand out:

.summary {
    background-color: #FFB3FF;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: #333;
}

.summary p {
    margin: 10px 0;
    font-size: 18px;
}

.summary span {
    font-weight: bold;
}

• background-color: A soft pink background helps distinguish the summary from the rest of the content.

• padding, border-radius: Adds spacing and rounded corners.

• text-align: Centers the text within the summary.

• font-size, font-weight: Increases the font size and weight to make the totals and balance more prominent.

9. Putting It All Together

Here’s how your styles.css file should look with all the styles combined:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

h1, h2 {
    color: #333;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 15px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.input-group input,
.input-group select {
    width: calc(100% - 10px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

.button-group button,
.clear-button-group button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.button-group button:hover,
.clear-button-group button:hover {
    background-color: #FF1493;
}

.table-container {
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #FF69B4;
    color: white;
}

td {
    color: #333;
}

td button {
    background-color: #FF1493;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

td button:hover {
    background-color: #C71585;
}

.summary {
    background-color: #FFB3FF;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: #333;
}

.summary p {
    margin: 10px 0;
    font-size: 18px;
}

.summary span {
    font-weight: bold;
}

With this CSS, your expense tracker should now look clean, modern, and easy to use. You can always tweak the colors, fonts, or layout to better suit your style or branding.

How to Implement Functionality with JavaScript

Now that we have our HTML structure and CSS styling in place, it’s time to bring our expense tracker to life using JavaScript. We’ll add functionality so users can add expenses, view a summary, and remove items from the list.

1. Setting Up the JavaScript File

First, create a new file named script.js in the same directory as your index.html file. Link this JavaScript file to your HTML by adding the following line just before the closing </body> tag in index.html:

<script src="script.js"></script>

This line tells your HTML file to execute the JavaScript code from script.js.

2. Defining Variables

Let’s start by defining some variables to reference key elements in our HTML. Open script.js and add the following code:

const expenseForm = document.getElementById('expense-form');
const expenseInput = document.getElementById('expense-input');
const amountInput = document.getElementById('amount-input');
const categoryInput = document.getElementById('category-input');
const transactionList = document.getElementById('transaction-list');
const totalExpense = document.getElementById('total-expense');
const totalIncome = document.getElementById('total-income');
const balance = document.getElementById('balance');

Here’s what each variable does:

• expenseForm: References the form where users enter new expenses.

• expenseInput: References the input field for the expense description.

• amountInput: References the input field for the expense amount.

• categoryInput: References the dropdown for selecting the expense category.

• transactionList: References the table where we’ll display the transactions.

• totalExpense, totalIncome, balance: Reference the elements showing the summary of expenses, income, and balance.

3. Adding an Expense

Next, let’s create a function that handles the addition of a new expense when the form is submitted:

expenseForm.addEventListener('submit', function(event) {
    event.preventDefault();

    const description = expenseInput.value.trim();
    const amount = parseFloat(amountInput.value.trim());
    const category = categoryInput.value;

    if (description === '' || isNaN(amount) || amount <= 0) {
        alert('Please enter a valid expense description and amount.');
        return;
    }

    addTransaction(description, amount, category);
    updateSummary();
    clearInputs();
});

function addTransaction(description, amount, category) {
    const transactionRow = document.createElement('tr');

    transactionRow.innerHTML = `
        <td>${description}</td>
        <td>${category}</td>
        <td>${amount.toFixed(2)}</td>
        <td><button class="delete-btn">Delete</button></td>
    `;

    transactionList.appendChild(transactionRow);

    transactionRow.querySelector('.delete-btn').addEventListener('click', function() {
        transactionRow.remove();
        updateSummary();
    });
}

Here’s what’s happening in this code:

• event.preventDefault(): Prevents the form from refreshing the page when submitted.

• addTransaction: Adds a new transaction to the table.

• updateSummary: Updates the total expenses, income, and balance.

• clearInputs: Clears the form inputs after the transaction is added.

• delete button: Allows users to remove a transaction from the list.

4. Updating the Summary

To keep track of the total expenses, income, and balance, we’ll create an updateSummary function:

function updateSummary() {
    let totalExpenses = 0;
    let totalIncomes = 0;

    const transactions = transactionList.querySelectorAll('tr');

    transactions.forEach(function(transaction) {
        const amount = parseFloat(transaction.children[2].textContent);
        const category = transaction.children[1].textContent;

        if (category === 'Income') {
            totalIncomes += amount;
        } else {
            totalExpenses += amount;
        }
    });

    totalExpense.textContent = totalExpenses.toFixed(2);
    totalIncome.textContent = totalIncomes.toFixed(2);
    balance.textContent = (totalIncomes - totalExpenses).toFixed(2);
}

This function loops through each transaction in the table:

• totalExpenses and totalIncomes: Calculated by summing the amounts in each category.

• totalExpense, totalIncome, balance: Updated with the calculated values.

5. Clearing Form Inputs

To reset the form after adding a transaction, we’ll create a clearInputs function:

function clearInputs() {
    expenseInput.value = '';
    amountInput.value = '';
    categoryInput.value = 'Expense';
}

This function simply clears the values of the form inputs.

6. Putting It All Together

Here’s what your script.js file should look like with all the code combined:

const expenseForm = document.getElementById('expense-form');
const expenseInput = document.getElementById('expense-input');
const amountInput = document.getElementById('amount-input');
const categoryInput = document.getElementById('category-input');
const transactionList = document.getElementById('transaction-list');
const totalExpense = document.getElementById('total-expense');
const totalIncome = document.getElementById('total-income');
const balance = document.getElementById('balance');

expenseForm.addEventListener('submit', function(event) {
    event.preventDefault();

    const description = expenseInput.value.trim();
    const amount = parseFloat(amountInput.value.trim());
    const category = categoryInput.value;

    if (description === '' || isNaN(amount) || amount <= 0) {
        alert('Please enter a valid expense description and amount.');
        return;
    }

    addTransaction(description, amount, category);
    updateSummary();
    clearInputs();
});

function addTransaction(description, amount, category) {
    const transactionRow = document.createElement('tr');

    transactionRow.innerHTML = `
        <td>${description}</td>
        <td>${category}</td>
        <td>${amount.toFixed(2)}</td>
        <td><button class="delete-btn">Delete</button></td>
    `;

    transactionList.appendChild(transactionRow);

    transactionRow.querySelector('.delete-btn').addEventListener('click', function() {
        transactionRow.remove();
        updateSummary();
    });
}

function updateSummary() {
    let totalExpenses = 0;
    let totalIncomes = 0;

    const transactions = transactionList.querySelectorAll('tr');

    transactions.forEach(function(transaction) {
        const amount = parseFloat(transaction.children[2].textContent);
        const category = transaction.children[1].textContent;

        if (category === 'Income') {
            totalIncomes += amount;
        } else {
            totalExpenses += amount;
        }
    });

    totalExpense.textContent = totalExpenses.toFixed(2);
    totalIncome.textContent = totalIncomes.toFixed(2);
    balance.textContent = (totalIncomes - totalExpenses).toFixed(2);
}

function clearInputs() {
    expenseInput.value = '';
    amountInput.value = '';
    categoryInput.value = 'Expense';
}

7. Testing the Expense Tracker

With all the code in place, open your index.html file in a web browser. Try adding some expenses and incomes to see how they appear in the transaction table. You should see the total expenses, total income, and balance update automatically as you add and delete transactions.

Congratulations! You’ve now implemented a fully functional expense tracker using JavaScript. This tracker is a simple but powerful tool for managing personal finances, and you can further expand it by adding features like data persistence, additional categories, or more detailed reporting.

How to Enhance the User Experience

Now that the core functionality of our expense tracker is up and running, it’s time to improve the user experience. Adding small details and thoughtful enhancements can make your application more intuitive, interactive, and enjoyable to use.

Here are some ideas for enhancing the user experience of our expense tracker:

1. Adding Real-Time Feedback

It’s helpful for users to receive feedback as they interact with your application. Let’s add a notification feature to confirm that a transaction was successfully added. We’ll do this by showing a brief message after a transaction is submitted.

In your HTML, add a div below the form for the notification message:

<div id="notification" class="hidden"></div>

In your CSS, style the notification to make it more visible:

#notification {
  background-color: #28a745;
  color: white;
  padding: 10px;
  margin-top: 10px;
  text-align: center;
  border-radius: 5px;
}

.hidden {
  display: none;
}

Now, in your JavaScript file, we’ll show this notification for a few seconds after a transaction is added:

function showNotification(message) {
    const notification = document.getElementById('notification');
    notification.textContent = message;
    notification.classList.remove('hidden');

    setTimeout(function() {
        notification.classList.add('hidden');
    }, 2000); // Notification will disappear after 2 seconds
}

Update the addTransaction function to show this notification when a new transaction is added:

addTransaction(description, amount, category);
showNotification('Transaction added successfully!');
updateSummary();
clearInputs();

This way, each time a user submits a transaction, they get immediate feedback.

2. Displaying a Balance Indicator

To give users a clearer visual understanding of their financial status, you can implement a balance indicator. This could be a simple color change for the balance display depending on whether the balance is positive or negative.

In your CSS, add styles for different balance states:

.positive {
  color: #28a745; /* Green for positive balance */
}

.negative {
  color: #dc3545; /* Red for negative balance */
}

Then, in your updateSummary function, apply the appropriate class based on the balance:

function updateSummary() {
    let totalExpenses = 0;
    let totalIncomes = 0;

    const transactions = transactionList.querySelectorAll('tr');

    transactions.forEach(function(transaction) {
        const amount = parseFloat(transaction.children[2].textContent);
        const category = transaction.children[1].textContent;

        if (category === 'Income') {
            totalIncomes += amount;
        } else {
            totalExpenses += amount;
        }
    });

    totalExpense.textContent = totalExpenses.toFixed(2);
    totalIncome.textContent = totalIncomes.toFixed(2);

    const currentBalance = totalIncomes - totalExpenses;
    balance.textContent = currentBalance.toFixed(2);

    // Apply positive/negative class
    if (currentBalance >= 0) {
        balance.classList.remove('negative');
        balance.classList.add('positive');
    } else {
        balance.classList.remove('positive');
        balance.classList.add('negative');
    }
}

Now, when users are in the positive, the balance will show up in green. If they are in the negative, it will appear in red.

3. Preserving Data with Local Storage

One major enhancement is saving the transactions even after the page is refreshed. For this, we can use the browser’s local storage. By saving the transactions in local storage, the tracker will retain the data between sessions.

First, modify the addTransaction function to store the transactions in local storage:

function addTransaction(description, amount, category) {
    const transaction = {
        description: description,
        amount: amount,
        category: category
    };

    let transactions = JSON.parse(localStorage.getItem('transactions')) || [];
    transactions.push(transaction);
    localStorage.setItem('transactions', JSON.stringify(transactions));

    const transactionRow = document.createElement('tr');
    transactionRow.innerHTML = `
        <td>${description}</td>
        <td>${category}</td>
        <td>${amount.toFixed(2)}</td>
        <td><button class="delete-btn">Delete</button></td>
    `;
    transactionList.appendChild(transactionRow);

    transactionRow.querySelector('.delete-btn').addEventListener('click', function() {
        transactionRow.remove();
        removeTransaction(transaction);
        updateSummary();
    });
}

Next, create a removeTransaction function to handle deletion from local storage:

function removeTransaction(transactionToRemove) {
    let transactions = JSON.parse(localStorage.getItem('transactions')) || [];

    transactions = transactions.filter(function(transaction) {
        return !(transaction.description === transactionToRemove.description &&
                 transaction.amount === transactionToRemove.amount &&
                 transaction.category === transactionToRemove.category);
    });

    localStorage.setItem('transactions', JSON.stringify(transactions));
}

To load saved transactions when the page is loaded, create a loadTransactions function:

function loadTransactions() {
    const transactions = JSON.parse(localStorage.getItem('transactions')) || [];

    transactions.forEach(function(transaction) {
        addTransaction(transaction.description, transaction.amount, transaction.category);
    });

    updateSummary();
}

window.addEventListener('load', loadTransactions);

Now, each time the page loads, the saved transactions are retrieved from local storage and displayed in the table.

4. How to Improve Form UX

Let’s make the form more user-friendly by automatically focusing on the description input field when the page loads and clearing the form fields when a user submits a transaction. We can also restrict the amount field to only accept numbers.

To automatically focus on the description field:

window.addEventListener('load', function() {
    expenseInput.focus();
});

To restrict the amount input to numbers only, you can add the following attribute to the amount-input in your HTML:

<input type="number" id="amount-input" min="0" step="0.01" required>

5. Using Icons for Better UI

Consider replacing the 'Delete' button text with an icon to improve the visual appeal. You can use an icon library like Font Awesome to add a trash icon.

First, include Font Awesome in your HTML file by adding this line inside the <head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Then, in your addTransaction function, replace the delete button with an icon:

transactionRow.innerHTML = `
    <td>${description}</td>
    <td>${category}</td>
    <td>${amount.toFixed(2)}</td>
    <td><button class="delete-btn"><i class="fas fa-trash"></i></button></td>
`;

This little tweak makes your tracker look more modern and visually appealing.

Testing and Debugging

After implementing the functionality and enhancing the user experience, it’s crucial to test the expense tracker thoroughly to ensure everything works as expected. Testing helps you catch any bugs or issues before they become a problem for users.

In this section, we’ll go over some basic testing and debugging strategies to make sure our expense tracker is solid.

1. Testing Basic Functionality

Start by testing the core features of your expense tracker:

• Adding Transactions: Enter a few transactions and ensure they appear correctly in the table, with the description, category, and amount displayed properly.

• Deleting Transactions: Test the delete functionality by removing transactions and verifying that they are deleted both from the table and from local storage.

• Updating the Summary: Check that the total income, total expenses, and balance update correctly as you add and remove transactions.

If any of these functionalities don’t work as expected, double-check the relevant code sections. Ensure that the JavaScript functions are correctly manipulating the DOM and updating local storage.

2. Cross-Browser Testing

Your expense tracker should work consistently across different web browsers. Test the application on multiple browsers like Chrome, Firefox, Safari, and Edge. Make sure the layout, functionality, and styling are consistent across all platforms.

If you encounter any browser-specific issues, you might need to adjust your CSS or JavaScript. For instance, some CSS properties might behave differently on different browsers, so ensure compatibility or provide fallbacks.

3. Mobile Responsiveness

Test your expense tracker on various devices to ensure it’s fully responsive. Open the application on your phone or use the browser’s developer tools to simulate different screen sizes. Check how the layout adapts, and make sure the tracker is usable on smaller screens.

Look out for issues like:

• Text or buttons being too small or hard to tap.

• The layout breaking or elements overlapping.

• The form fields not fitting the screen.

If you spot any problems, consider adjusting your CSS to improve the mobile experience. You might need to use media queries to tweak the layout for smaller screens.

4. Testing Edge Cases

Think about how users might interact with the expense tracker in unexpected ways. Consider testing the following edge cases:

• Empty Inputs: Try submitting a transaction with empty fields. Does your form validation prevent this? Ensure that your required attributes and JavaScript validations are working.

• Negative Amounts: Enter negative numbers in the amount field. Does the tracker handle this correctly? You may want to restrict the input to prevent negative values.

• Large Numbers: Test with very large numbers in the amount field. Does the application handle large values without breaking?

• Duplicate Transactions: Add the same transaction multiple times. Does your tracker manage duplicates gracefully?

By testing these edge cases, you can identify and address potential bugs before they affect users.

5. Debugging Common Issues

If you run into issues while testing, debugging is your next step. Here are some common problems you might encounter and how to troubleshoot them:

• JavaScript Errors: If something isn’t working, check the browser’s console for any JavaScript errors. The console will usually provide information about what went wrong and which line of code caused the issue.

• Layout Problems: If the layout doesn’t look right, inspect the elements using the browser’s developer tools. Check the CSS properties being applied and see if there are any issues with margins, padding, or Flexbox/Grid settings.

• Data Not Persisting: If transactions aren’t being saved or loaded correctly, revisit the local storage code. Make sure you’re correctly saving and retrieving data, and that the JSON is being parsed and stringified properly.

• Event Listeners Not Firing: If buttons or other interactive elements aren’t working, ensure that your event listeners are properly attached. Double-check the selectors and make sure the elements exist when you’re trying to attach the listeners.

6. User Testing

Finally, consider asking others to test your expense tracker. They might use the application in ways you didn’t anticipate, helping you identify usability issues or bugs that you missed. Watch how they interact with the tracker and gather feedback on any confusing elements or unexpected behaviors.

Conclusion

Building an expense tracker from scratch is not only a great way to sharpen your web development skills but also provides you with a practical tool to manage your finances.

Throughout this tutorial, we’ve walked through the entire process, from setting up the HTML structure to styling it with CSS, adding functionality with JavaScript, enhancing the user experience, and testing and debugging the final product.

By following these steps, you’ve created a fully functional expense tracker that allows you to easily add, view, and delete transactions, while keeping track of your income and expenses. You’ve also learned how to handle data persistence with local storage, ensuring that your data remains available even after a page refresh.

Remember, the principles and techniques you’ve applied here can be extended to more complex projects. Whether you’re looking to add more features to this tracker or take on a new challenge, the skills you’ve gained will be invaluable.

Thank you for following along with this tutorial. I hope you found it helpful and that you feel more confident in your ability to build web applications.

If you have any questions or suggestions, feel free to reach out on LinkedIn. If you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

In this article, we'll explore how far you can go in creating interactive prototypes using just HTML. We'll challenge the common belief that JavaScript is always necessary for interactivity by showing you how to build engaging features with nothing but HTML. By the end, you'll see that sometimes, simplicity is all you need to bring your ideas to life.

Table of Contents

• Basics of HTML Forms

• Interactive HTML Elements

• Creating Advanced Interactive Prototypes with HTML

• HTML-Only Interactive Techniques

• Design Tips for HTML-Only Prototypes

• Conclusion

Basics of HTML Forms

HTML forms are essential for collecting user input, whether it's for signing up for a service, submitting feedback, or conducting a search. The power of forms lies in their ability to handle user data and send it to a server for processing. Understanding how to construct a basic form is the first step in leveraging HTML's interactive capabilities.

A basic form in HTML might look like this

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" na<button type="submit">Submit</button>
</form>

• The <form> element is a container for all the input elements. The action attribute specifies where the form data should be sent when the form is submitted. The method attribute determines how the data is sent (typically using GET or POST).

• The <label> element provides a user-friendly label for each input field, improving accessibility.

• The <input> elements are where users enter their information. Each input has a type attribute that defines what kind of data it accepts (for example: text, email, password).

• The <button> element submits the form when clicked.

Forms are fundamental because they involve direct user interaction, making them a critical component of any interactive prototype.

Interactive HTML Elements

Beyond forms, HTML includes a variety of elements that naturally respond to user actions. These elements can be used to create interactive interfaces without writing any JavaScript, which is perfect for quick prototyping.

Buttons, Checkboxes, and Radio Buttons

Buttons: Buttons are one of the most straightforward interactive elements. They can perform a wide range of actions, from submitting a form to triggering a CSS animation. Buttons are usually defined with the <button> or <input type="button"> elements.

<button type="button">Click Me</button>

In the above example, the button doesn't do anything by itself unless tied to a form or an action. However, in prototypes, buttons can visually represent functionality, making the prototype feel more complete.

Checkboxes: Checkboxes allow users to select multiple options from a list. They are ideal for scenarios where more than one choice is allowed.

<input type="checkbox" id="option1" name="option1" value="Option 1">
<label for="option1">Option 1</label>

Each checkbox can be checked or unchecked, providing immediate visual feedback.

Radio Buttons: Radio buttons are used when only one option can be selected from a group. This is useful in cases like surveys or quizzes where the user needs to choose one answer.

<input type="radio" id="choice1" name="choice" value="Choice 1">
<label for="choice1">Choice 1</label>

<input type="radio" id="choice2" name="choice" value="Choice 2">
<label for="choice2">Choice 2</label>

When one radio button in a group is selected, the others are automatically deselected, ensuring that only one option is chosen.

These elements are simple yet powerful, providing the basic building blocks for interactive user interfaces.

The <details> and <summary> Elements

The <details> and <summary> elements provide a way to create sections of content that users can expand or collapse. This is particularly useful for FAQs, where you might want to show the question and hide the answer until the user chooses to reveal it.

<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It is the standard language used to create web pages.</p>
</details>

How it works:

• The <summary> element is the clickable heading that the user interacts with.

• The content inside the <details> tag (but outside the <summary> tag) remains hidden until the user clicks on the summary, revealing it.

This simple interaction adds a layer of user control, allowing content to be hidden or shown based on user action, all without JavaScript.

Different Types of <input>

The <input> element is one of the most versatile in HTML. Depending on its type attribute, it can serve different purposes, from accepting text input to allowing date selection. Understanding the various input types is key to creating functional prototypes.

Here are a few common types:

Text Input: This is the most common input type, used for single-line text input.

<input type="text" name="username" placeholder="Enter your username">

The placeholder attribute provides a hint to the user about what to enter.

Password Input: This input type hides the characters as the user types, making it suitable for sensitive information like passwords.

<input type="password" name="password" placeholder="Enter your password">

Email Input: The email type ensures that the user’s input is in a valid email format.

<input type="email" name="email" placeholder="Enter your email">

Date Input: This type provides a date picker, allowing users to select a date from a calendar interface.

<input type="date" name="birthdate">

These different input types enhance user experience by providing specialized interfaces for different types of data. They help make the form more intuitive and reduce the likelihood of user errors.

How to Create Advanced Interactive Prototypes with HTML

Once you're comfortable with the basics of HTML forms and interactive elements, you can start creating more advanced prototypes that offer a richer user experience. In this section, we'll explore how to combine form elements to build complex interactions and simulate dynamic content updates, using only HTML.

How to Combine Form Elements for Complex Interactions

Combining different form elements can help you create more sophisticated interactions and user experiences. While HTML alone has its limitations, you can still achieve quite a bit by using these elements creatively.

Multi-step Forms and Conditional Inputs

Multi-step forms are useful when you want to break a long form into smaller, more manageable sections. This approach can improve user experience by making complex forms feel less overwhelming. While HTML alone doesn’t support multi-step functionality directly, you can use the <fieldset> and <legend> elements to organize form sections visually.

Example of a Multi-step Form:

<form>
  <fieldset>
    <legend>Step 1: Personal Information</legend>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <button type="button" onclick="document.getElementById('step2').style.display='block';">Next</button>
  </fieldset>

  <fieldset id="step2" style="display:none;">
    <legend>Step 2: Address Details</legend>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address">

    <label for="city">City:</label>
    <input type="text" id="city" name="city">

    <button type="button" onclick="document.getElementById('step2').style.display='none';">Previous</button>
    <button type="submit">Submit</button>
  </fieldset>
</form>

How it works:

• Fieldsets: The <fieldset> element groups related fields together and helps visually separate different sections of the form.

• Legends: The <legend> element provides a title for each section.

• Buttons: Use <button> elements with onclick attributes to show or hide sections. In a real-world scenario, you’d use JavaScript for better control, but this example demonstrates the concept.

Conditional Inputs allow users to fill out additional fields based on previous choices. While HTML alone doesn’t support this functionality natively, you can use checkboxes and radio buttons creatively to show or hide sections of the form.

Example of Conditional Inputs:

<form>
  <label for="subscribe">
    <input type="checkbox" id="subscribe" name="subscribe">
    Subscribe to newsletter
  </label>

  <div id="newsletterDetails" style="display:none;">
    <label for="frequency">Preferred Frequency:</label>
    <select id="frequency" name="frequency">
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
    </select>
  </div>

  <script>
    document.getElementById('subscribe').addEventListener('change', function() {
      document.getElementById('newsletterDetails').style.display = this.checked ? 'block' : 'none';
    });
  </script>
</form>

How it works:

• Checkboxes: The checkbox lets users opt into additional options.

• Conditional Display: The <div> with id="newsletterDetails" shows or hides based on the checkbox state. While the JavaScript is necessary to handle the condition, HTML alone provides the structure and initial display.

Simulating Dynamic Content Updates

Simulating dynamic content updates involves creating sections of a webpage that can change based on user input. While full dynamic updates require JavaScript, you can use HTML and CSS to simulate these changes.

Example of Simulated Dynamic Content Updates:

<form>
  <label for="view">Choose a view:</label>
  <select id="view" name="view">
    <option value="overview">Overview</option>
    <option value="details">Details</option>
  </select>

  <div id="overviewContent">
    <h2>Overview</h2>
    <p>This is the overview content.</p>
  </div>

  <div id="detailsContent" style="display:none;">
    <h2>Details</h2>
    <p>This is the detailed content.</p>
  </div>

  <script>
    document.getElementById('view').addEventListener('change', function() {
      var selectedView = this.value;
      document.getElementById('overviewContent').style.display = selectedView === 'overview' ? 'block' : 'none';
      document.getElementById('detailsContent').style.display = selectedView === 'details' ? 'block' : 'none';
    });
  </script>
</form>

How it works:

• Dropdown Menu: A <select> element allows users to choose between different views.

• Content Sections: The content sections are shown or hidden based on the user’s selection. This simulation relies on JavaScript to handle the visibility, but the structure is set up with HTML.

While true dynamic updates are best handled with JavaScript, these examples show how you can create the illusion of interactivity using HTML and CSS alone.

HTML-Only Interactive Techniques

While JavaScript is commonly used for creating interactive features, HTML itself offers several techniques to achieve interactivity. In this section, we'll explore four HTML-only techniques: using the target attribute for page-level interactions, emulating modal dialogs, creating tooltips, and building interactive image maps. Each technique highlights how HTML can be used creatively to add interactive elements to your webpages.

How to Use the target Attribute for Page-level Interactions

The target attribute allows you to control where a linked document will open. This can be used to create interactive experiences that involve navigating between different sections of a page or opening new pages within the same window or tab.

Example of Using the target Attribute:

<a href="#section1" target="_self">Go to Section 1</a>
<a href="#section2" target="_self">Go to Section 2</a>

<h2 id="section1">Section 1</h2>
<p>Content for Section 1...</p>

<h2 id="section2">Section 2</h2>
<p>Content for Section 2...</p>

How it works:

• Anchors (<a> elements): These links navigate to different parts of the same page or other pages. The href attribute points to the target location.

• target="_self": This attribute ensures the link opens in the same window or tab, which is the default behavior. You can use other values like _blank to open links in a new tab or window.

Using the target attribute allows you to control how users interact with links and navigate your site, enhancing the user experience without relying on JavaScript.

How to Emulate Modal Dialogs

Modal dialogs are often used to display important information or prompts that require user interaction before proceeding. While creating true modals typically involves JavaScript, you can use HTML and CSS to simulate modal dialogs.

Example of Emulating a Modal Dialog:

<!-- Hidden checkbox to toggle the modal -->
    <input type="checkbox" id="modal-toggle">

    <!-- Button to open the modal -->
    <label for="modal-toggle" style="cursor: pointer;">Open Modal</label>

    <!-- The Modal -->
    <div class="modal">
        <div class="modal-content">
            <a href="#" class="close" onclick="document.getElementById('modal-toggle').click();">&times;</a>
            <h2>Modal Title</h2>
            <p>This is a simple modal dialog without JavaScript!</p>
        </div>
    </div>

<style>
/* Hide the checkbox */
#modal-toggle {
    display: none;
}

/* The modal background */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

/* Show the modal when the checkbox is checked */
#modal-toggle:checked ~ .modal {
    display: flex;
}

/* The modal content */
.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    position: relative;
}

/* The close button */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.close:hover {
    color: #ff4c4c;
}

</style>

How it works:

• Checkbox (<input type="checkbox">): Used to control the visibility of the modal.

• Labels: The labels act as buttons to open and close the modal. Clicking the "Open Modal" label checks the checkbox, which makes the modal visible. Clicking the "Close" label unchecks the checkbox and hides the modal.

• CSS: Controls the appearance and positioning of the modal and its overlay.

This approach allows you to create a modal-like effect with HTML and CSS alone, providing a user-friendly way to present information or options.

How to Create HTML-only Tooltips

Tooltips provide additional information when a user hovers over an element. While JavaScript can enhance tooltips, you can create basic tooltips using just HTML and CSS.

Example of Creating Tooltips:

<div class="tooltip">
  Hover over me
  <span class="tooltip-text">Tooltip text</span>
</div>

<style>
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the tooltip trigger */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
</style>

How it works:

• Tooltip Container: The <div class="tooltip"> contains the text that triggers the tooltip and the tooltip text itself.

• Tooltip Text: The <span class="tooltip-text"> is hidden by default and only becomes visible when the user hovers over the tooltip container.

• CSS: Uses visibility and opacity to show and hide the tooltip, with a transition effect for smooth appearance.

This method allows you to add helpful hints or extra information to your webpage without needing JavaScript.

How to Build Interactive Image Maps

Image maps enable you to create clickable areas on an image, allowing users to interact with different parts of an image. HTML’s <map> and <area> elements are used to define these clickable regions.

Example of Building an Image Map:

<img src="map-image.jpg" usemap="#image-map" alt="Map Image">

<map name="image-map">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Region 1">
  <area shape="circle" coords="130,136,60" href="page2.html" alt="Region 2">
  <area shape="poly" coords="300,50,400,150,350,200" href="page3.html" alt="Region 3">
</map>

How it works:

• Image: The <img> tag includes the usemap attribute, which links to the <map> element.

• Map and Areas: The <map> element contains one or more <area> elements. Each <area> defines a clickable region on the image.

  • shape="rect": Defines a rectangular area with specified coordinates.

  • shape="circle": Defines a circular area with a center and radius.

Image maps allow you to create interactive images with different regions that lead to various pages or actions, adding an extra layer of engagement to your prototypes.

Design Tips for HTML-Only Prototypes

Designing HTML-only prototypes involves focusing on both usability and performance. While HTML alone provides a solid foundation for interactive elements, it’s essential to ensure that your prototypes are accessible, fast, and efficient. This section offers tips on making your HTML-only prototypes more effective, covering accessibility, performance, and limitations.

Make Sure Your Prototype is Accessible

Accessibility ensures that your prototypes can be used by everyone, including those with disabilities. By adhering to accessibility principles, you improve the user experience for all users and make your prototypes more inclusive.

Keyboard-friendly Navigation

Many users rely on keyboards for navigation, so it’s crucial to ensure that all interactive elements can be accessed and used via keyboard alone.

Tips for Keyboard-Friendly Navigation:

• Use Semantic HTML: Proper use of HTML elements like <button>, <a>, and <input> helps with keyboard navigation. These elements are naturally focusable and keyboard-navigable.

• Tab Index: The tabindex attribute can be used to manage the order of focusable elements. For example, tabindex="0" allows an element to be focusable, while negative values like tabindex="-1" remove an element from the tab order.

• Visible Focus Indicators: Ensure that focus indicators (like outlines) are visible when navigating with the keyboard. This helps users see which element is currently in focus.

Example:

<button tabindex="0">Click Me</button>
<a href="#section1" tabindex="0">Go to Section 1</a>
<input type="text" tabindex="0" placeholder="Enter text here">

Screen Reader Support

Screen readers help visually impaired users navigate your site. To ensure that your prototypes are accessible to these users, include relevant ARIA (Accessible Rich Internet Applications) attributes and use semantic HTML.

Tips for Screen Reader Support:

• Alt Text: Use the alt attribute for images to provide descriptive text for screen readers.

• ARIA Roles and Labels: Use ARIA roles and labels to enhance the accessibility of interactive elements. For example, role="button" can be used for clickable elements that are not inherently buttons.

• Descriptive Labels: Ensure that form inputs and interactive elements have clear and descriptive labels.

Example:

<img src="logo.jpg" alt="Company Logo">
<button aria-label="Close" onclick="closeModal()">X</button>

Incorporating these practices makes your prototypes more navigable and usable for individuals with disabilities.

The Speed and Simplicity of HTML-only Prototypes

HTML-only prototypes are often faster to load and simpler to maintain due to their reliance on minimal resources. These benefits contribute to a more efficient user experience.

Faster Loading

HTML-only prototypes typically load faster because they don’t rely on external scripts or complex interactions that can slow down performance. The simplicity of HTML means fewer resources need to be processed by the browser.

Benefits:

• Reduced Load Times: Without JavaScript or complex CSS, the browser can render the content more quickly.

• Improved Performance: Fewer resources mean less strain on the client’s device, resulting in smoother performance.

Lower Resource Use

Using HTML alone minimizes resource consumption. Without JavaScript or heavy CSS, your prototype consumes less memory and processing power.

Benefits:

• Lower Memory Usage: Less reliance on external scripts means reduced memory footprint.

• Less CPU Usage: Simplified interactions reduce the need for extensive computation, leading to lower CPU usage.

These aspects contribute to a more efficient and responsive user experience, especially important for users on slower connections or less powerful devices.

Where HTML Falls Short

HTML is great for building interactive prototypes, but it has some limits. Knowing these limits helps you decide when to add other technologies.

No Complex Logic

HTML alone is limited in handling complex logic and dynamic interactions. For example, conditions, loops, or advanced calculations require JavaScript.

Limitations:

• Conditional Logic: HTML cannot perform actions based on complex conditions or states.

• Dynamic Updates: Changes to the page content or structure based on user input often require JavaScript.

Example Limitation:

• Interactive Forms: Complex forms with dynamic fields or conditional sections generally need JavaScript to manage the logic and interactions effectively.

Difficulties with More Advanced Interactions

Some interactions, such as real-time updates or complex animations, are challenging to achieve with HTML alone. While CSS can handle some animations, more advanced interactions often require scripting.

Limitations:

• Real-time Data: Updating content in real time based on user actions or external data sources is typically not possible with HTML alone.

• Complex Animations: Advanced animations and transitions usually require JavaScript or CSS animations.

Example Limitation:

• Live Content Updates: HTML cannot fetch or update content dynamically without JavaScript or server-side solutions.

Recognizing these limitations helps you balance the use of HTML with other technologies when needed to achieve your desired functionality.

When to Use HTML-Only Prototypes

HTML-only prototypes can be a powerful tool in your design toolkit, especially when simplicity and performance are key.

Understanding when to use HTML-only solutions, considering your audience, and knowing how to blend HTML with JavaScript can help you create effective prototypes that meet your project needs.

When HTML-only is the Right Choice

HTML-only prototypes are particularly useful in specific scenarios where their simplicity and efficiency shine. Here are some situations where using HTML-only prototypes makes sense:

1. Simple Forms and Surveys: When you need to create basic forms or surveys to collect user input, HTML forms with standard input elements can be used effectively. These prototypes are easy to set up and provide a straightforward way for users to submit information.

Example:

• A contact form on a website.

• A quick survey to gather feedback from users.

2. Static Information Display: For displaying static content or information, HTML is sufficient. Prototypes that focus on showcasing content without requiring dynamic interactions are ideal candidates for HTML-only design.

Example:

• An informational landing page.

• A product details page that provides static information.

3. Prototyping Early Concepts: When prototyping early concepts or initial designs, HTML-only prototypes can help quickly visualize and test ideas without the need for complex scripting. This approach allows you to iterate rapidly and focus on layout and structure.

Example:

• Wireframes or mockups of a new feature.

• Early-stage designs for a website or application.

4. Performance Considerations: For situations where performance is critical and you need to ensure fast loading times and low resource usage, HTML-only prototypes can be advantageous. They eliminate the overhead of additional scripts and reduce processing demands.

Example:

• A mobile landing page with minimal resources.

• A lightweight information page with fast load times.

5. Accessibility and Simplicity: When designing for accessibility and simplicity, HTML provides a strong foundation. Using semantic HTML and built-in attributes ensures that your prototypes are accessible to users with disabilities.

Example:

• An accessible form with clear labels and input fields.

• A simple navigation menu with clear, focusable links.

Understanding Your Audience

Knowing your audience is crucial when deciding whether to use HTML-only prototypes. Consider the following factors:

1. User Needs and Expectations: Understand what your users need and expect from the prototype. If your audience is looking for simple, straightforward interactions, HTML-only may be sufficient. For more complex interactions or dynamic content, consider integrating JavaScript.

Example:

• Users who need a basic contact form may be satisfied with an HTML-only solution.

• Users who expect interactive features or real-time updates might require a combination of HTML and JavaScript.

2. Technical Constraints: Consider the technical constraints of your audience’s devices and browsers. HTML-only prototypes generally perform well across various devices and browsers, making them suitable for diverse audiences.

Example:

• A prototype for users with older devices or limited internet connectivity may benefit from the simplicity of HTML-only design.

3. User Expertise: Assess the technical expertise of your audience. If they are not familiar with complex interactions or scripting, HTML-only prototypes can provide a more accessible and user-friendly experience.

Example:

• A prototype for a non-technical audience may prioritize simplicity and ease of use with HTML-only design.

4. Feedback and Iteration: Gather feedback from users to understand how they interact with your prototype. If users find HTML-only prototypes sufficient for their needs, you can continue with this approach. If more advanced features are requested, consider integrating additional technologies.

Example:

• Collect user feedback on a basic form and decide if additional features or interactions are needed.

Mixing HTML and JavaScript

While HTML-only prototypes have their strengths, combining HTML with JavaScript can enhance functionality and provide a richer user experience.

Here’s when and how to mix HTML and JavaScript effectively:

1. Adding Dynamic Interactions: When your prototype requires dynamic interactions, such as real-time updates or complex logic, JavaScript can complement HTML to provide these features.

Example:

• A form that updates in real time based on user input.

• An interactive map with zoom and filter capabilities.

2. Enhancing User Experience: JavaScript can be used to improve the user experience by adding interactive elements like modals, carousels, or animations that HTML alone cannot achieve.

Example:

• A modal dialog that opens and closes based on user actions.

• A carousel that allows users to navigate through images or content.

3. Handling Complex Logic: For prototypes involving complex calculations, conditional logic, or data manipulation, JavaScript can handle these requirements more effectively than HTML alone.

Example:

• A calculator that performs complex calculations based on user input.

• A dynamic form that adjusts fields based on previous selections.

4. Iterating and Testing: Start with an HTML-only prototype to establish the basic structure and layout. Once you have a clear understanding of the design, integrate JavaScript to add interactivity and test the enhanced functionality.

Example:

• Begin with a static prototype of a feature and then add JavaScript to refine and test interactive elements.

5. Balancing Complexity: Use JavaScript to enhance the prototype where necessary, but avoid overcomplicating the design. Maintain a balance between simplicity and functionality to ensure the prototype remains easy to use and understand.

Example:

• Implement JavaScript for essential interactions but keep the overall design and layout straightforward.

Conclusion

HTML-only prototypes are a great choice for many design tasks because they are simple and quick to build. They work well for basic interactions like forms and displaying information.

HTML alone is powerful for straightforward designs. However, if you need more advanced features or dynamic interactions, adding JavaScript can help. Mixing HTML with JavaScript lets you enhance your prototypes when needed.

In summary, HTML-only prototypes offer speed, accessibility, and ease of use. Understanding when to use HTML by itself and when to add other tools ensures that your prototypes are both effective and user-friendly.

That's all for this article! If you'd like to continue the conversation or have questions, suggestions, or feedback, feel free to reach out to connect with me on LinkedIn. If you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

This approach contrasts with client-side rendering (CSR), where content is delivered as a basic HTML shell, and JavaScript fetches and displays data in the browser.

SSR offers significant SEO advantages, making it a perfect fit for Next.js, a popular React framework. Let's discuss how using SSR with Next.js can elevate your website's search engine visibility.

Table of Contents

1. What is Server-Side Rendering?
2. How to Get Started with Next.js and SSR
3. How Next.js Enables Server-side Rendering
4. Data Fetching with getStaticProps and getServerSideProps
5. Benefits of SSR for SEO with Next.js and How to Optimize
6. Conclusion

What is Server-Side Rendering?

Server-side rendering (SSR) is a technique in web development where the web server generates the complete HTML content of a web page before sending it to the user's browser.

This is unlike client-side rendering (CSR), where the browser downloads a basic HTML structure and then uses JavaScript to fetch and display the content.

How to Get Started with Next.js and SSR

Getting started with Next.js and server-side rendering (SSR) involves a few steps. Here's a step-by-step guide to help you set up a Next.js project and implement SSR.

Step 1: Install Next.js

First, you need to install Next.js. You can do this using create-next-app, which sets up a new Next.js project with a default configuration. Run the following command in your terminal:

npx create-next-app my-next-app
cd my-next-app
npm run dev

This command creates a new Next.js application in a folder called my-next-app and starts the development server.

Step 2: Understand the Project Structure

Next.js organizes the project with some default folders and files:

• pages/: This folder contains all the pages of your application. Each file represents a route in your app.
• public/: Static assets like images can be placed here.
• styles/: Contains CSS files for styling your application.

Step 3: Create a Simple Page with SSR

Now, let's create a simple page that uses SSR.

Create a new file pages/index.js:

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Welcome to Next.js with SSR</h1>
      <p>Data fetched from the server: {data.message}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // Fetch data from an API or other sources
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Return the data as props to the Home component
  return {
    props: {
      data,
    },
  };
}

export default Home;

Let's discuss this code in some detail. For the home component:

• The Home component is a functional component that accepts props.
• The data prop contains the data fetched from the server.
• Inside the component, we render a welcome message and the fetched data.

The getServerSideProps function:

• This function is exported from the pages/index.js file.
• It executes on the server for each request to this page.
• Inside this function, you can perform asynchronous operations such as fetching data from an external API.
• The fetched data is returned as an object with a props key. This object will be passed to the Home component as props.

You can add error handling to the getServerSideProps function to manage any issues that might arise during data fetching. Here's an example:

export async function getServerSideProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) {
      throw new Error('Failed to fetch data');
    }
    const data = await res.json();
    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error(error);
    return {
      props: {
        data: { message: 'Error fetching data' },
      },
    };
  }
}

Step 4: Run the Application

Start your development server if it's not already running:

npm run dev

Open your browser and go to http://localhost:3000. You should see the message fetched from the API displayed on the page.

How Next.js Enables Server-Side Rendering

Next.js provides a seamless way to enable SSR and Static Site Generation (SSG). It pre-renders every page by default. Depending on the use case, you can choose between SSR and SSG:

• Server-Side Rendering (SSR): Pages are rendered on each request.
• Static Site Generation (SSG): Pages are generated at build time.

Next.js determines which rendering method to use based on the functions you implement in your page components (getStaticProps and getServerSideProps).

Next.js Page Components

Next.js uses the pages/ directory to define routes. Each file in this directory corresponds to a route in your application.

• pages/index.js → /
• pages/about.js → /about
• pages/posts/[id].js → /posts/:id

Here's a basic example of a page component:

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <p>This is the home page.</p>
    </div>
  );
};

export default Home;

Data Fetching with getStaticProps and getServerSideProps

getStaticProps is used for static generation. It runs at build time and allows you to fetch data and pass it to your page as props. Use this for data that doesn't change often.

Example:

// pages/index.js
import React from 'react';

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

// This function runs at build time
export async function getStaticProps() {
  // Fetch data from an API
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default Home;

getServerSideProps is used for server-side rendering. It runs on every request and allows you to fetch data at request time.

Example:

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Server-Side Rendering with Next.js</h1>
      <p>Data fetched from the server: {data.message}</p>
    </div>
  );
};

// This function runs on every request
export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Home;

Benefits of SSR for SEO with Next.js and How to Optimize

In this section, we will look at the main benefits of using SSR for SEO and give easy-to-follow tips on how to make the most of these benefits with your Next.js application.

1. Improved Indexing by Search Engines

Client-side rendering (CSR) can cause issues with search engines struggling to index content properly since it is rendered in the user's browser using JavaScript.

SSR, however, renders content on the server before sending it to the user's browser, ensuring the HTML is complete and can be easily crawled and indexed by search engines.

Use SSR for important pages: Ensure that key pages, such as landing pages, blog posts, and product pages, are rendered on the server to facilitate better indexing.

Example – Using SSR for a blog post page:

// pages/blog/[id].js
import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

const BlogPost = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.excerpt} />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default BlogPost

• BlogPost Component: This component displays a blog post. It uses next/head to manage meta tags, which are important for SEO.
• getServerSideProps Function: This function fetches data for the blog post from an API. It runs on the server for every request to this page, ensuring the content is ready for search engines to index when they crawl the page.

2. Faster Load Times

Search engines like Google use page load speed as a ranking factor. SSR can improve initial load time because the server sends a fully rendered page to the browser, enhancing perceived performance and user experience.

Optimize server response time: Ensure your server is optimized for quick responses. Use caching strategies to reduce server load.

Example – cache-control header for SSR:

export async function getServerSideProps({ res }) {
  res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

  const resData = await fetch('https://api.example.com/data');
  const data = await resData.json();

  return {
    props: {
      data,
    },
  };
}

• getServerSideProps Function: This function sets cache-control headers to cache the response for 10 seconds and serve stale content while revalidating for 59 seconds. This improves server response time and page load speed, contributing to better SEO.

3. Improved Social Media Sharing

When sharing links on social media, platforms like Facebook and Twitter scrape the URL content to generate previews. SSR ensures that necessary metadata is available in the initial HTML, resulting in better previews and increased click-through rates.

Manage meta tags with next/head: Use the next/head component to add meta tags for social media and SEO.

Example – Adding meta tags to a page:

import Head from 'next/head';

const Page = ({ data }) => (
  <div>
    <Head>
      <title>{data.title}</title>
      <meta name="description" content={data.description} />
      <meta property="og:title" content={data.title} />
      <meta property="og:description" content={data.description} />
      <meta property="og:image" content={data.image} />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
    <h1>{data.title}</h1>
    <p>{data.content}</p>
  </div>
);

• Page Component: This component uses next/head to add SEO meta tags, including Open Graph tags for social media previews. This ensures that when the page is shared, social media platforms can generate rich previews with the provided metadata.

4. Enhanced User Experience

A faster, more responsive website enhances the overall user experience, leading to longer visit durations and lower bounce rates. Both factors positively influence your SEO rankings.

Pre-render pages with static generation (SSG) for less dynamic content: Use SSG for pages that don’t change often to reduce server load and improve performance.

Example – Using SSG for a static page:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // Revalidate at most once every 10 seconds
  };
}

const StaticPage = ({ data }) => (
  <div>
    <h1>{data.title}</h1>
    <p>{data.content}</p>
  </div>
);

export default StaticPage;

• StaticPage Component: This component displays static content fetched from an API.
• getStaticProps Function: This function fetches data at build time and revalidates it every 10 seconds, ensuring the content is always fresh while reducing server load.

Conclusion

Using server-side rendering and Next.js together is like giving your website an extra boost for search engines. With pre-built content for search engines and a smooth experience for visitors, your site is set up to be seen by more people naturally.

This works great for any kind of website, from online stores to blogs. Next.js with SSR makes it easy to build a website that search engines love and users enjoy.

That's all for this article! If you'd like to continue the conversation or have questions, suggestions, or feedback, feel free to reach out to connect with me on LinkedIn. And if you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

By introducing a unidirectional data flow, Redux brings order and clarity to how data updates and interacts within your React components.

This article discusses the inner workings of Redux, specifically focusing on how data flows throughout your application. We'll explore core concepts like the Redux store, actions, reducers, and selectors, along with practical examples of how they work together to seamlessly manage your application state.

Table of Contents

1. What is Redux?
2. Why Use Redux for Data Management?
3. Core Concepts of Redux Data Flow
4. Unidirectional Data Flow
5. Benefits of Unidirectional Data Flow
6. State Management with Redux Store
7. What is the Redux Store?
8. Store Structure (State, Reducers, Actions)
9. Actions: Initiating State Changes
10. Action Creators (Functions to Create Actions)
11. Action Types (Identifying Different Actions)
12. How to Process State Changes
13. Pure Functions: Reducers at the Core
14. Characteristics of Pure Functions
15. Anatomy of a Reducer Function
16. Parameters: Previous State and Action Object
17. Return Value: Updated State
18. How to Handle Different Actions in Reducers
19. Using Switch Statements or Conditional Logic
20. Dispatching Actions: How to Update the Redux Store
21. The dispatch Function
22. Dispatching Actions from Components or Events
23. How to Access Specific Data from the Store
24. Creating Selector Functions
25. Memoization for Efficient Selector Usage
26. How to Connect React Components to Redux
27. The connect Function from react-redux Library
28. Mapping State and Dispatch to Props
29. Using Connected Components in Your Application
30. Advanced Redux Data Flow Techniques
31. Asynchronous Actions (Redux Thunk, Redux Saga)
32. Middleware for Extending Redux Functionality
33. Best Practices for Managing Data Flow in Redux
34. Conclusion

What is Redux?

Redux is a predictable state container for JavaScript applications, primarily used with libraries like React. It helps manage the application state in a centralized store, making it easier to manage and update state across your entire application.

In simple terms, Redux provides a way to store and manage the data that your application needs to work. It follows a strict pattern to ensure that state changes are predictable and manageable.

Why Use Redux for Data Management?

Using Redux for data management in your application offers several advantages:

Centralized State Management: Redux stores the application's state in a single store, making it easier to manage and debug compared to having scattered state across multiple components.

Predictable State Changes: State mutations are done through reducers, which are pure functions. This ensures that state changes are predictable and traceable, making it easier to understand how data flows through your application.

Easier Debugging: With a single source of truth, debugging becomes simpler. You can log state changes, track actions, and even implement time-travel debugging (via Redux DevTools) to replay actions and inspect state at any point in time.

Facilitates Testing: Since reducers are pure functions that depend only on their input and produce predictable output, testing becomes straightforward. You can easily test how reducers update the state in response to different actions.

Enforces Unidirectional Data Flow: Redux follows a strict unidirectional data flow pattern. Data flows in one direction: actions are dispatched, reducers update the state immutably, and components subscribe to the changes they're interested in. This pattern simplifies data management and reduces bugs related to inconsistent state.

Eases State Persistence: Redux makes it easier to persist your application state across sessions or store it locally, enhancing the user experience by preserving data between visits.

Scalability: Redux scales well with large applications because of its centralized state management. As your application grows, managing state becomes more manageable and less error-prone compared to using local component state or prop drilling.

Core Concepts of Redux Data Flow

Understanding the core concepts of Redux data flow is essential for mastering state management in modern JavaScript applications.

Unidirectional Data Flow

Redux follows a strict unidirectional data flow pattern, which means that data in your application moves in a single direction through a series of steps:

1. Actions: Actions are plain JavaScript objects that represent an intention to change the state. They are the only source of information for the store.
2. Reducers: Reducers are pure functions responsible for handling state transitions based on actions. They specify how the application's state changes in response to actions sent to the store.
3. Store: The store holds the application state. It allows access to the state via getState(), updates the state via dispatch(action), and registers listeners via subscribe(listener).
4. View: React components (or any other UI layer) subscribe to the store to receive updates when the state changes. They then re-render based on the updated state.

Here’s a simplified overview of how the unidirectional data flow works in Redux:

1. Action Dispatch: Components dispatch actions to the Redux store using store.dispatch(action). Actions are plain JavaScript objects with a type field that describes the type of action being performed.
2. Action Handling: The store passes the dispatched action to the root reducer. The reducer is a pure function that takes the current state and the action, computes the new state based on the action, and returns the updated state.
3. State Update: The Redux store updates its state based on the return value of the root reducer. It notifies all subscribed components of the state change.
4. Component Re-render: Components that are subscribed to the store receive the updated state as props. They re-render with the new data.

Benefits of Unidirectional Data Flow

Predictability: By enforcing a single direction for data flow, Redux makes state changes more predictable and easier to understand. Actions are explicit about what changes are happening, and reducers clearly define how the state transitions occur.

Debugging: Unidirectional data flow simplifies debugging because you can trace how state changes propagate through your application. Redux DevTools enhance this further by allowing you to track actions, inspect state changes over time, and even replay actions to reproduce bugs.

Maintainability: With a clear separation between data (state) and logic (reducers), Redux promotes cleaner, more maintainable code. It reduces the likelihood of bugs caused by inconsistent state mutations or side effects.

Scalability: As your application grows in size and complexity, unidirectional data flow helps manage state updates more effectively. It avoids the pitfalls of two-way data binding and ensures that changes to the state are controlled and manageable.

Testing: Since reducers are pure functions that take inputs and produce outputs without side effects, unit testing becomes straightforward. You can test reducers with different actions and state scenarios to ensure they behave as expected.

State Management with Redux Store

State management plays a pivotal role in modern web development, ensuring applications maintain consistent and predictable states across various components.

What is the Redux Store?

The Redux Store is the heart of Redux state management. It holds the entire state tree of your application. The store allows you to:

• Access the current state of your application via store.getState().
• Dispatch actions to change the state using store.dispatch(action).
• Subscribe to changes in the state so your components can update accordingly using store.subscribe(listener).