Learning NodeJS Part 2: Server Side and Dynamic Sites
Tags: node, beginners
Published: 2021-01-03 21:33:17

*In late fall of 2020, I went on a mission to better understand Node. I wanted to improve the way I use it, how I might be able to use more of its features, and moreover grow my front end knowledge to full stack. This series includes the notes I've compiled from my learnings over at [The Odin Project](https://www.theodinproject.com/courses/nodejs). The lessons also include general web concepts necessary to better work with Node.*

----

A continuation of fundamentals, I'll now be diving into what Node does for websites and why we would want websites like these in the first place.

## **Introduction to the server side**
### What is the difference between client-side code and sever-side code?
Code running in the browser is known as client-side code and is primarily concerned with improving the appearance and behavior of a rendered web page. Server-side web programming involves choosing which content is returned to the browser in response to requests. The server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required. **Node is a server-side web language.**

> 💡 Servers can store and use information about clients to provide a convenient and tailored user experience.

### Describe the purpose of a server.
A server is a computer that is connected **directly** to the internet. The computers we use regularly are called clients because they are connected **indirectly** to the internet via an ISP. Servers allow you to access information from databases or file storage.

### What is HTTP for?
Web browsers communicate with web servers using the **HyperText Transfer Protocol**. When you click a link on a web page, submit a form, or run a search, an HTTP request is sent from your browser to the target server.

### What does a HTTP request contain?
An HTTP request includes: 
1. a URL identifying the affected resource
2. Method that defines the required action (to get, delete, or post the resource)
3. May include additional information encoded in URL parameters (the field-value pairs sent via a query string), as POST data (data sent by the HTTP POST method), or in associated cookies.

> 💡 These GET/POST/HEAD methods cost differently, some are more 'expensive' operations than others

### What is an HTTP response?
Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains a status line indicating whether or not the request succeeded (e.g. `HTTP/1.1 200 OK` for success).

The body of a successful response to a request would contain the requested resource. This could be a new HTML page, an image, etc, which could then be displayed by the web browser.

### What is a web framework?
Frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different types of tasks faced in a particular development stream. Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand. In fact writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.

In contrast, you would *almost never* consider writing the server-side component of a web app without a framework. Implementing a vital feature like an HTTP server is really hard to do from scratch in say, Python, but Python web frameworks like Django provide one out-of-the-box, along with other very useful tools.

> Checkout the section titled [A few good web frameworks?](https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks) to learn more about the advantages of using some of the more popular frameworks out there.

### What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. It is not a programming language. **It's a technique for accessing web servers from a web page.** It was ideated based on the principle of returning data to a web browser so that it can dynamically update its own content.

## **Dynamic and Static Sites**
### What do we mean when we categorize sites as dynamic or static?
- **Static** sites return the same hard-coded content from the server whenever a particular resource is requested.


<figure>
![Static](https://dev-to-uploads.s3.amazonaws.com/i/nkv3hfwyfcrvuuudd50m.png)
<figcaption>
Pressing a button, clicking on a link will result in same style files being requested and expected behavior regardless of who is accessing this site.
</figcaption>
</figure>


- **Dynamic** sites are ones in which some of the responding content is generated only when needed. Dynamic sites can highlight content that is more relevant based on user preferences and habits. It can also make sites easier to use by storing personal preferences and information, like reusing stored credit card details to streamline subsequent payments.


<figure> 
![Dynamic](https://dev-to-uploads.s3.amazonaws.com/i/5jfu1jwavxn8vq7gx3bo.png)
<figcaption>
Based on a variety of conditions (being a new user, not logged in, long-time existing user) how you view this site could be drastically different. Different navigation may be available, and clicking on a button like "Show More Recommendations" will load different options for two users.
</figcaption>
</figure>

### Why might you need a back-end for a project?
Perhaps the most significant benefit of server-side code is that it allows you to tailor website content for individual users.

### When would you *not* need a back-end for a project?
If you want to build a small, static page, one that requires no information be stored from any interactions and receives the same hard coded content.

### Explain some things that Node is commonly used for.
- Generating dynamic page content
- Creating, opening, reading, writing, deleting and closing files on the server
- Collecting form data
- Adding, deleting, and modifying data in your database

----

Onto the next section, where we'll now get to see Node in action.