Chapter title

Introduction

Chapter paragraph

We have briefly touched upon the topic of firefighting mode, how to identify and prevent it, and how it can affect the team in my <a href="https://docs.google.com/document/d/1x71PWoFphUXXItzA0N2cq42nmXN1zFaK474NgKdyiHM/edit#" rel="noopener noreferrer" target="_blank">previous blog post</a>. Today, I’d like to write about an issue that can be closely connected - namely, burnout.According to the data from the report by Yerbo, <a href="https://report.yerbo.co/" rel="noopener noreferrer" target="_blank">The State of Burnout in Tech</a>, “56% of the IT professionals can’t relax once their day is over. 62% feel physically and emotionally drained”. This means - there is a chance that over half of the people you are working with could be suffering from burnout right now. In this post, I will enclose some advice on what can be done about this.

Understanding burnout and its impact

Let’s start with what burnout is in the first place. According to WHO, burnout is a state “resulting from chronic workplace stress that has not been successfully managed”, and “is characterized by three dimensions: feelings of energy depletion or exhaustion; increased mental distance from one’s job, or feelings of negativism or cynicism related to one's job; and reduced professional efficacy”. As you can easily imagine, each of these factors alone can have a major impact on a person’s well-being and performance. Combine them, however, and it’s hard to overstate just how negative effect it can have.&nbsp;I am certain that at some point in your life, you’ve had to work while feeling exhausted. If you think back to that moment, you will most likely remember how your performance was affected. Problems with memory, concentration and alertness, decision-making skills, and even motor functions, are just the most common issues you might’ve felt. But let’s put that into context a bit.Each of us at work is a part of something greater. Be it your project team, department, internal team, or even the entire organization - in the long run, none of us truly works alone. That means that if your efficiency is lowered, it impacts everyone else around you. If that’s only a short-term issue, it can be amended, as certain fluctuations in performance are normal. But if you are feeling burned out, that raises the situation to a whole new level since the effects become increasingly long-term. Multiply that by the statistic mentioned at the beginning, and you can easily imagine just how much your projects can be affected by half of your team working with such performance. Increased turnover on your projects, decreased morale, and finally, a strong negative effect on projects’ deadlines and quality are all consequences of burnout happening for a continuous period.

Recognizing burnout… 

As you can see, the effects of burnout can be significant and influence your projects in a major, negative way. Because of that, learning to recognize early warning signs is a crucial skill in preventing your team from being burned out and your projects from failing.One of the earliest indicators that somebody can be feeling the negative effects of prolonged stress is a decrease in their productivity. As mentioned earlier, some variation is to be expected and is normal, but if that happens for a prolonged time it might be an indicator of something more.Some behavioral changes might also point toward a more serious problem. Negativity and cynicism, the feeling of helplessness or anxiety, increase in the number of absences in people who did not show such traits earlier might be just a temporary effect of an unrelated issue. Then again, it might also be a sign that the person exhibiting such changes is feeling burned out - especially if you are working in an environment that can foster it.

…and preventing it

Now that we know how serious the consequences of burnout can be and how to spot it, let’s dive into what can be done to combat it.&nbsp;One of the factors contributing to burnout in employees is an unreasonable workload, as well as overly demanding job expectations. Bearing that in mind, it is crucial to provide the people in your team with an environment that ensures the correct work-life balance. Offering flexible working hours, ensuring the use of vacation days as well, and limiting overtime to emergencies can be fundamental in preventing burnout.Another major part of reducing burnout is creating and maintaining open and honest communication. Regular check-ups and surveys are important, but ultimately useless if the people you work with can’t feel they trust you enough to tell how they feel. On the other hand, if you promote a supportive environment that values employees and has their best interests in mind, people are far more likely to talk about their problems honestly. By doing that they enable you to act in time to prevent their burnout before the issue gets out of control.Apart from the above, giving people the credit they deserve as well as skill development opportunities are also a part of the supportive work environment. Nobody feels valued when they feel their hard work goes unnoticed, and if such a situation is happening repeatedly, it can easily contribute to burnout. Aside from giving praise where it’s due, providing employees with access to courses and conferences needed to expand their skills will also demonstrate that you are committed to their growth and satisfaction in the long term.

Conclusion

In summary, burnout is a prevalent issue in the IT industry, with over 50% of
 employees experiencing it. Its symptoms include a negative attitude, decreased
 productivity, anxiety, and being withdrawn. The prolonged effect of burnout on
 the team might lead to a major negative impact on the productivity, quality,
 and timely delivery of the projects, as well as high employee turnover and low
 morale. It can, however, be prevented by fostering an environment promoting a
 proper work-life balance, employee appreciation as well and career development
 opportunities. A culture of honest and open communication is also crucial in
 preventing burnout as well as ultimately enhancing productivity and job
 satisfaction.

The negative effects of burnout can significantly impact productivity, quality, and the timely delivery of projects. Let's explore what we can do to avoid it and how to create a work environment that prevents it from occurring in the first place.

Recognizing and Preventing Burnout

In one of the previous articles, we delved into the fundamentals of the JavaScript engine, covering essential language features such as calculations and loops. However, the world of JavaScript is far more intricate, especially when it comes to handling asynchronous code and utilizing browser-provided objects. To navigate this complexity, we'll dive into the JavaScript runtime environment, which comprises Web API, Task Queue, and the Event Loop.

