Have you ever wondered why some websites load almost instantly and others leave you staring at a blank screen, even when you have a fast Internet connection? In some cases, your internet speed may not be the problem. This is usually due to the round trip time (RTT), which is how long it takes your browser to send a request to the server and receive a response.
The Internet depends on physical infrastructure: fiber-optic cables, satellites, and data centers are often located thousands of kilometers away. The network requests faster travel, but they are still limited to the speed of light (300,000 km/h). For example, a network request from Nigeria, USA, to a server in San Francisco travels over 12,000 km, and under ideal conditions takes about 150-200 milliseconds to travel the same distance. Multiply that by the 20-30 requests a typical web page makes (for HTML, CSS, images, APIs, and more), and those milliseconds add up to seconds of latency before a page fully loads.
In this article, we’ll explain in detail what round-trip time (RTT) is, why it’s one of the most neglected factors in web performance, and how you can use Next.js to minimize the number of RTTs to make your applications feel fast and responsive. You’ll learn how features like server-side rendering (SSR), React Server Components (RSC), image optimization, and caching all work to reduce round-trip time in a web page.
What will you learn?
What is Round Trip Time (RTT)?
When you visit a website, the browser makes a network request to the server. The server processes the request and then sends a response. Round-trip time is the total duration of the trip in milliseconds, including:
Travel time: How long it takes for a network request to reach the server.
Processing time: How long the server took to process the request.
Return time: The response time it took to return the response to the browser.
How does distance add up to round trip time?
The round trip time is highly dependent on the physical distance between the client and the server. For example:
A user in Lagos, Nigeria making a network request to a server in London that is about 5,000 km away would probably have a round trip of 100-150ms.
A server in San Francisco, which is about 12,000 km away, can achieve a round-trip time of 200–300 ms. The further away the server, the longer the round trip time.
How Round Trip Time Affects Web Performance
Modern web pages make multiple network requests to fully load. Imagine loading an e-commerce product page that requires:
1 network request for HTML (about 200 200 ms)
5 network requests for CSS/JavaScript (about 1,000 1,000 ms)
10 network requests for images (about 2,000 2,000 ms)
4 network requests for product data via API (approx. 800 ms)
This indicates that the product page will take 20 network requests to fully load, which is about 44 seconds of network latency.
Page load time goes from 1 second to 3 seconds (bounce probability increases by 32% (Google/Sista Research, 2017) means that one-third of visitors leave before the page loads.
Why client-side rendering feels slow
In client-side rendering applications, each request involves round-trip time, and traditional client-side rendering (CSR) in React apps adds:
The browser downloads a minimal HTML shell and a large JavaScript bundle.
JavaScript runs to fetch data and render the UI, which requires additional network requests.
Each API call adds another RTT, with the first Content Paint (FCP) delay.
First Content Paint (FCP) measures the time when a user first visits a page when any part of the page’s content such as text, images, or Elements are rendered on the screen.
In CSR apps, FCP is delayed because the browser cannot display any meaningful content until JavaScript has finished loading, parsing, and executing the code needed to build the UI. A typical CSR application may require 5 to 10 network round trips to obtain all the resources needed to render the UI, which can easily add up to several seconds of latency.
import { useState, useEffect } from "react"
export default function Home() {
const (products, setProducts) = useState(())
useEffect(() => {
fetch("https://api.example.com/products")
.then((res) => res.json())
.then((data) => setProducts(data))
}, ())
return (
<div>
<h1>Productsh1>
{products.length ? (
products.map((product) => <p key={product.id}>{product.name}p>)
) : (
<p>Loading...p>
)}
div>
)
}
In the above code, when Home component mounts, it initializes the state as an empty array. useEffect The hook then runs once to make the API request. While the application is in progress, a “Loading…” message appears on the screen. Once the request completes successfully, React updates the state with the retrieved data and re-renders the UI to display the product. This process introduces an additional round trip, which further delays the FCP.
How to reduce round trip time with next dot j
You can’t completely eliminate round trip time. Data must still travel over the network. What DotJ does next is to reduce how often these network requests occur and how much data each request carries. It does this through a number of techniques, e.g Server Side Rendering (SSR)for , for , for , . Responsive Server Components (RSC).for , for , for , . Image correctionand Caching or static rendering.
Server Side Rendering (SSR)
Unlike conventional reactions.
Advantages:
Short Round Trips: Since data fetching and rendering takes place on the server, the browser gets the page ready for display in one round-trip time.
Better First Content Paint: Low round-trip time means content is displayed on the page almost instantly.
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/products');
const products = await res.json();
return {
props: { products },
};
}
export default function Home({ products }) {
return (
<div>
<h1>Productsh1>
{products.map((product) => (
<p key={product.id}>{product.name}p>
))}
div>
);
}
In the above code, getServerSideProps Runs entirely on the server. When the user visits or refreshes the page, getServerSideProps() Called to fetch product data from an external API. The retrieved data is then pre-rendered on the server, meaning the product list is added to the HTML before it is sent to the browser for display. This removes the extra round-trip shown in CSR and improves FCP, as users see meaningful content as the page loads.
Responsive Server Components (RSC).
Server-side rendering is a technique where the entire page is rendered on the server. But imagine if only parts of a page are served on the server while others are served on the client?
React Server components allow the distribution of rendering between the server and the client.
For example, a ProductList Components can be served on the server, while a SearchInput Provides a component on the client to manage user interactions.
Advantages:
RSC reduces overall round-trip time (RTT) and also increases page to page content first.
async function ProductList() {
const res = await fetch('https://api.example.com/products');
const products = await res.json();
return (
<div>
<h1>Productsh1>
{products.map((product) => (
<p key={product.id}>{product.name}p>
))}
<ClientSearch /> {/* Client Component */}
div>
);
}
export default ProductList;
In the above code, ProductList An accompanying server component ClientSeacrch component as a child component. ClientSearch Render in the browser while the rest ProductList Serve on the server. When the page loads, the server runs fetch() To retrieve the product data and render the full HTML for the product list on the server ClientSearch Presents to the client side to handle user interactions.
'use client';
import { useState } from 'react';
export default function ClientSearch() {
const (query, setQuery) = useState('');
return (
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search products..."
/>
);
}
ClientSearch The top component handles user interaction, such as updating search inputs useState. It is marked with 'use client'so it runs entirely on the client side.
Image correction
Images negatively impact round-trip time RTT when they become unstable, as large files take longer to transfer from the server to the browser.
Next.js image component optimizes images automatically:
Resize: It adjusts the image size based on the user’s device.
Compression: It uses new formats like WebP to significantly shrink the file size.
Slow loading: Loads images only when they enter the user’s viewport, reducing the number of initial requests.
import Image from 'next/image';
export default function Home() {
return (
<div>
<h1>Welcome to Our Storeh1>
<Image
src="/product.jpg"
alt="Product Image"
width={500}
height={300}
/>
div>
);
}
In the code above, the page uses the next.js built-in Image Component to present a better image. When the page loads, next.js optimizes for image replacement, slow loading, and so on. This means that the browser will only download the correct image size for the device.
Caching and static rendering
With SSR and the server component, the round-trip time can still be high if the server has to process data on each request. Next.js solves this problem with Static Site Generation (SSG) and Incremental Static Regeneration (ISR).
How it works:
Static site generation: Pages are pre-rendered during build time, cached as static HTML from the CDN.
Additional static regeneration: Pages are pre-rendered but can be regenerated in the background after intervals, for example, every 60 seconds.
export const revalidate = 60;
export default async function Home() {
const res = await fetch("https://api.example.com/products", {
next: { revalidate: 60 },
});
const products = await res.json();
return (
<div>
<h1>Productsh1>
{products.map((product) => (
<p key={product.id}>{product.name}p>
))}
div>
);
}
In the above code, the Incremental Static ISR (ISR) is used in the page. revalidate = 60 The option is to regenerate the page every 60 seconds. When the user visits the page, the server immediately serves the rendered HTML. next: { revalidate: 60 } inside fetch() This means that the data is cached for 60 seconds. After 60 seconds, the next request will trigger the server to regenerate a fresh data.
Next we present the trading methods in dotjs
with the Server Side Rendering (SSR)the browser gets the fully rendered page in just one round trip. On the other hand, it can also increase server load and high TTFB. TTFB (Time to Time) is the duration it takes for a user to view the content displayed on their browser.
with the Incremental static generation (ISR)the page is pre-rendered and this results in a faster response from the server. The page will be regenerated at a fixed interval (eg every 60 seconds). The downside of this method is that users may see old content before it’s updated.
i Server componentsrendering takes place on the server, and only the interactive parts are managed on the client. With this, server-side rendering is still maintained while still allowing client interaction. The only drawback is that developers have to decide what to run on the server and what to run on the client.
To use each rendering method
Server Side Rendering (SSR) Should be applied to pages that update frequently, such as dashboards, user profiles, and the like. SSR guarantees users to always see the latest data.
As Incremental static generation (ISR)it should be applied to pages with infrequent changes, for example, product listings, marketing pages, or blogs.
use Server components When you want part of the page to render on the server while some parts run on the client. For example, pages that require user interaction such as search inputs or filters, while data retrieval and rendering takes place on the server.
The result
Round Trip Time (RTT) is one of the hidden factors behind slow page load. Each network request involves a round trip, and this network delay occurs as the browser fetches several resources such as scripts, images, and data files. Next.js addresses this problem by minimizing the number of network requests that need to be made before content can be painted.
Server Side Rendering (SSR) And Responsive Server Components (RSC). Shift data retrieval and serving to the server, which reduces client-side requests.
Image correction Reduces image size and uses CDN to quickly deliver content from nearby servers.
Caching and static rendering Serve pre-generated pages instantly without further processing from the server.
With these techniques, you can develop web applications that load faster and feel more responsive, even for users who are far from your original server or on slow networks.