What is This Thing Called SSI?

One of the most powerful and most neglected technologies available on the internet is called SSI, which stands for Server Side Includes. This neatly solves the problem of adding dynamic information to more or less static web pages.

How does this work? Well, when you surf to a web site, your browser (typically Internet Explorer or Netscape) is actually communicating with one or more computer systems called servers. The browser is called the client and the server is called, well, the server. On most web sites, the servers job is simple: when the browser asks for a web page, simply send it without any special considerations.

SSI is a method to ask the server to perform some work before handing off a page to the browser. A simple example is an SSI request to insert the date and time. This causes the server to replace the SSI command with the current date and time. This is all done by the server before anything is handed back to the browser - the only thing Internet Explorer or Netscape sees is standard HTML code. 

Enabling SSI

So how do you use SSI? Well, the first thing you have to do is find a web host that supports it. Very few, if any, free hosts will allow you to use SSI, so you will almost certainly have to pay a monthly fee of some kind. Don't panic, as good web hosts are available at very reasonable rates (less than $10 a month).

Okay, so once you find a web host which supports SSI, how do you use it? The first time I tried using SSI I missed one small piece of information and practically drove myself crazy - SSI files are slightly different from your standard HTML files.

How so? To use SSI you must give the file a type of SHTML (something like ssitest.shtml would do fine). Well, actually, if you also have access to your .htaccess file, you can change HTML and HTM files to do the same thing, but that's a bit advanced for this article.

Once these two things are true (your host supports SSI and your file type is SHTML), then your SSI commands will work. Now what do you do?

SSI Directives

An SSI directive (something which tells the SSI system what to do) is actually contained within a comment. Why? This way if you load the page onto a host which does not understand SSI, then the comment will simply be ignored - your pages will still work (except for the SSI commands, of course).

A command takes the form:

<!--comment -->

An SSI command is a special form of the comment, as shown below.

<!--#directive -->

The pound sign tells the SSI enabled server that the "directive" following is an SSI command. Note that the space after "directive" but before the "-->" is required on some servers. It is a good idea to always include it.

Some Examples

Okay, so now what? You start inserting SSI directives in your SHTML pages. You want to see what they look like? Here's some examples.

The "echo" directive tells the SSI enabled server to display (or echo) the following thing. In these cases, they are the date and time, your IP address and the document name. 

If you happen to look at the source for this table, you will see that the SSI directives have disappeared! They have been replaced, on the server, with the result of the directives. That's what makes SSI so powerful - all of the work is done on the server.

Additional Reading

• SSI - Echo Directive
• SSI - Include Directive
• SSI - Exec Directive
• SSI - Tricks