DEV Community: Emdadul Islam

[Boost]

Emdadul Islam — Wed, 12 Mar 2025 17:21:56 +0000

🔥 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀: 𝗛𝗼𝘄 𝘁𝗼 𝗧𝗵𝗶𝗻𝗸 𝗟𝗶𝗸𝗲 𝗮𝗻 𝗘𝘅𝗽𝗲𝗿𝘁 𝗳𝗿𝗼𝗺 𝗗𝗮𝘆 𝗢𝗻𝗲! 🚀

Emdadul Islam ・ Mar 12

🔥 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀: 𝗛𝗼𝘄 𝘁𝗼 𝗧𝗵𝗶𝗻𝗸 𝗟𝗶𝗸𝗲 𝗮𝗻 𝗘𝘅𝗽𝗲𝗿𝘁 𝗳𝗿𝗼𝗺 𝗗𝗮𝘆 𝗢𝗻𝗲! 🚀

Emdadul Islam — Wed, 12 Mar 2025 17:21:21 +0000

When starting as a 𝗷𝘂𝗻𝗶𝗼𝗿 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿, debugging and understanding issues can be overwhelming. Often, we rely on senior developers for guidance. But what if you could approach problems like an expert from day one? Here are some key 𝗱𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝗮𝗻𝗱 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝘀𝘁𝗿𝗮𝘁𝗲𝗴𝗶𝗲𝘀 to level up your frontend skills:

🔍 Debugging Like a Pro
✅ 𝗙𝗶𝗻𝗱 𝘁𝗵𝗲 𝗘𝗻𝘁𝗿𝘆 𝗣𝗼𝗶𝗻𝘁
When a website feature isn’t working, identify which file or component is responsible. Inspect the page for unique values (like IDs) to trace it back to the source file.

✅ 𝗨𝘀𝗲 𝗥𝗼𝘂𝘁𝗶𝗻𝗴 𝗳𝗼𝗿 𝗤𝘂𝗶𝗰𝗸 𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻
Instead of always asking seniors, leverage 𝗿𝗼𝘂𝘁𝗶𝗻𝗴 to locate the exact file serving a page. This will make you self-sufficient and speed up your debugging process.

✅ 𝗠𝗮𝘀𝘁𝗲𝗿 𝘁𝗵𝗲 𝗜𝗻𝘀𝗽𝗲𝗰𝘁 𝗘𝗹𝗲𝗺𝗲𝗻𝘁 & 𝗖𝗼𝗻𝘀𝗼𝗹𝗲 𝗟𝗼𝗴𝘀
Your best friends as a frontend developer are the 𝗖𝗼𝗻𝘀𝗼𝗹𝗲 𝗮𝗻𝗱 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝘁𝗮𝗯.
• Use console logs to track issues without getting lost in complex code.
• Plan your design layout by inspecting elements before jumping into code.

✅ 𝗡𝗲𝘁𝘄𝗼𝗿𝗸 𝗧𝗮𝗯: 𝗬𝗼𝘂𝗿 𝗦𝗲𝗰𝗿𝗲𝘁 𝗪𝗲𝗮𝗽𝗼𝗻
This tool helps you debug API calls efficiently. Suppose an API is unintentionally called twice per action—using the Network tab, you can identify and fix it, impressing your team in the next Scrum meeting.

✅ 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗦𝘁𝗼𝗿𝗮𝗴𝗲
The Application tab (Local Storage) can reduce backend dependency and improve user experience with smart caching strategies.

⚡ 𝗤𝘂𝗶𝗰𝗸 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗧𝗶𝗽𝘀
🔹 𝗨𝘀𝗲 𝗨𝗻𝗶𝗾𝘂𝗲 𝗶𝗱 𝗔𝘁𝘁𝗿𝗶𝗯𝘂𝘁𝗲𝘀 in components for faster debugging.
🔹 𝗔𝘃𝗼𝗶𝗱 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗹𝗼𝗼𝗽𝘀—if you need only a few specific values, access them directly instead of iterating through the entire dataset.
🔹 𝗟𝗮𝘇𝘆 𝗹𝗼𝗮𝗱 𝗹𝗼𝘄𝗲𝗿-𝗽𝗮𝗴𝗲 𝘀𝗲𝗰𝘁𝗶𝗼𝗻𝘀 to improve initial page load speed and reduce backend strain.
🔹 𝗠𝗶𝗻𝗶𝗺𝗶𝘇𝗲 𝗛𝗧𝗠𝗟 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀 to reduce document size and improve performance.
🔹 𝗪𝗿𝗶𝘁𝗲 𝗰𝗼𝗻𝗰𝗶𝘀𝗲 𝗖𝗦𝗦 (shorthand properties) to optimize stylesheets.
🔹 𝗡𝗲𝘃𝗲𝗿 𝘄𝗿𝗶𝘁𝗲 𝗰𝗼𝗱𝗲 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗶𝘁—it may work today but will cause major issues later.