Chapter image

Browser API

Browser Provides Features Beyond the JavaScript Engine

The Web API, also known as the Browser API, is an essential part of the
 runtime environment provided by the browser. It's separate from the JavaScript
 engine but allows you to interact with browser features using JavaScript. Some
 aspects of the Web API include its facilitation of concurrent operations
 external to the JavaScript interpreter, despite JavaScript's inherent
 single-threaded nature.


 When a function call involves asynchronous operations, like making an HTTP
 request, setTimeout, or handling events, the JavaScript engine delegates the
 handling of these operations to the browser's corresponding API (e.g.,
 XMLHttpRequest or Fetch API) instead of blocking the call stack and waiting
 for the operation to complete (which would freeze the browser interface).
 Along with delegating the task, the engine also registers a callback function
 to be executed once the operation completes or an event occurs. Upon
 completion, when a timer reaches its designated time, or upon a user's click
 event, the corresponding callback is typically dispatched to the Task Queue.

<h3>Examples of Web APIs</h3>Document Manipulation: Utilizing the DOM (Document Object Model) for interactive web content manipulation and organization.<ul><li>Server Data Retrieval: Employing the Fetch API to seamlessly retrieve data from servers.</li><li>Timer Functions: Utilizing APIs to manage and trigger time-based operations within web applications.</li><li>Graphics Drawing and Manipulation: Leveraging the Canvas API and WebGL API for graphical content creation and manipulation on web platforms.</li><li>Audio and Video Handling: Utilizing APIs like the Web Audio API and WebRTC API for audio/video streaming and manipulation.</li><li>Device-Related Functions: Utilizing the Geolocation API to access location-based services on web applications.</li><li>Client-Side Storage: Leveraging Web Storage API and IndexedDB API for efficient client-side data storage and retrieval within browsers.</li></ul>In Node.js, there are no browser-provided Web APIs. Instead, Node.js presents a distinct set of APIs unrelated to browsers. These encompass functionalities for file system operations, network communication, and more. As Node.js is primarily utilized for server-side JavaScript applications, its APIs are specifically designed for that environment.

Task Queue

The Task Queue functions as a message queue where each message corresponds to an associated function for execution. Here are its key characteristics:<ul><li>Messages follow a First-In, First-Out (FIFO) processing order.</li><li>It enables the execution of code after the completion of API calls.</li><li>Within the Event Loop, once the call stack is clear, the runtime proceeds to process the oldest message in the queue by invoking its functions and adding them to the Call Stack.</li><li>Function execution continues until the Call Stack is empty, after which the next message in the queue is processed.</li></ul>The Task Queue is sometimes referred to as the "Event Queue" or "Callback Queue." Tasks are added to this queue when an event triggers a callback or when a specified timeout/interval expires.<h3>Microtask queue</h3>The Microtask Queue is similar to the task queue but has higher priority. It handles Microtask callbacks, including promise handlers and mutation observers.Microtasks consist of concise functions executed after the parent function or program finishes, but only when the Call Stack is clear. Some essential aspects of microtasks include:<ul><li>Microtasks have the capability to enqueue additional microtasks, and these subsequently queued microtasks execute before the next task initiates, all within the same event loop iteration.</li><li>They are designed to handle actions that require immediate execution following the current script, such as responding to a series of actions or implementing asynchronous functionality without incurring the overhead of a completely new task.</li></ul>

Event loop

The Event Loop stands as a crucial element within the JavaScript runtime environment, functioning in the following manner:<ul><li>Continuously monitoring the status of the call stack to determine if it's empty.</li><li>Upon encountering an empty call stack, all pending Microtasks from the Microtask Queue are introduced into the call stack.</li><li>When both the call stack and Microtask Queue are devoid of tasks, the event loop proceeds to dequeue tasks from the Task Queue and execute them.</li><li>Ensuring the prevention of a "starved event loop" remains pivotal for maintaining seamless JavaScript execution.</li></ul>

Code snippet

In Node.js, the Event Loop shares similarities with the browser environment, yet it diverges in its handling of I/O operations and event-driven code. Node.js leverages a unique array of modules like <code>fs</code> for file system operations and <code>http</code> for constructing HTTP servers, pivotal to its event-driven architecture while maintaining the core concepts of the Event Loop and Task Queue.

Exploring how JavaScript works behind the scenes revealed a bunch of moving parts. There's the Web API that helps JavaScript do more than it could on its own, handling tasks like fetching data or dealing with graphics. Then there's the Task Queue and Microtask Queue, kind of like waiting lines for different jobs. The Event Loop is like a supervisor, making sure tasks get done in the right order without things getting stuck. In a different world called Node.js, it's similar but has its own special tools for handling stuff. Understanding how all this works helps folks build cooler and faster websites and apps that keep up with the ever-changing web.

References

