Before this article, I mentioned to you that would start the articles series. If you lost what I did, check it: Understanding JavaScript API Requests and Responses in the Data Fetching lifecycle
In this article series, I’ll not teach you how to create an API but keep in mind that you need to create or receive an API before data fetching.
We know that data fetching is a crucial aspect of modern web development with the increasing complexity of web applications needing to work with dynamic loading of data from servers to web applications, by making API calls to fetch and save items.
It’s important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages. This is because the data fetching is done at the time of the component or pages mount, and the data is not cached.
Whether we’re building Single Page Applications (SPA), Server Side Rendering (SSR), Static Site Generation (SSG), or Incremental Static Regeneration (ISR), we need to retrieve data from various sources to provide a seamless user experience, and in the data fetching lifecycle, API requests are made to remote servers to retrieve data. There are several types of API requests, including GET, POST, PUT, DELETE, and PATCH. GET requests are used to retrieve data, while POST requests are used to submit new data to a server. PUT, DELETE, and PATCH requests are used to modify, delete, or update existing data on the server, and API responses contain the data requested by an API request. The data is typically returned in the form of JSON (JavaScript Object Notation), a lightweight data format that is easy to read and write. Once the response is received, the data can be parsed and displayed on a web page or used for further processing.
We’ll start by discussing the V8 JavaScript engine, responsible for executing our code in the browser. Understanding how V8 works is essential when dealing with asynchronous operations, which are commonly used in data fetching. We’ll then move on to Callbacks, AJAX, and XMLHttpRequest, which are some of the earliest techniques used to fetch data in JavaScript. We’ll explore their advantages and disadvantages and discuss when to use them.
Next, we’ll dive into the differences between Synchronous and Asynchronous code execution and explore how to use Asynchronous code to fetch data. We’ll examine Promises, one of the most popular ways to handle asynchronous operations in JavaScript, and we’ll discuss their advantages and disadvantages. We’ll also cover Async/Await, a more recent addition to the language that simplifies the syntax of Promises.
Finally, we’ll discuss the Fetch API, a modern way to fetch data in JavaScript that provides a simpler and more flexible interface than XMLHttpRequest. We’ll explore its capabilities and limitations and discuss best practices for using it in real-world applications.
Throughout this article series, we’ll provide examples and code snippets that illustrate the concepts we discuss. We’ll also share tips and tricks to help you optimize your data-fetching code and avoid common pitfalls. Whether you’re a Frontend engineer looking to deepen your understanding of data fetching or a seasoned Frontend engineer who wants to improve their skills, this article series has something for you.
Whether a beginner or an experienced Frontend engineer, this article series will provide valuable insights and practical tips to enhance your data fetching skills.
Thank you for reading, I hope this article can somehow have increased your knowledge base about it.
Top comments (0)