Server-Side Rendering

When we talk about the server-side rendering of websites, we generally refer to an application or website that uses a programming language that runs on a server. On this server, web pages are created (rendered) and the output of that rendering (the HTML) is sent to the browser, where it can be displayed directly. Examples of this include PHP, Java, Python, .NET, and Ruby.

Strengths

The benefits of server-side rendering is that the generation happens on a server, making it ready to consume in the browser once it's downloaded. It works great with indexing by search engines and with sharing on social media. The content is ready to be consumed, and the client (in this case, the search engine) does not need to run any code to analyze the page.

Weaknesses

The downside of server-side rendering is that the pages often have only basic possibilities of interaction with the user, and when the content changes, or the user navigates to another page, they have to re-download the whole page. This results in more bandwidth and gives the user the feeling that the page is loading slower than it actually is.

Client-Side Rendering

When we talk about client-side rendering, we generally refer to an application or website that uses JavaScript running in the browser to display (render) the pages. There is often a single page that is downloaded, with a JavaScript file that builds up the actual page (hence the term single-page application).

Strengths

The benefit of client-side rendering is that the pages are highly interactive. Parts of the page can be reloaded or updated without having to refresh the whole browser. This uses less bandwidth and it generally gives the user the feeling that the website or application is very fast. The server can be mostly stateless as the page is not rendered there; it just serves the HTML, JavaScript, and stylesheets one time and is done. This takes load off the server, and this results in better scalability.

Weaknesses

Client-side rendered websites are difficult for a search engine to index, as they need to execute the JavaScript to display how the page looks. This is also the case when sharing links to the sites on social media, since these are generally static instead of dynamic.

Another weakness is that the initial download is bigger, and this can be an issue on, for instance, mobile devices with slow connections. Users will see a blank page until the whole application is downloaded, and maybe they will just use a small part of it.

In this chapter, we will create an Angular application that is used throughout this book.

The Angular application we will build is going to be a list of posts that you regularly see on a social networking site such as Twitter. From the list of posts, we can click a link that brings us to the post detail page. We will intentionally keep the application simple as this book is meant to focus on the technology rather than the functionality of the app. Although the app is simple, we will develop it using best practices for Angular development. It should be easy for any Angular developer to extend on the logic and structure that is shown in this application.

Angular CLI is the officially supported tool for creating and developing Angular applications. It's an open source project that is maintained by the Angular team and is the recommended way to develop Angular applications.

Angular CLI offers the following functionalities:

• Create a new application
• Run the application in development mode
• Generate code using the best practices from the Angular team
• Run unit tests and end-to-end tests.
• Create a production-ready build
• Easily install and add third-party software (using ng add, since version 6)

One of the main benefits of using Angular CLI is that you don't need to configure any build tools. It's all abstracted away and available through one handy command: ng.

Throughout this book, we will be using the ng command for creating the app, generating the code, running the application in development mode, and creating builds.

Note

For more information about Angular CLI, refer to the project page on GitHub at https://github.com/angular/angular-cli.

Exercise 1: Installing Angular CLI

In this exercise, we will use npm to globally install Angular CLI. This will give us access to the ng command, which we will use throughout this book:

1. Open your terminal.
2. Run the following command:

   npm install -g @angular/cli@latest

3. Once this command has finished running without any errors, we can make sure that the ng command works as expected by running the following command:

   ng --version

   Verify that the output is similar to the output shown here:

Figure 1.1: Installing Angular CLI

We now have Angular CLI installed and we are ready to get started!

Now that we have installed and configured Angular CLI, we will start by generating a new application.

Running the ng new command will do the following:

1. Create a folder called angular-social.
2. Create a new application inside this folder.
3. Add a routing module (because of the --routing flag).
4. Run npm install inside this folder to install the dependencies.
5. Run git init to initialize a new Git repository.

The following is the folder structure of an Angular CLI app:

• src: This folder contains the source files for the application.
• src/app/: This folder contains the application files.
• src/assets/: This folder contains the static assets we can use in the application (such as images).
• src/environments/: This folder contains the definition of the default environments of the application.
• e2e: This folder contains the end-to-end tests for the application.

Exercise 2: Creating a New Application

In this exercise, we will create a new application. Follow these steps to complete this exercise:

1. Open the terminal and navigate to the workspace directory where you want to work on the application:

   cd dev

2. Inside the workspace directory, invoke the ng command, as follows:

   ng new angular-social

3. Answer Y to the question about generating a routing module.
4. For the stylesheet format, we will select CSS.

   The application will be generated using these options in the angular-social directory, as shown in the following screenshot:

Figure 1.2: Creating a new application

Exercise 3: Starting the Development Server

In this exercise, we will start the development server. Follow these steps to complete this exercise:

1. Open the terminal and enter the working directory:

   cd angular-social

2. Use ng serve to start the development server:

   cd angular-social
   ng serve

Figure 1.3: Serving the application

Exercise 4: Browsing to the Application

In this exercise, we will navigate to the default page of our application. Follow these steps to complete this exercise:

1. Open your browser and navigate to http://localhost:4200/.
2. You should be greeted with a default page that says Welcome to angular-social!:

Figure 1.4: Browsing to the application