<ul><li><a href="https://medium.com/@antwan29/browser-and-web-apis-d48c3fd8739" rel="noopener noreferrer" target="_blank">https://medium.com/@antwan29/browser-and-web-apis-d48c3fd8739</a></li><li><a href="https://frontendmasters.com/books/front-end-handbook/2018/learning/web-api.html" rel="noopener noreferrer" target="_blank">https://frontendmasters.com/books/front-end-handbook/2018/learning/web-api.html</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API" rel="noopener noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide" rel="noopener noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth" rel="noopener noreferrer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth</a></li><li><a href="https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif" rel="noopener noreferrer" target="_blank">https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif</a></li><li><a href="https://javascript.info/event-loop" rel="noopener noreferrer" target="_blank">https://javascript.info/event-loop</a></li></ul>

JavaScript's inner workings can be complex and fascinating. In this article, we'll delve deeper into the JavaScript runtime environment, exploring asynchronous code execution, and how the browser provides essential features for web development.

Demystifying JavaScript Runtime Environment: Web API, Task Queue, and Event Loop

Demystifying *JavaScript Runtime Environment:* Web API, Task Queue, and Event Loop

Following our close collaboration with <a href="https://hygraph.com/" rel="noopener noreferrer" target="_blank">Hyghraph</a>, Blazity’s team of Next.js experts developed a starter template designed for high-traffic news and media websites.The <a href="https://hygraph.com/blog/enterprise-ready-content-starter" rel="noopener noreferrer">Newsify starter </a>ensures that news &amp; media organizations, regardless of their size, can harness the full potential of modern web technologies and we hope it will become a new gold standard for any modern news and media website.&nbsp;The starter will be an integral part of Hygraph's template marketplace, reflecting our shared dedication to advancing the digital toolkit available to the media sector.

A template packed with features

The Newsify starter comes packed with features, such as:<ol><li>Next.js App Router - future-proof your architecture by using recommended patterns and quickly serve your users content without unnecessary queries.</li><li>Interactive quizzes for articles - engaging interactive quizzes that can be embedded directly within articles helping users to engage with content on a deeper level.</li><li>Mocked Stock API pulled in via Remote Sources - easily swap the mocked implementation for your desired API to seamlessly integrate your stock information if choice, pulled directly from remote sources.</li><li>Sitemaps, RSS feeds, and auto-generated OG images - enhanced SEO and content discoverability with automatically generated sitemaps and RSS feeds. Plus, with auto-generated OG images, every article is social-media ready.</li><li>Internationalization - built-in internationalization features.&nbsp;</li><li>Search functionality powered by Algolia - a blazing-fast search functionality that delivers swift and precise content discovery. Just provide your Algolia keys and enjoy.</li><li>Hygraph Components - to leverage the full power of Hygraph's content management system with specialized components that ensure content is not only easy to manage but also dynamic and responsive.</li><li>“Most popular” articles list based on Google Analytics - trending articles section based on your analytics to track engagement and display the content that recently got the most attention.</li><li>Code generation for fully typesafe API as well as required setup for end-to-end testing and other enterprise-ready coding patterns.</li></ol>

Actively Co-Creating the Hygraph’s Ecosystem

Building strong partnerships with market visionaries such as Hygraph is an integral part of our growth strategy. As a federated content platform, Hygraph represents the next generation of content management, going a step beyond being a headless CMS.Both our companies had already established a relationship when Blazity became Hygraph's Solution Partner in early 2021. Earlier this year, the partnership entered a new chapter, and Blazity has been granted exclusive access to develop integrations for the Hygraph App Marketplace.The collaboration brings together Blazity's expertise in Next.js and React development and Hygraphs's robust and growing ecosystem of its federated content management platform. With Blazity's and Hygraph's commitment to excellence, users can expect new, high-quality, applications to supercharge their workflows.Stay tuned for more exciting updates and developments from this partnership!

<h2>📰 See the live demo</h2>

 <a
 href="https://hygraph-next-enterprise.vercel.app/en"
 rel="noopener noreferrer"
 target="_blank"
 >https://hygraph-next-enterprise.vercel.app</a
 >

 
<h2>📰 Read the code</h2>

 <a
 href="https://github.com/Blazity/next-news"
 rel="noopener noreferrer"
 target="_blank"
 >https://github.com/Blazity/next-news</a
 >

We’re delighted to share that our newly developed starter template for news and media organizations is now available in Hygraph’s template directory.

Blazity’s new Next.js starter for news and media organizations available in Hygraph’s template directory

We are honored to be recognized as a 2023 Fall Clutch Global Award winner. This award is a testament to the excellent client work we have delivered this year as recognized through the voice of our customers in their reviews on Clutch. We're proud to be recognized as a <a href="https://blazity.com/services/nextjs-development" rel="noopener noreferrer" target="_blank">Next.js</a> and <a href="https://blazity.com/services/react-development" rel="noopener noreferrer" target="_blank">React development leader</a> on a global scale. Clutch Global Awards showcases the very best in the B2B services industry worldwide.For the sixth consecutive year, Clutch has honored its top B2B companies with the Global Award designation. Honorees are selected based on their industry expertise and ability to deliver, scores that are calculated based on the client feedback from thousands of reviews published on Clutch. More than 1 million business leaders start at Clutch each month to read in-depth client interviews and discover trusted agency partners to meet their business needs.

