PHP Redirect Vs JavaScript Redirect?

Oct 17th, 2009

Redirect to another web page is possible through PHP as well as JavaScript. So, which one you will choose?

PHP is server side language, and JavaScript is Client side. So, redirect through JavaScript will be possible on Client-Side.

Redirect on client side means following steps:

User request a Page using an URI,
Server sent a page based on that.
That page will have JavaScript that will redirect user to another page. So, again server will get the request for the new page and then server will give response based on new request.
So, it Client-side -> Server-side -> Client-side -> Server-side -> Client-side.

Redirect on Server-Side means:

Client-side -> Server-side -> Client-side (headers only)* -> Server-side -> Client-side.
Client-side (headers-only) - This indicates that Client (web browser), will still be involved but it will not involve parsing the whole page and executing JavaScript and others. It is just Header sent to Client and client can quickly follow the new location. So, it is fast and more user friendly.
There can be a situation where server-side redirect is not possible then JavaScript redirect may be a only option.

Client-side/JavaScript Redirect:
A. JavaScript only:

<script>
window.location = 'http://www.mywebsite.com/new-url.php';
</script>

B. Using HTML Meta Tag, inside HEAD section:


<meta http-equiv="refresh" content="0;url=http://www.mywebsite.com/new-url.php" />

PHP/Server Side Redirect:
Redirect using PHP is done using header() function.

<?php
$loc = 'http://www.mywebsite.com/new-url.php';
header("Location: $loc");
die(0);
?>

Here you have served another page content by redirecting the user to new location because you have changed the page address, the user is looking for or for some other reason. User will smoothly get the content.

