Ayush's Blogger ✨

Next.js is a React framework that provides two ways of rendering React components into HTML pages - server-side rendering(SSR) and static site generation(SSG). In SSR, React components are rendered into HTML pages on the server after a page request comes from the browser, while in SSG, React components are rendered into HTML pages at build time. Regardless of which method is used, the rendered HTML pages are sent to the browser, making the app behave like a single-page application(SPA). This is in contrast to client-side rendering, where components are rendered in the browser. With Next.js, you can enjoy the benefits of both SSG and SSR, such as improved performance and better SEO. In addition to these features, Next.js also offers Serverless Functions, which we’ll be covering in this article. We'll cover the Next.js page and dynamic routes and learn about Next.js API and dynamic API routes, all while running Serverless Functions on Vercel, a platform designed specifically for

Why is Nginx called a “reverse” proxy? 🔥 Introduction Nginx is a highly performant, scalable, and reliable open-source web server software that is frequently utilized as a "reverse proxy.” But why is it labeled as a "reverse" proxy which raises the question? Many companies use proxy servers to route and secure traffic between networks. There is often confusion, however, on how this differs from a reverse proxy. In this blog, we will be exploring the origins of the term “reverse” and “forward” proxy and understanding how Nginx functions as a reverse proxy. 🔥 Overview of Forward and Reverse Proxy First, let's start with the basics of what a proxy server is. A proxy server, sometimes referred to as a “forward” proxy, is a server that acts as an intermediary between clients and other servers on the network. When a client makes a request, the forward proxy intercepts the request and forwards it to the appropriate server on behalf of the client. By doing so, the cli

🚩Introduction As a developer, you might find it challenging to handle error cases while writing code. Fetching and caching data efficiently is essential for improving app performance and reducing loading time. Whether you are working with APIs, remote data fetching, or from other sources, getting data into your app quickly and reliably can be a major challenge. In this blog, we will explore how to use useSWR , compare its existing hooks, and show why it's better. 🚩Pre-requisites This article assumes that you are familiar with JavaScript, React, and Next.js. It would be helpful to have a good understanding of hooks, asynchronous JavaScript, and creating custom hooks. Let's dive straight in! 🚩How useSWR works The useSWR hook takes two parameters: key and fetcher. The key is something that uniquely identifies the data to be fetched, usually the API URL, while the fetcher is a function that returns the data. The hook returns two values: data and error, representing the re

  💡 Introduction Error messages are a common part of our online experience. Whenever a server is down, we lose an internet connection, or we forget to fill out the information on a form, we receive an error message. However, the classic "Something went wrong" message is not very informative. What exactly went wrong? It's important to understand what happened and how to fix it. Therefore, in chaos engineering, error messages should be more meaningful and provide clear instructions on how to resolve the issue. 💡 What makes a bad error message? Error messages are part of our daily lives online. They inform us when something goes wrong, and help us understand what happened and how to fix it. However, not all error messages are created equal. A bad error message can leave us frustrated, confused, and unable to resolve the issue at hand. 💡Here are some common characteristics: Uninformative : Error messages that simply state "Something went wrong" or "Error 404