In addition to our first award, we've also been named a 2023 Clutch Champion. This title recognizes us as a top-rated leader in the Next.js and React development space based on our clients’ satisfaction and high-quality service ratings.Clutch Champions is the newest award given to the top 10% of Clutch Global winners, a designation that recognizes business service providers across the world for their industry expertise and ability to deliver exceptional results compared to other companies in their line of service.&nbsp;We are committed to maintaining our position as the top Next.js and React developers and will continue to deliver exceptional results for our clients.Each review on Clutch.co represents a project where we've gone above and beyond to meet and exceed your expectations. We're incredibly proud of the relationships we've built, and we look forward to continuing our partnership in the years to come.We are grateful to our partners for their support and collaboration and look forward to strengthening these partnerships in the future.We also want to thank our talented team at Blazity. This recognition is a testament to your talent and expertise and would have been impossible without your dedication and hard work.To see all our recent reviews, check out our <a href="https://clutch.co/profile/blazity-software#highlights" rel="noopener noreferrer" target="_blank">profile on Clutch.co</a>.

Blazity has achieved a remarkable milestone by being named a Clutch Global Award winner and a Clutch Champion.

Blazity has achieved a remarkable milestone by being named a Clutch Global Award winner and a Clutch Champion

Bazity named a Clutch Global Award winner and a Clutch Champion

Readme Documentation

The README is a crucial part of any project. It should be succinct yet loaded with all the frequently needed information, acting as the gateway to understanding our projects.Each README within our ecosystem should consistently feature these important sections:<h3>Setup and Installation</h3>In this section, provide comprehensive instructions on how to install and run the project locally. It should cover the process of cloning the repository, installing the necessary dependencies, and any command line instructions for executing the project.<h3>Configuration</h3>Elaborate on how to configure the project. Include any information necessary for:<ul><li>configs,</li><li>environment variables,</li><li>and database dumps.</li></ul>If there's an&nbsp;<code>.env</code>&nbsp;file or a config directory, make sure to mention it here and include instructions on how to get it.<h3>Resources</h3>Highlight useful links that directly pertain to the project, such as:<ul><li>The project's documentation tool (e.g., Confluence).</li><li>The project's Kanban board (e.g., JIRA) for tracking progress and tasks.</li><li>CI/CD badges and links (like Jenkins, GitHub Actions, Gitlab Pipelines) to quickly navigate to the CI/CD pipelines.</li></ul>

<h3>Troubleshooting &amp; Known Issues</h3>Document any known issues and challenges encountered during the project's development along with their solutions. Include links to articles that helped solve these issues. This serves as a useful reference for team members who might face the same problem in the future.<h3>Git Convention</h3>Detail the Git conventions followed in the project. This could include information on whether conventional commits are being used, the tense to be used in commit messages, and the rationale behind the chosen approach (if necessary).<h3>Testing</h3>Outline the testing methodologies adopted in the project. Information about the types of tests, expected coverage, and methodologies such as&nbsp;<code>GWT (Given When Then)</code>&nbsp;or&nbsp;<code>AAA (Arrange Act Assert)</code>&nbsp;should be covered.&nbsp;In cases where tests are not applicable to the project (like purely visual projects), explicitly state this.<h3>File Structure and Infrastructure Overview</h3>Give a basic description of the file structure, focusing on what a new developer needs to know to start working. If the project uses cloud or third-party services and the infrastructure is different than a usual standard project, provide a simple graph showing how components connect to each other.Tools like the ones listed below can be used to create these graphs:<ul><li>Miro,</li><li>Excalidraw (<a href="https://libraries.excalidraw.com/?theme=light&amp;sort=downloadsTotal" rel="noopener noreferrer" target="_blank">helpful icon libraries</a>),</li><li>Mermaid (in markdown).</li></ul>

External Documentation

There are aspects of the project that require a more detailed form of documentation. These include elements that discuss in-depth architectural choices, extensive coding style guides, or major project decisions. For these, an external documentation platform such as Confluence is more suitable. This platform allows for better organization of complex information, collaborative editing, and structured layout, which are essential for navigating larger projects<h3>ADRs</h3>ADRs, or&nbsp;Architecture Decision Records, serve as documentation of important architectural choices made during a project. They provide an understanding of the context, decision, and consequences of choosing one solution over another. While not frequently referenced in day-to-day development, they become crucial when troubleshooting issues or making further architectural decisions. Given the fact that they are not referenced often, it's practical to host ADRs on an external platform like Confluence.<h3>Architecture Specs</h3>When a project is large, the basic information in the README might not be enough. You may need to create more detailed architectural diagrams and specs. These documents could provide a deeper look into the system, show how different parts interact, and give complete technical details. These documents are often too detailed for a README. It's better to put them on a platform like Confluence. This way, the README stays easy to understand, while more detailed information is available for those who need it

In-Code Documentation

