Client-side scripting vs server-side scripting

Client-side vs server-side scripting

Scripting is an integral part of web development. Using powerful scripting languages like JavaScript and PHP, developers can create the dynamic web content we enjoy every day. But what are the key differences between client-side scripting and server side scripting, and how do they actually work?

In the context of websites and applications, the client refers to a web browser (like Chrome or Firefox) running on the user’s local machine. The server is, well, the server, obviously. Or to be more accurate, it’s the web server software (e.g. Apache or NGINX) that runs on server hardware.

‘Dynamic’ web content is anything that isn’t just a static page, i.e. any content that displays in different ways for different users at different times. From simple clocks and drop-down menus to complex interactive forms – it can all be considered dynamic.

While static content can be generated by a single HTML document, created once and never updated, dynamic sites rely on scripting to serve up a new experience every time.

Scripting languages like JavaScript and PHP allow complex tasks to be automated and executed on the fly, resulting in the advanced functionality we now take for granted on popular websites.

The question is, where does the scripting happen? While the client and the server are both capable of running different types of scripting to generate dynamic content, the implementation is very different on each side.

Client-side scripting: browser power

Running in the user’s browser, client-side scripting generates dynamic content by processing the code received from the server. Usually this consists of JavaScript, combined with HTML and CSS.

There are a wide range of client-side frameworks available, including React.js (from Facebook) and Angular (from Google). Some frameworks combine client-side and server-side scripting, like Vue.js and Laravel. These work well together and can make the creation of a complete application far less painful, with lots of helpful tutorials available.

Once a page is loaded, client-side scripting doesn’t require any additional help from the server – all the work is done by your browser on its own. Client-side scripting can respond to user input to display different content based on specific actions, but all the actual data has to be provided by the server beforehand.

Sites that use a lot of client-side scripting can perform well and take some of the load off the server, but it can also be difficult to implement advanced functionality using client-side techniques alone.

Server-side scripting: out of sight

The most popular server-side scripting languages and frameworks include PHP, ASP.NET, Node.js, Java, Ruby, Perl and Python. These scripts run on a web server and respond to client requests via HTTP to deliver dynamic and customised content to the user.

Server-side scripting is required to access or store persistent data like user profile information. Whether that involves pulling data from a file server, database or mail server, it can all be done with a server-side scripting language like PHP.

Once of the key differences between the client and server sides is that server-side code is always responsible for providing and storing any resources needed by the client. This can either be done as the page loads, or interactively as the user makes requests and changes (using techniques such as AJAX – more on that below).

The source code from server-side scripting is usually completely hidden from the end user. For example, PHP is executed exclusively on the server to generate HTML that is in turn rendered by the client – your browser never actually sees any PHP code. Even if you click ‘View page source’, you’ll only see the HTML, not the PHP scripting that generated it.

It’s critical that the back-end server authenticates any client-side request prior to accessing or updating any resources. The fact that JavaScript runs in the browser means the user can alter the code, sometimes with malicious intent. Therefore, never trust client-side data unless it can be properly authenticated. There are many techniques for supporting authentication, with JSON Web Tokens being one of the most popular solutions.

One of the downsides of server-side scripting is that, simply put, it means more work for the server. Lots of scripts running on the server can result in slower performance, especially when client requests to the server occur frequently.

AJAX: bridging the client-server gap?

AJAX (Asynchronous JavaScript and XML) is a technology that uses client-side JavaScript to handle user input, while transferring data to and from the server in the background (asynchronously).

This enables individual parts of a webpage to be updated almost instantly, without having to load a whole new page. You can see AJAX in action on interactive sites and applications like Google Docs that allow users to dynamically edit and save content.

Front-end vs back-end

The terms ‘front-end’ and ‘back-end’ are often used interchangeably with client-side and server-side, respectively. But this isn’t totally accurate. Front-end development involves all the things the user sees and interacts with, making web design and user experience key concerns. Back-end development covers basically everything else, including the server and databases.

In practice though, front-end development is usually focused on client-side techniques that make use of HTML, CSS and JavaScript, while server-side scripting remains more relevant to back-end developers.

Two sides to every story

For a well-optimised, quick-loading website, a balance between client-side and server-side scripting is generally recommended. Really, both sides are needed to create properly dynamic content, since there are certain things the client can do that the server can’t, and vice versa. The actual implementation, including the scripting languages used, will always depend on the needs of your application.

Looking for the ideal environment for your scripting language of choice? On our CloudNX platform, you can easily launch a Managed Stack with PHP, Perl, Node.js or Python. We take care of the server admin and software updates, giving you more time to focus on your code. Alternatively, spin up a virtual machine with your OS of choice and full root access.

Be Sociable, Share!