Why is it necessary to recognize App Router?
If you have been working with the Next.js framework, you must know that one of the standout features of this framework is its ability to manage complex routing intelligently. The App Router in Next.js is a handy tool for managing and organizing complex application routes.
Direct Integration with the Server
One of the main attractions of App Router is that it fully integrates with your server. Unlike traditional routing methods that rely on separate files for managing tasks like data fetching, this tool consolidates everything into one place and manages it effectively.
Data Management and Their Structures
In Next.js, you can easily fetch data using the server-side rendering paradigm. Specialized tools such as getStaticProps and getServerSideProps can assist you in this pathway.
Fetching Data and Caching Its Validity
Caching data and verifying its validity means enhancing performance and increasing the speed of your application. You can achieve complete control over the caching process and align your application behavior with the specific needs of each request from the user.
import useSWR from 'swr';
function App() {
const fetcher = url => fetch(url).then(res => res.json());
const { data, error } = useSWR('/api/data-endpoint', fetcher);
if (error) return <div>Error fetching data</div>;
if (!data) return <div>Loading...</div>;
return (
<div>
<h2>Data:</h2>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
Code Explanation
import useSWR from 'swr';
We use the SWR library for managing HTTP requests and data fetching.
function App() {
This is our main function that actually serves as a component for displaying retrieved data.
const fetcher = url => fetch(url).then(res => res.json());
Here we define a function for fetching and transforming the data into JSON format.
const { data, error } = useSWR('/api/data-endpoint', fetcher);
Using SWR, we can conveniently define that this function fetches the required data and, in case of an error, manages it as needed.
if (error) return <div>Error fetching data</div>;
A message indicating an error in data fetching will be displayed in case of an issue.
if (!data) return <div>Loading...</div>;
A loading message will be shown if there is no access to the data.
return ( ... )
The output of the HTML component for displaying the fetched data.
<pre>{JSON.stringify(data, null, 2)}</pre>
Data will be shown in JSON format and structured as formatted for readability.