Refresh
Description
The Refresh response header specifies a delay after which the browser should automatically refresh the current page or navigate to a different URL. This header provides a simple way to implement automatic page refreshes or redirects after a specified time interval.
While not part of the official HTTP specification, the Refresh header is widely supported by browsers and can be useful for implementing:
- Automatic page updates for monitoring or dashboard applications
- Countdown redirects (e.g., "You will be redirected in 5 seconds...")
- Session timeout handling
- Polling mechanisms for updating content
It's worth noting that modern web applications often use JavaScript or WebSockets for more sophisticated dynamic content updates rather than relying on the Refresh header, which causes a full page reload.
Syntax
The syntax of the Refresh header follows this structure:
<seconds>: The number of seconds to wait before refreshing the page.url=<url>: Optional parameter specifying an alternate URL to navigate to instead of refreshing the current page.
Example Syntax
This example tells the browser to refresh the current page after 5 seconds.
This example tells the browser to navigate to https://example.com/new-page after 10 seconds.
Examples
Basic Page Refresh Example
A response instructing the browser to refresh the current page after 30 seconds:
HTTP/1.1 200 OK
Date: Mon, 02 Jun 2025 16:00:00 GMT
Content-Type: text/html; charset=UTF-8
Refresh: 30
Content-Length: 345
<!DOCTYPE html>
<html>
<head><title>Auto-Refreshing Page</title></head>
<body>
<h1>Current Status</h1>
<p>This page will automatically refresh every 30 seconds to show the latest data.</p>
<p>Last updated: 16:00:00 GMT</p>
</body>
</html>
Redirect After Delay Example
A response instructing the browser to navigate to a different URL after 5 seconds:
HTTP/1.1 200 OK
Date: Mon, 02 Jun 2025 16:10:30 GMT
Content-Type: text/html; charset=UTF-8
Refresh: 5; url=/dashboard
Content-Length: 278
<!DOCTYPE html>
<html>
<head><title>Redirecting...</title></head>
<body>
<h1>Login Successful</h1>
<p>You will be redirected to the dashboard in 5 seconds.</p>
<p>If you are not redirected, <a href="/dashboard">click here</a>.</p>
</body>
</html>
Countdown Timer Example
A response with a page that displays a countdown before redirecting:
HTTP/1.1 200 OK
Date: Mon, 02 Jun 2025 16:20:45 GMT
Content-Type: text/html; charset=UTF-8
Refresh: 10; url=/final-page
Content-Length: 567
<!DOCTYPE html>
<html>
<head>
<title>Redirecting Soon</title>
<script>
// Simple countdown script
let seconds = 10;
function updateCountdown() {
document.getElementById('countdown').textContent = seconds;
if (seconds > 0) {
seconds--;
setTimeout(updateCountdown, 1000);
}
}
window.onload = updateCountdown;
</script>
</head>
<body>
<h1>Processing Complete</h1>
<p>You will be redirected in <span id="countdown">10</span> seconds.</p>
<p>If you are not redirected, <a href="/final-page">click here</a>.</p>
</body>
</html>
Summary
The Refresh response header provides a simple mechanism for implementing automatic page refreshes and delayed redirects in web applications. While not part of the official HTTP specification, it's widely supported by browsers and can be useful for various scenarios requiring periodic updates or timed redirects. However, for more sophisticated dynamic content updates, modern web applications typically use JavaScript, AJAX, or WebSockets, which provide better user experiences by avoiding full page reloads. When using the Refresh header, it's a good practice to also provide a manual link for users who may have disabled automatic refreshing in their browsers.