Reducing Latency and Improves Performance
The distance between the client and the API server is likely longer than between the rendering server and the API server because the rendering server and the API server are mostly located at the same data center, while the client and the API server communicate over the internet. Therefore, data fetching from the server has lower latency.
Data fetching from the client
| | |
|–Request HTML——–>| |
| | |
|<–Response HTML——-| |
| | |
|–Request Data——————————->| (Long distance over internet)
| | |
| | |
|<–Response Data——————————| (Long distance over internet)
| | |
| | |
Data fetching from the server
| | |
|–Request HTML——–>| |
| |–Request Data——->| (Short distance within region)
| | |
| |<–Response Data——| (Short distance within region)
| | |
|<–Response HTML (with data)——————|
| | |
However, note that your next.js server and API server might not be to each other if you deployed them on different cloud service providers. These cloud service providers are physically located in separate places and don’t even have optimized network connections. This means the latency might not reduce, and performance doesn’t improve dramatically. Let’s take an extreme example. Imagine you deployed next.js on vercel and node.js server on Google Cloud. Vercel might deploy your server in Florida while Google Cloud might deploy your server in Paris. The connection between AWS and Vercel is not optimized and the distance is long, causing a lot of latency even though you fetch data from the server.
Fetching from the server
| | |
|–Request HTML——–>| |
| |–Request Data———————–>|
| | |
| |<–Response Data———————-|
|<–Response HTML (with data)———————————-|
| | |
Fetching from the server with a long distance
| | |
|–Request HTML——–>| |
| | |
| |–Request Data———————–>| (Long distance over the internet)
| | |
| |<–Response Data———————-| (Long distance over the internet)
|<–Response HTML (with data)———————————-|
| | |
Keep your main thread less busy
By default, the browser uses a single thread to execute JavaScript and perform layout, reflows, and garbage collection. If event processing and painting get delayed, users are probably not happy with using our website. Data fetching from the server can help the main thread with these jobs, making our website more responsive.
Initializing requests and processing responses.
Rendering HTML
Request Memoization
Data Cache
Full Route Cache
Full Route Cache doesn’t cache a route, using dynamic functions like cookies, headers, or searchParams. However, Data Cache still caches the requests sent by the route.
Full Route Cache caches a route even if the path has Dynamic Segment at request time.
Router Cache
Route Handlers
Route Handlers don’t cache Response if they use dynamic functions.
https://nextjs.org/docs/app/building-your-application/caching#opting-out-2
https://nextjs.org/docs/app/building-your-application/caching#generatestaticparams
https://developer.mozilla.org/en-US/docs/Glossary/Main_thread