<h3>Backend API Docs</h3>When it comes to documenting backend APIs,&nbsp;<a href="https://www.openapis.org/" rel="noopener noreferrer" target="_blank">OpenAPI</a>&nbsp;is a reliable tool. We typically utilize an implementation like Swagger (+ UI) for REST and GraphQL APIs. It provides a UI to interact with the API and understand its functionalities. This form of in-code documentation is essential when we have a dedicated backend team and the APIs are complex enough to warrant such documentation.However, if we are creating a simple pseudo-backend with Next.js API routes, such detailed documentation may not be required. The focus should be on making the code as readable and easy to understand as possible.When working with other types of APIs like&nbsp;<a href="https://grpc.io/" rel="noopener noreferrer" target="_blank">gRPC</a>&nbsp;or&nbsp;<a href="https://trpc.io/" rel="noopener noreferrer" target="_blank">tRPC</a>, other forms of documentation may be necessary. Since OpenAPI is limited to REST and GraphQL, additional tools or methodologies may be required to adequately document these systems.<h3>Utility and Type Docs</h3>To maintain clarity and readability in our codebase, we employ JSDoc format to document utility/helper functions and global TypeScript types. This form of documentation is key to understanding how these utilities work and how to use them.You may wonder why we need JSDocs when we already have TypeScript. The answer lies in the self-documenting nature of code.Global functions or types often have short names, which is expected and good practice. However, these concise names can sometimes affect the self-documenting aspect of the code. By using JSDoc format, we can provide detailed descriptions, parameter explanations, and return value information that TypeScript alone may not convey.Additionally, JSDoc comments can serve as the foundation for generating web-based documentation. Tools like TypeDoc can extract JSDoc annotations from our code and generate interactive documentation that helps developers understand the utilities and types we've defined.<ol><li>For example, consider a global TypeScript type&nbsp;<code>.d.ts</code>&nbsp;file:</li></ol>

And a utility function:TypeScriptCopy

By providing detailed JSDoc comments like this, we enhance the readability and maintainability of our codebase. The documentation also serves as a reference point for developers who interact with these utilities and types.Remember that proper in-code documentation, in the form of JSDoc comments, makes our codebase more self-explanatory and enables the generation of user-friendly documentation when needed.Keep in mind, going overboard with it can backfire, since after all, they're just comments with their own set of downsides.

That's the long and short of how we dodge project chaos with our doc guidelines. It’s like having a friendly chat with every new project and getting to know each other before things get serious. Hopefully, our approach sparks some fresh ideas for handling your own project documentation.

At the heart of every successful project lies robust documentation that not only serves as a roadmap for the project, but also eases the learning curve for newcomers. The essence of good documentation is about providing a clear pathway through the configurations and conventions that shape the project. Today, we're giving you an insight into how our internal tech documentation serves as the backbone of our developmental process.

The essence of good documentation is about providing a clear pathway through the configurations and conventions that shape the project. Today, we're giving you an insight into how our internal tech documentation serves as the backbone of our developmental process.

Our Guide to Seamless Project Documentation

When managing a Next.js project, it's essential to have a strategy in place
 for times when the site needs to go into maintenance mode. This ensures that
 users are not faced with a broken or insecure site during updates or fixes.
 This article discusses how to implement such a mode effectively, with an
 emphasis on minimizing disruption and maintaining a professional user
 experience during these pauses in service.

Solution 1: next-maintenance-mode library

<a href="https://www.npmjs.com/package/next-maintenance-mode" rel="noopener noreferrer" target="_blank">Next-maintenance-mode</a> is a middleware specially designed for Next.js applications, enabling to toggle maintenance mode on and off easily. When activated, it redirects users to a designated maintenance page, while still keeping essential parts of the site operational. Its compatibility with configuration providers such as Upstash and Edge Config allows for flexible and dynamic maintenance state management.

Custom Code

Our solution also includes an optional caching feature to help save bandwidth. It uses LRU cache under the hood. While it may not be the best solution it still helps to reduce bandwidth usage. Due to edge functions nature, the LRU cache might occasionally reset, but it's nothing to worry about. If this happens, the status is automatically checked in the provider and updated. This won't affect passed middleware's functions - they are not cached.

You can also easily access the <code>req </code>parameter in passed middleware functions, this allows for seamless integration with for e.g. next-auth.

By splitting functions to execute either before or after checking maintenance status you can for e.g. allow users with admin rights to access the page while every other user will be presented with the maintenance mode page.Apart from that you can also use <code>updateMaintenanceModeStatus</code> function which allows you to toggle the maintenance mode from the server side for e.g. route handler. It means that you can easily create an admin panel where it’d be possible to toggle the mode. Or if any critical error occurs for e.g. if a test fails you can toggle it automatically.Try it out yourself!<h2>🛠️ Next.js Maintenance Mode</h2><a href="https://github.com/Blazity/next-maintenance-mode" rel="noopener noreferrer" target="_blank">https://github.com/Blazity/next-maintenance-mode</a>

Solution 2: Using middleware

Vercel has created a <a href="https://vercel.com/templates/next.js/maintenance-page" rel="noopener noreferrer" target="_blank">template</a> that uses <a href="https://vercel.com/docs/storage/edge-config" rel="noopener noreferrer" target="_blank">edge config</a> (global datastore). It’s an easy-to-implement and simple solution. It uses Next.js middleware, evaluating each request to see if the maintenance mode is activated. Simple, right? However, there’s a catch. If you exceed 50,000 reads per month, &nbsp;it can become expensive. For websites that have a significant volume of traffic, the number of reads can quickly add up, leading to unexpected costs.

Solution 3: Conditional rendering