By implementing these strategies, you’ll start 𝘁𝗵𝗶𝗻𝗸𝗶𝗻𝗴 𝗹𝗶𝗸𝗲 𝗮 𝘀𝗲𝗻𝗶𝗼𝗿 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 while still in your junior phase! 🚀

Do you have any 𝗱𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝘁𝗿𝗶𝗰𝗸𝘀 that helped you as a frontend developer? Drop them in the comments! 👇

FrontendDevelopment #WebPerformance #WebOptimization #DebuggingTips #WebDevelopment #LazyLoading #CSSOptimization #JavaScript #FrontendTips #CareerGrowth

How to Optimize API Requests with Refresh Tokens and Axios Interceptors in Next.js

Emdadul Islam — Sat, 16 Mar 2024 18:14:32 +0000

We all used JWT at least once in our lives. In the minimum scenario we use JWT token for API requests to get any data. This kind of token is know as access token(AT) and it can store some property. But the most important one is expire time. So, we have to store that AT in the browser so that it can be send again when we make a request to the API. The work can be done from here but the problem arise if the token is valid for a long period of time. For this issue developer started to use refresh token(RT).

Access Token: An access token is short lived token that is send as a bearer token inside the authorization header. The expire time is in between 1 minute to 15 minutes maximum.
Refresh Token: When an access token is expired, we make a call to a specific route for new access token. This route take refresh token as authorization header and do some serious validation to return an access token for API calls within the website and a new refresh token to store for the user in the browser to get the next new access token from the '/refresh' route.

For the front end call we usually use Axios or fetch API for calling the external API for data. For this guideline I am gonna use Axios and NextJS as a reference.

On the base line, Axios is used to make HTTP request to an API and get HTTP response in return. Interceptors are like middleman for this request and response. Whenever you gonna make a request its gonna go through the interceptor first. In that interceptor you can change the header object as you like. In our case AT is need to be add in the authorization header like below.

{
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NGYwNzYzOGFlNjg4MDY4YzY1ODBkNzMiLCJwaG9uZSI6IjAxNSIsInJvbGUiOiJTVVBFUl9BRE1JTiIsImlhdCI6MTcxMDUwMzQ5NSwiZXhwIjoxNzExMTA4Mjk1fQ.STh0ZBiQVV
}

For our convenience, we make a fetcher function. that gonna get the access token from the local storage or cookie and add that token into the authorization header. That gonna look like something like this.

Here the checkAuth() function get the header as option. In my application it was a hook that gonna utilize the interceptor mechanism of Axios.

Axios Interceptor

Axios interceptor is like a middleware that gonna intercept the request and response of a http request and modify the header or data as per requirement.

So we made a interceptor that gonna get access token and evaluate if it is expired or not. If it is expired then it gonna call the "/refresh-token" route to get the new valid access token along with refresh token.

Here, I used next auth for my project. NextAuth provides a hook called useSession(). This hook returns the data we stored in the session and a authentication state as status. In the useEffect() hook we called the request interceptor first. First argument of this function is callback function and the second argument takes the error handler. In brief we checked the AT validity then took a decision. if we need to fetch the refresh token we call the useRefreshToken() hook to get the new refresh token and set the info in the session storage using useSession() hook.

But the problem arise when a page has 5 or 10 API call and all of them call the fetcher function thus the useAxiosAuth() hook. So all of them got the expired access token and call the /refresh-token route to get the refresh token.

To resolve this problem we introduce the promise based request solver.

addRequestToQueue() will take all the request with invalid access token and place them in the refreshQueue[]. After that we will fetch the new access token from the '/refresh-token' route. Once we got all the AT. then we will resolve all the pending request that is waiting for fetching in the refreshQueue[].

Impact Before and After Implementing the Solution:

🚨 Before Optimization:

5 API calls trigger:
- 5 requests to the /refresh-token route.
- 5 invalid API calls to the final API using expired access tokens.

Total server requests: 25 requests for every 5 API calls made.

If you have 1,000 users, that means 25,000 unnecessary requests to the backend server! 😵‍💫 😵

✅ After Optimization:

5 API calls now result in:
- 1 request to the /refresh-token route to obtain a new access token.
- 5 valid API calls to the final API with the new, valid access token.

Total server requests: 6 requests for every 5 API calls made.

For 1,000 users, this means only 6,000 requests, drastically reducing server load.🎇 🎊

Key Benefit:

By implementing this optimization, there’s a 76% reduction in backend API calls! This leads to:

Reduced server load and faster response times.
Improved user experience with minimal delay.
A more scalable solution for high-traffic applications.

This is my first writing in my entire career, I apologize if anything is wrong. Suggest me the point of improvements, that I will truly appreciate.

Thank you.