Update: I have made correction. Thanks to those who have commented and pointed mistake about the server-side redirects.

 
  1. October 19th, 2009 at 18:46 | #1

    Thanks for the post :-)

    … to be more accurate, sending the Location header in PHP also sends along a 302 Found status to the client. The client [usually a Browser] will read the Location header and makes a request to that resource. So, the “C > S > S > C” model isn’t entirely correct, it’s like the JS model: “C > S > C > S > C” since the client is receiving the redirect headers.

  2. October 20th, 2009 at 00:16 | #2

    Thanks for the post :-)

    … to be more accurate, sending the Location header in PHP also sends along a 302 Found status to the client. The client [usually a Browser] will read the Location header and makes a request to that resource. So, the “C > S > S > C” model isn’t entirely correct, it’s like the JS model: “C > S > C > S > C” since the client is receiving the redirect headers.

  3. a
    October 19th, 2009 at 19:05 | #3

    Request wise, they’re both the same, and it is because the server side one isn’t really “server side”. It still sends a response to the browser with a header and the browser still sends another request back for the new page, so the flow is the same in both, it is just the mechanism that the browser is informed to make the new request that differs.

    In the header model, the browser can ignore any page content, doesn’t need to parse the page or execute javascript, so it should indeed be faster, but the number of requests and responses are the same

  4. a
    October 20th, 2009 at 00:35 | #4

    Request wise, they’re both the same, and it is because the server side one isn’t really “server side”. It still sends a response to the browser with a header and the browser still sends another request back for the new page, so the flow is the same in both, it is just the mechanism that the browser is informed to make the new request that differs.

    In the header model, the browser can ignore any page content, doesn’t need to parse the page or execute javascript, so it should indeed be faster, but the number of requests and responses are the same

  5. Samuel Lopes Grigolato
    October 19th, 2009 at 19:10 | #5

    There is a missing step on the server side redirect on your explanation, as I’m showing on step 3:

    1) User request a page
    2) Server sends a response with a ‘Location’ header (that’s what the ‘header’ function do)
    3) the Client parses the markup, identifies the Location header, and send’s another request to the new URL
    4) The Server parses the new request and send the proper content

    So, actually, the Server Side redirect using the ‘header’ function is composed of the following interaction:

    Client-side -> Server-side -> Client-side (parsing the response location header) -> Server-side -> Client-side

    Cheers

  6. Samuel Lopes Grigolato
    October 20th, 2009 at 00:40 | #6

    There is a missing step on the server side redirect on your explanation, as I’m showing on step 3:

    1) User request a page
    2) Server sends a response with a ‘Location’ header (that’s what the ‘header’ function do)
    3) the Client parses the markup, identifies the Location header, and send’s another request to the new URL
    4) The Server parses the new request and send the proper content

    So, actually, the Server Side redirect using the ‘header’ function is composed of the following interaction:

    Client-side -> Server-side -> Client-side (parsing the response location header) -> Server-side -> Client-side

    Cheers

  7. Donny
    October 19th, 2009 at 20:08 | #7

    Description is close but not exact. In the PHP scenario, the header() does in fact send information back to the browser (client side) and the browser then makes the new request to the new URL. So it is the same client->server->client->server->client holds as the first solution. The difference is that with the PHP model, you only send headers back on the first round not HTML. This is more efficient. So, yes, the PHP model is a better solution but you technically have the same number of communication loops. To learn more, Google HTML headers and header communication.

  8. Donny
    October 20th, 2009 at 01:38 | #8

    Description is close but not exact. In the PHP scenario, the header() does in fact send information back to the browser (client side) and the browser then makes the new request to the new URL. So it is the same client->server->client->server->client holds as the first solution. The difference is that with the PHP model, you only send headers back on the first round not HTML. This is more efficient. So, yes, the PHP model is a better solution but you technically have the same number of communication loops. To learn more, Google HTML headers and header communication.

  9. tanerax
    October 20th, 2009 at 02:50 | #9

    this seems somewhat misleading, a server-side redirect simple returns to the client the new location for the requested object and its the client that actually does the work of following the location specified.

    Server-side redirect is:

    Client -> Server -> Client -> Server -> Client

    The main difference is one requires JavaScript to be present.

  10. tanerax
    October 19th, 2009 at 21:20 | #10

    this seems somewhat misleading, a server-side redirect simple returns to the client the new location for the requested object and its the client that actually does the work of following the location specified.

    Server-side redirect is:

    Client -> Server -> Client -> Server -> Client

    The main difference is one requires JavaScript to be present.

  11. Ben
    October 19th, 2009 at 21:36 | #11

    Sorry but that’s wrong.

    A header(“Location: … “) redirect still goes back to the client.

    header(“Location: …”) indicates sends a header to the client along with the response to indicate to the client that it should load up the resource indicated by the location value instead of continuing to load the current page.

    Client-side -> Server-side -> Client-side -> Server-side -> Client-side still applies.

    Try it with an http proxy, you’ll see just as many requests

  12. Ben
    October 20th, 2009 at 03:06 | #12

    Sorry but that’s wrong.

    A header(“Location: … “) redirect still goes back to the client.

    header(“Location: …”) indicates sends a header to the client along with the response to indicate to the client that it should load up the resource indicated by the location value instead of continuing to load the current page.

    Client-side -> Server-side -> Client-side -> Server-side -> Client-side still applies.

    Try it with an http proxy, you’ll see just as many requests

  13. October 19th, 2009 at 23:51 | #13

    I would advise always using server side redirects with a 301 server code. Search engines will typically credit links etc to the new url when they are employed.

  14. October 20th, 2009 at 05:21 | #14

    I would advise always using server side redirects with a 301 server code. Search engines will typically credit links etc to the new url when they are employed.

  15. October 20th, 2009 at 08:28 | #15

    Hi Satya,

    Just so you know, the Client-side/Server-side handling is exactly the same though a PHP redirect (aka a 302 location header), and that used in JavaScript or the redirect meta tag.

    If you go to:

    http://www.craigfrancis.co.uk/features/tools/getFile/

    And just submit the form, as the server is in the UK, google will do one of these redirects to the .co.uk version of their site… this is done in the headers, as in the bit of text that appears before the body (html).

    However I will agree with your recommendation… by doing the redirect in the header, it usually results in a smaller response to the client (browser), and it is more likely to work… as in, some users disable JavaScript in their browser, or it may be a client which doesn’t understand JavaScript (i.e. imagine a robot like GoogleBot, while it can handle some JS, its not going to execute everything).

    Also, I find it’s helpful to use the “redirect” function shown on the following page, as it saves you having to remember to exit/die the script:

    http://www.craigfrancis.co.uk/features/code/phpRedirect/

  16. October 20th, 2009 at 13:58 | #16

    Hi Satya,

    Just so you know, the Client-side/Server-side handling is exactly the same though a PHP redirect (aka a 302 location header), and that used in JavaScript or the redirect meta tag.

    If you go to:

    http://www.craigfrancis.co.uk/features/tools/getFile/

    And just submit the form, as the server is in the UK, google will do one of these redirects to the .co.uk version of their site… this is done in the headers, as in the bit of text that appears before the body (html).

    However I will agree with your recommendation… by doing the redirect in the header, it usually results in a smaller response to the client (browser), and it is more likely to work… as in, some users disable JavaScript in their browser, or it may be a client which doesn’t understand JavaScript (i.e. imagine a robot like GoogleBot, while it can handle some JS, its not going to execute everything).

    Also, I find it’s helpful to use the “redirect” function shown on the following page, as it saves you having to remember to exit/die the script:

    http://www.craigfrancis.co.uk/features/code/phpRedirect/

  17. October 20th, 2009 at 09:49 | #17

    Server Side redirect also allow you to specify if the redirection is:
    – permanent for anybody: all future call to this URL will also be redirected to this same address
    – or temporary : in a different context you might be redirected to another address (ex: login)

    The advantage of server side permanent URL is that search engines will remember the new address, and then your moved pages should partly inherit the positioning of their older version.

    in PHP it can be done this way :

  18. October 20th, 2009 at 15:19 | #18

    Server Side redirect also allow you to specify if the redirection is:
    – permanent for anybody: all future call to this URL will also be redirected to this same address
    – or temporary : in a different context you might be redirected to another address (ex: login)

    The advantage of server side permanent URL is that search engines will remember the new address, and then your moved pages should partly inherit the positioning of their older version.

    in PHP it can be done this way :

  19. October 20th, 2009 at 09:52 | #19

    Sorry, the PHP code was dropped, simply add :

    header( “HTTP/1.1 301 Moved Permanently” );

    before

    header(“Location: $loc”);

    to make the redirect permanent

  20. October 20th, 2009 at 15:22 | #20

    Sorry, the PHP code was dropped, simply add :

    header( “HTTP/1.1 301 Moved Permanently” );

    before

    header(“Location: $loc”);

    to make the redirect permanent

  21. October 20th, 2009 at 15:09 | #21

    @Donny
    I got lots of response for this miscommunication. Thanks you all!
    I will update it soon and will mention that credits goes to all of you.

  22. October 20th, 2009 at 20:39 | #22

    @Donny
    I got lots of response for this miscommunication. Thanks you all!
    I will update it soon and will mention that credits goes to all of you.

  23. October 30th, 2009 at 11:19 | #23

    A very important difference is when redirecting from https to http:
    header() will give a warning in a popup window in the browser
    location.replace(…) will do the redirect without a warning

  24. October 30th, 2009 at 16:49 | #24

    A very important difference is when redirecting from https to http:
    header() will give a warning in a popup window in the browser
    location.replace(…) will do the redirect without a warning

  25. November 16th, 2009 at 05:54 | #25

    Its really a good post. Thanks for posting.

  26. November 16th, 2009 at 11:24 | #26

    Its really a good post. Thanks for posting.

  27. December 8th, 2009 at 19:29 | #27

    The best idea for redirecting a user when a file has been moved, server side, is probably using htaccess file. You can use the PHP redirect when you want to check something first for example if you want to redirect a user to his account page after logging in.

  28. March 31st, 2010 at 20:09 | #28

    An alternative to the double header(“Location:”) and header(“http/1.1″) is to do
    header(“Location:/”, true, 301);
    Which translates to replace similar location headers with http-response 301 request client to be sent to web’s root.

    Again remember headers can be manipulated, blocked, and disabled by the client.

  29. April 1st, 2010 at 01:39 | #29

    An alternative to the double header(“Location:”) and header(“http/1.1″) is to do
    header(“Location:/”, true, 301);
    Which translates to replace similar location headers with http-response 301 request client to be sent to web’s root.

    Again remember headers can be manipulated, blocked, and disabled by the client.

  30. March 31st, 2010 at 20:27 | #30

    Since my previous post got cut off.
    headers are not server side as the order of information goes.
    Client Request->Server Serves (header)->Client receives (process header)->Client Request (Oh the page was moved to here?)->Server Serves.
    Since the header function does not call for the information from the server.
    For example header(“refresh: 1; url=/index.php”);
    Is the same as the meta tag refresh example.
    The difference is that the status and location headers are received by the client prior to meta tags (html)
    A better example of server side redirect would be the include or require functions. In which the server requests the page to send to the client. And can not be blocked by the client like headers/scripts can be.

  31. April 1st, 2010 at 01:57 | #31

    Since my previous post got cut off.
    headers are not server side as the order of information goes.
    Client Request->Server Serves (header)->Client receives (process header)->Client Request (Oh the page was moved to here?)->Server Serves.
    Since the header function does not call for the information from the server.
    For example header(“refresh: 1; url=/index.php”);
    Is the same as the meta tag refresh example.
    The difference is that the status and location headers are received by the client prior to meta tags (html)
    A better example of server side redirect would be the include or require functions. In which the server requests the page to send to the client. And can not be blocked by the client like headers/scripts can be.

Comments are open for an year period. Please, write here on Facebook page.