Using conditional rendering for a maintenance mode in Next.js involves displaying a &lt;MaintenancePage/&gt; component instead of the usual application content when an environment variable indicates maintenance is active. This can be quickly implemented by checking the environment variable in the <code>_app.js </code>file and rendering the maintenance page accordingly.Here's a more detailed look at how this could be structured within your <code>_app.js</code> file:

However, this method doesn't restrict access to API routes, which remain functional and might cause inconsistent behavior if accessed directly during maintenance. Additionally, if the build process relies on live data (used for e.g. in middleware file) that's unavailable during maintenance, it could lead to build failures.To address these drawbacks, developers might need to implement additional checks or fallbacks for API routes and ensure that the build process can handle unavailable data, either through error handling or by using cached data. This can make the logic more complex and hard to maintain.

Solution 4: A separate branch

Using Vercel deployment, an effective strategy for displaying a maintenance page might be to create a separate branch named, for example, “maintenance-page”. This method avoids the need to change anything in the database, providing a seamless way to switch to a maintenance view when required. Within Vercel, you can use the “promote to production” function, enabling the selected branch to replace the existing production deployment. This approach ensures that the construction and deployment of the project continue uninterrupted, even if there’s a failure in the backend. However in this case there are several major issues:<ul><li>Third-Party Dependency: Relies on Vercel's uptime, with no control during their outages.</li><li>Time Delays: Switching to maintenance mode is not instant due to build times.</li><li>Rollback Complexity: Returning to the main site requires another build, adding downtime.</li></ul>

To summarize, when dealing with backend issues or security vulnerabilities in Next.js projects, it's important to have an effective maintenance mode strategy. The options considered include using middleware for global datastore checks, conditional rendering, creating a separate branch for maintenance, and utilizing the next-maintenance-mode library. Each has its considerations, such as potential costs, exposure of API routes, build-time dependencies, and downtime for deployment.The <a href="https://www.npmjs.com/package/next-maintenance-mode" rel="noopener noreferrer" target="_blank">next-maintenance-mode</a> library stands out by offering an easily integrated, cost-effective solution that ensures the frontend can display a maintenance page while selectively allowing access to certain users, like admins, without significant performance drawbacks or unexpected expenses. <h2>🛠️ Next.js Maintenance Mode</h2><a href="https://github.com/Blazity/next-maintenance-mode" rel="noopener noreferrer" target="_blank">https://github.com/Blazity/next-maintenance-mode</a>

When managing a Next.js project, it's essential to have a strategy in place for times when the site needs to go into maintenance mode. Here are some options for effectively implementing such a mode.

Implementing maintenance mode in Next.js apps

Implementing *maintenance mode* in Next.js apps

We joined the official NextConf Watch Party in London

This year we had been invited to join the official NextConf watch party in London.&nbsp;Our founding partner, Jakub Czapski, joined an expert panel focused on highlighting the importance of frontend technologies, especially Next.js in shaping the user experience for generative AI companies.Together with leaders from <a href="https://www.wpp.com/" rel="noopener noreferrer" target="_blank">WPP </a>and <a href="https://vercel.com/" rel="noopener noreferrer" target="_blank">Vercel</a>, Jakub explored the unique set of challenges faced by AI companies and the critical role Next.js and headless architecture play in solving them.

What’s new in Next.js 14?

The Next.js Conf 2023 was marked by several notable announcements, the most important one being the release of Next.js 14. The Vercel team emphasized that this release was focused on enhancing the performance, stability, and developer experience of the framework rather than creating new APIs.Here are some of the most notable changes:

<h3>Partial Static Prerendering</h3>One of the most noteworthy features is the partial (static) pre-rendering.The Vercel team wanted Next.js to offer the speed and reliability of static, while also supporting fully dynamic, personalized responses.It allows developers to render the Suspense fallback during the build and stream the children components after they finish processing. The streaming happens in the context of the initial request, so there’s no additional network overhead. For users, it means seeing the placeholder faster.Partial prerendering is built on <a href="https://react.dev/reference/react/Suspense" rel="noopener noreferrer" target="_blank">React Suspense</a> and requires no new APIs to learn. It allows for a significant improvement in initial visual loading by rendering placeholders from a static cache, including Suspense fallbacks.Partial prerendering is still under active development and the Vercel team will be sharing more updates in an upcoming minor release.

<h3>Server Actions</h3>As of v14, Next.js has upgraded to the latest React canary, which includes stable Server Actions.Server Actions allow you to use server-side code inside your components in a secure way. You can declare such Actions inside React components or completely outside of it.It might be easier for developers to think about this as “portable API Routes”. Instead of creating a new file in the api directory, you can quickly declare one function in the context of the feature you’re working on. It also has a built-in support for handling forms.

<h3>Turbopack</h3>The Next.js team has been working on the faster Rust-made replacement for Webpack for some months now and they plan to release it as Stable soon. The team will still support Webpack and custom integrations.&nbsp;Turbopack is still in development but the Vercel team already demonstrated some very promising results, with up to 53.3% faster local server startup and up to 94% faster code updates with Fast Refresh.Anyone interested in the development of Turbopack can follow the percentage of tests passing at <a href="https://areweturboyet.com/" rel="noopener noreferrer" target="_blank">areweturboyet.com</a>

