Creating a Web Application using Python Flask with Server Side Rendering

Source: https://dzone.com/articles/client-side-vs-server-side-rendering-what-to-choos

I have been developing web applications for a long time and have tried many different frameworks. Whether it’s MeteorJs, React, Angular, Blaze, or a combination of front-end frameworks with a Java back-end.

In this post, we’ll discuss the advantages of using Flask with Server Side Rendering (SSR). We will also go over creating a simple Flask application with SSR.

The latest application I created with Flask is restedbox.com, which allows you to access your data sources (local spreadsheets, Google Sheets, and more) from a simple API endpoint. It’s free to use, so check it out!

Anyways, I decided I’m going to try out Flask with server side rendering for the application I’m currently working on. I hadn’t used it before but the framework was very straightforward to get started with.

First, let’s talk a little bit about Flask with SSR. Flask is a Python framework which follows a micro-framework pattern. It’s quite lightweight, using Python in combination with Jinja2 for templating.

Advantages of Flask and Server Side Rendering:

• Performance: When your browser sends a request to your server, your server responds with an HTML page that is ready to be rendered, without the browser having to link multiple JavaScript files together. The browser can start displaying your page before the JavaScript is even downloaded and executed, giving the sense to your users that your application is very fast.
• Simplicity: If you know Python, it will be very easy to get started with Flask. The learning curve is not that big, so, in theory, you can start developing applications much faster. There are a few web specific aspects that come with it but if you’re familiar with decorators in Python, you should be fine.
• Flexibility: Flask comes with the bare minimum required for the application. This is good because it allows developers to add any packages or other functionality themselves without being held down by the one’s that comes with a framework. Some people may see this as more cumbersome because now they have to figure out what they need but in reality, this gives you a lot of flexibility while keeping your applications complexity to a minimum.

Of course there will always be disadvantages with any framework. One of the advantages I listed above was performance. The pages in Flask with SSR do load faster for the user but it’s not always a page that is totally usable until the JavaScript is done downloading and executing. This may seem like a bad thing but it actually provides a pretty big performance upgrade despite the user having to wait. The initial page rendering is done quicker, so the overall time does come down.

Walmart has actually been using Server Side Rendering as well. They did an experiment with their pages to see what would be better, Client Side Rendering or Server Side Rendering. Hint: SSR did better. You can read the article by Walmart Labs.

Creating the web application

1. Install Python
   Before we do anything, we have to make sure our computer has Python installed. You can open terminal and type python3or python to check if you have it. If the command is not recognized, you must download and install Python.
2. Create a project directory
   In the terminal, run the following:
   $ mkdir firstapp and then $ cd firstapp
3. Set up the virtual environment
   In the directory, run the following command
   $ python3 -m venv firstapp-env
   This will create a directory called firstapp-env.
4. Activate the virtual environment
   On MacOS or Unix, run $ source firstapp-env/bin/activate
   On Windows, run firstapp-env\Scripts\activate.bat
   Now that the virtual environment is activated, any packages you install will reside within the virtual environment. This allows you to have different versions of packages for different applications without a conflict.
5. Install Flask
   $ pip install flask
6. Create a directory called app within the main project
   This will hold the application.
7. Create the application object
   In the file app/__init__.py, type the following:

The app_routes module does not yet exist. We will create this in the next step.

8. Create the routes in app/app_routes.py

We use the @app.routes decorator in order to associate the function with a URL. Whenever the browser makes a request to /, it will trigger the home() function.

9. Create a file called run.py in the main project directory

In this file, we are importing the application instance that we created within app/__init__.py. This is the file that will execute our application.

10. Running the application

$ export FLASK_APP=run.py followed by $ flask run

Your app should now be running on the local server. The terminal will have the URL. When you go to the URL, you will see Hello, World!.

Amazing! You have the application working and an endpoint displaying some information already.

11. Creating a template
Let’s create our first HTML file. app/templates/main.html

We just created a simple template. Flask uses Jinja2 for templating, so, we can use SSR to send data to the template.

12. Edit the / endpoint
We will edit the home() function, which is accessed by going to the / endpoint.

Here, we are now using the render_template functionality in Flask to do server side rendering. We are referencing the file main.html that we created earlier and sending two things to it, the title and content. In the template, we reference these two using {{title}} and {{content}}. You can name these anything you like, as long as you use them as I just described.

Your app should automatically refresh. Check the title in the browser, it should read Flask App — Home. The app itself will still read Hello, World! but you didn’t hard code that into the template but rather used SSR.

You now have a web application using Flask and Server Side Rendering. I will definitely do some more tutorials on setting up forms, data validation, databases, and more!

Let me know what you guys think and if there is any topic that you’d like me to cover.