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.

 

 

Possibly Related posts:

  1. October 20th, 2009 at 00:16 | #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. a
    October 20th, 2009 at 00:35 | #2

    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

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

    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

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

    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.

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

    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.

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

    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

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

    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.

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

    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/

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

    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 :

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

    Sorry, the PHP code was dropped, simply add :

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

    before

    header(“Location: $loc”);

    to make the redirect permanent

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

    @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.

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

    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

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

    Its really a good post. Thanks for posting.

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

    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.

  1. October 18th, 2009 at 05:58 | #1
  2. October 19th, 2009 at 19:29 | #2
  3. October 21st, 2009 at 05:43 | #3

All comments will be moderated.