<h3>Learn Next.js</h3>Vercel team also released a brand new, free course on <a href="https://nextjs.org/learn" rel="noopener noreferrer" target="_blank">Next.js Learn</a>. This free interactive course is designed to help developers learn the main features of Next.js by building a full-stack web application.It’s divided into 16 chapters that take users from React to Next.js.including topics such as Static and Dynamic Rendering, App Router, authentication, databases, and more.&nbsp;This course assumes the participants have a basic understanding of React and JavaScript. But for those who are also new to React Vercel team prepared a <a href="https://nextjs.org/learn/react-foundations" rel="noopener noreferrer" target="_blank">React Foundations</a> course to help learn the fundamentals of React, such as components, props, state, and hooks, and newer features like Server Components and Suspense.We believe that this course will help many people to start with Next.js most efficiently and we strongly encourage everyone, beginner or experienced, to check it out.

Summary

Just like in previous years, Next.js Conf 2023 was a great event. The conference proves to be the most prominent event for the entire Next.js community, bringing together developers and business leaders pushing the entire ecosystem forward.We’re delighted that we could be part of it and we’d like to thank the Vercel team for organizing this great event! We can’t wait for next year's edition.

Next.js Conf holds particular significance for us, as it aligns perfectly with our commitment to staying at the forefront of technological advancements in the Next.js ecosystem. Here’s a summary of the most notable announcements from this year’s edition.

Blazity at Next.js Conf 2023 and what’s new in Next.js 14?

Performance metrics

Measuring performance in web apps using tools such as Google Lighthouse
 provides developers with insights into how well a site adheres to best
 practices. Lighthouse offers detailed feedback on performance, accessibility,
 and SEO, helping teams optimize their sites for both user experience and
 search rankings. This Performance score is calculated by combining several
 different performance metrics.

It's crucial to understand that Lighthouse scores might not always be
 accurate. Some techniques can skew or falsify the results. We recommend using
 tools like
 <a href="https://pagespeed.web.dev/" rel="noopener noreferrer" target="_blank"
 >PageSpeed Insights</a
 >
 for more reliable feedback. Keep in mind, when using the Lighthouse tool in a
 browser, the performance can be influenced by the power of your computer.

Code splitting

Code splitting is an optimization technique that uses the next/dynamic feature, built upon <code>React.lazy() </code>and <code>suspense</code>. Instead of sending a large JavaScript bundle to the client, code splitting breaks it into smaller chunks, delivering only the necessary code when it's needed (Next.js does it for each page by default). This can speed up initial load times and offer more efficient caching. However, it’s worth noting that using dynamic imports too frequently can be ineffective.&nbsp;Use dynamic imports when:<ul><li>Dealing with large libraries or components not needed immediately.</li><li>Rendering components conditionally (e.g., modals).</li><li>Integrating third-party tools or widgets occasionally.</li></ul>Each dynamic import results in an extra server request, potentially leading to delays. Striking the right balance is crucial for maintaining peak performance.Note: Dynamic imports and code splitting in Next.js (and Webpack) work on a file basis. Ensure individual components you intend to load separately are in distinct files. Otherwise, it’ll not work. It works the same way if you export components from one file (the technique used to make imports cleaner).

Progressive/selective hydration

Hydration is a process in web development where the client-side JavaScript brings to life the static content rendered by the server. When using techniques like server-side rendering in Next.js, hydration becomes crucial.Here's a simpler breakdown:<ul><li>Server-Side Rendering (SSR): The server sends your landing page's complete HTML to the browser. This means users can see the page even before any JavaScript runs.</li><li>JavaScript Comes into Play: After the page is displayed, the browser downloads and runs the related JavaScript. A lot of this JavaScript often just reinforces what's already in the HTML.</li><li>The Hydration Step: Now, this JavaScript starts adding interactivity to the page by connecting event listeners and creating a DOM structure. This step, turning a static page into an interactive one, is called hydration.</li></ul>But there's a catch. Hydration can slow things down by blocking the main thread, which can increase the Total Blocking Time (TBT). So, while hydration makes a whole page interactive, it can also make it feel a bit slower for a moment. To combat this, some developers use progressive or selective hydration to only activate the most crucial parts of a page, improving both speed and user experience. There’s a cool library <a href="https://www.npmjs.com/package/next-lazy-hydrate" rel="noopener noreferrer" target="_blank">next-lazy-hydrate</a> which helps to optimize this process. Basically while using this library you can simultaneously tap into the benefits of both code splitting and progressive hydration. It’s also worth noting that in Next.js 13 app directory you can achieve similar results by streaming server components.

Optimizing images

Using Next.js greatly simplifies image optimization with its next/image component. This component automatically configures width, height, and blurDataURL values for imported images, minimizing Cumulative Layout Shift (CLS) before the image fully loads. You can also set these values manually. The component compresses images for better performance, reducing the data browsers need to fetch. It also supports lazy and priority loading, allowing control over which images load first. This results in faster website load times and an enhanced user experience.So in general it’s a good choice to use next/image in most cases. However, if your app has a lot of images, using that feature on some hosting providers can get expensive (they are optimized during runtime). Remember, next/image isn't the only way to optimize images in Next.js. While it's user-friendly and makes maintaining your app easier, you can always use other standard methods for image optimization such as:<ul><li>lazy loading below the fold</li><li>setting <code>fetchpriority </code>for critical images</li><li>decoding images asynchronously</li><li>setting <code>srcset </code>manually</li></ul>In fact, next/image uses these techniques under the hood but requires much less config.Note: If you're using remote images and your Next.js version is below 12.3, you'll need to define domains in the Next.js config file. If you aim to use images from multiple domains, consider trying our <a href="https://github.com/Blazity/next-image-proxy" rel="noopener noreferrer" target="_blank">next-image-proxy</a>, which facilitates this.

Optimizing fonts

Next.js's next/font feature streamlines font optimization. It uses the CSS size-adjust property to prevent unexpected layout shifts when loading fonts. Additionally, it has a built-in method for using Google Fonts: instead of fetching them via external requests, Next.js downloads the font and CSS files during the build and bundles them with other web assets like HTML and CSS during deployment. However, as with next/image, there are manual methods to boost the performance such as:<ul><li>font-display: swap</li><li>using system fonts instead of external ones</li><li>preloading fonts</li></ul>

Optimizing third-party scripts

Next.js's next/script component offers targeted strategies for loading third-party scripts to optimize performance:<ul><li>beforeInteractive: Loads the script before Next.js initializes, potentially adding to initial rendering time but ensuring script availability.</li><li>afterInteractive (default): Loads the script after some page hydration, balancing between immediate functionality and smooth rendering.</li><li>lazyOnload: Waits for browser idle time to load the script, ideal for non-immediate scripts, enhancing perceived performance.</li><li>worker (experimental): Loads the script in a web worker, offloading execution to keep the main browser thread responsive. While promising, it's still in the testing phase (it uses <a href="https://partytown.builder.io/" rel="noopener noreferrer" target="_blank">Partytown</a> under the hood).&nbsp;</li></ul>It also offers enhanced flexibility by allowing users to integrate callback functions like onLoad, onReady, and onError. These callbacks can be crucial in handling script behaviors and responding to different loading scenarios. To dive deeper and understand its full capabilities, refer to the official <a href="https://nextjs.org/docs/pages/building-your-application/optimizing/scripts#executing-additional-code" rel="noopener noreferrer" target="_blank">Next.js documentation</a>.

Bundle Analysis

In Next.js, code is segmented into modules and bundled by webpack into single files for execution in the browser. As apps grow in complexity, their codebase can become bulky, affecting load times and maintainability. Analyzing these bundles helps pinpoint optimization opportunities. To enhance performance, consider:<ul><li>Eliminating duplicate or unused npm packages.</li><li>Applying minification, tree shaking, and code splitting for JavaScript files.</li><li>Moving some dependencies to the server bundle</li></ul>For developers looking to enhance the performance of their Next.js apps, bundle analysis is an essential step. The <a href="https://www.npmjs.com/package/@next/bundle-analyzer" rel="noopener noreferrer" target="_blank">@next/bundle-analyzer</a> is a Next.js library designed to inspect the size and structure of your app's bundle. It helps pinpoint bulky code segments, allowing you to trim down the bundle size and improve the performance.

Optimizing performance for Next.js applications is essential but can be complex. Luckily, Next.js provides tools to help streamline this task. For larger projects, it's important to plan optimization by declaring performance budget, since not all techniques will suit every context. For those who want more detailed information, we'll be preparing an article focused on how to set and stick to a performance budget. With proper planning and the right tools, boosting performance becomes easier, leading to more satisfied users.

Next.js provides built-in performance enhancement features. However, to truly maximize its potential and boost core web vitals, there's more work involved. In this article, we'll explore how to optimize performance in Next.js apps and delve into popular techniques for further improvements. 

In this article, we'll explore how to optimize performance in Next.js apps and delve into popular techniques for further improvements.

General strategies for optimizing performance in Next.js applications

General strategies for *optimizing performance* in Next.js applications

Contact Section

We've built the most innovative fashion e-commerce start-up.

The contact information is only used to process your request. By clicking send, you agree to allow us to store the contact information in order to process your request.

Contact us

Jakub Czapski

To best serve you, let's get to know your requirements first. Tell us about your project, and we'll arrange a free consultation call to discuss how we can help.

GET FREE ESTIMATION

Looking for Next.js and React experts? Tell us more about your project and let us take over - we will be happy to schedule a free consultation and talk about it.

Blog

Top posts

Demystifying JavaScript Runtime Environment: Web API, Task Queue, and Event Loop

Blazity’s new Next.js starter for news and media organizations available in Hygraph’s template directory

Our Guide to Seamless Project Documentation

Implementing maintenance mode in Next.js apps

Bazity named a Clutch Global Award winner and a Clutch Champion

All posts

Recognizing and Preventing Burnout

Demystifying JavaScript Runtime Environment: Web API, Task Queue, and Event Loop

Blazity’s new Next.js starter for news and media organizations available in Hygraph’s template directory

Bazity named a Clutch Global Award winner and a Clutch Champion

Our Guide to Seamless Project Documentation

Implementing maintenance mode in Next.js apps

Blazity at Next.js Conf 2023 and what’s new in Next.js 14?

General strategies for optimizing performance in Next.js applications

Contact us today...