DEV Community: Aryan Chopra

Choosing between Client Side Rendering and Server Side Rendering for your next project

Aryan Chopra — Fri, 13 Aug 2021 18:03:24 +0000

If you're wondering what the heck is server side rendering and client side rendering? Let me give you a quick introduction.

Let's say you go to the supermarket to get food, you have two choices, to either stock up for the whole month or just get what you want for now. If you choose to stock up, you don't have to go back to the market, you can just open your fridge and get what you want.

Client Side Rendering is analogous to this. Your browser initially sends a request to the server and the server responds with a file similar to the one below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
    />

    <title>Rendering on the browser</title>
  </head>
  <body>
    <--The "root" div will get content from the JS later -->
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

The browser, after loading the HTML and CSS then request the index.js file which contains your entire bundled application. Note that before the JS loads, the user cannot interact with the site.

Notice how the server initially sends an empty html file with only a div whose id is root? This can be a huge turnoff if you want your site indexed for Search Engine Optimization by search engines, because the web crawlers don't parse the index.js while indexing and only see a blank page with a single empty div.
Even though Google claims it can index React websites, it would only be able to index the initial render and not the components that are being lazy-loaded.

Another disadvantage to Client Side Rendering would be longer loading times, the user cannot interact with the website until the intitial JavaScript has been loaded by the browser (even though CSR makes up for it by being super fast once everything is loaded)
With slow connections, it can take more than 5 seconds just to load 500KB of JavaScript.

Now, Server Side Rendering comes into picture, let's say you went to the supermarket and bought only what you needed, and when you needed more stuff, you went out to get it again, SSR works in a similar way.

Unlike a client-side rendered site where the entire JS file needs to be downloaded and parsed before user can start interacting with it, in SSR the browser receives the initial HTML file with server rendered content for the user to see, once the JavaScript is loaded, only the event handlers need to be attached to the DOM elements.
One disadvantage of using Server Side Rendering each new page needs to be rendered by the server and fetched which increases the load on the server.

Let's weigh the pros and cons for both CSR and SSR:

Client Side Rendering
Pros
• If your initial js bundle is small your website load speed and overall user experience would be good.
• Possibility of lazy loading the components you want.

Cons
• SEO Disadvantages.
• Initial booting time can be high if your app is large.

Server Side Rendering
Pros
• Because everything is happening within the server, data fetching is insanely fast with almost 0 latency.
• Loading speed is not affected much by the user's connection speed since the server does all the heavy lifting.
• SEO benefits.

Cons
• Each page needs to be rendered by the server individually on request by the browser.
• You're essentially loading the whole website on the server before sending it to the user.

But, is there a way to use both Client Side Rendering and Server Side Rendering at the same time?
Yes, you don't need to sacrifice all of the features of CSR or SSR to fully use the other method. You can simply use a Universal Web App.
Universal Web Apps combine both CSR and SSR by doing the initial render on the server, and once the page loads, client side rendering will take place. Because of this we have good Search Engine optimization, fast initial renders and speed when browsing the site.
These are the flagship features of frameworks like NextJS and NuxtJS. If you're curious, digging deeper into them would be quite fun and helpful!

Conclusion
I hope you found something useful out of this read, and if you did, please drop a like or let me know what your thoughts are in the comments, I really appreciate feedback, have a good day! :)

Polyfills for common Array methods in JavaScript

Aryan Chopra — Thu, 15 Jul 2021 19:50:24 +0000

Technical jargon alert:
Polyfills : A polyfill is nothing but a piece of code that implements a feature on web browsers that do not support the feature.

Even though Array methods like forEach, map, filter, find, reduce exist natively in JavaScript, it is very common for interviewers to ask you to code your own implementation of these.

I'm only gonna be covering most important ones so feel free to code your implementations of other methods as well.

1) forEach
The forEach method executes a given function for each element of an array

let arr = [1,2,3,4]
arr.forEach((item,idx,arr)=>console.log(item*2,idx))
//The console prints:
2 0 
4 1
6 2
8 3

Now let's implement our own version of the forEach method.

let myforEach = function (callback){
    //this refers to the entity that the function is a method of.
    for(let i=0;i<this.length;i++){
        callback(this[i],i,this);
    }
}

Array.prototype.myforEach=myforEach
arr.myforEach((item,idx,arr)=>console.log(item,idx,arr))
 1 0 [1, 2, 3, 4]
 2 1 [1, 2, 3, 4]
 3 2 [1, 2, 3, 4]
 4 3 [1, 2, 3, 4]

2) Map
The map() method returns a new array containing with the results of calling a given function on each element in the array it is called with

let arr = [1,2,3,4]
arr.map((item)=> item*2)
//output
[2,4,6,8]

Let's code our own version of map!

let myMap = function(callback){
    let result = []
    for(let i = 0;i < this.length ; i++){
        result.push(callback(this[i],i,this))
    }
    return result;
}

Array.prototype.myMap = myMap
arr.myMap((item)=>item*2) //you can include or exclude the other 2 arguments to the callback function
//output
[2,4,6,8]

3) Filter
The filter() method returns a new array with all elements that return true for the test implemented by the provided function.

let arr = [1,2,3,4]
arr.filter((item)=>item%2==1)
//output
[1,3]

Let's now code our own implementation of filter

let myFilter = function(callback){
    let result = [];
    for(let i=0;i<this.length;i++){
        if(callback(this[i],i,this)){
            result.push(this[i])
        }
    }
    return result;
}

Array.prototype.myFilter = myFilter
arr.filter((item,idx,arr)=>item%2==1) 
//output
[1,3]

4) Find
The find method executes the callback function once for each element of the array until the callback returns a truthy value. If so, find immediately returns the value of that element. Otherwise, it returns undefined.

let arr = [1,2,3,4]
arr.filter((item)=>item%2==1)
//output
[1,3]

Let's now code our own implementation of filter

let myFilter = function(callback){
    let result = [];
    for(let i=0;i<this.length;i++){
        if(callback(this[i],i,this)){
            result.push(this[i])
        }
    }
    return result;
}

Array.prototype.myFilter = myFilter
arr.filter((item,idx,arr)=>item%2==1) 
//output
[1,3]

5) Reduce
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

The reducer function takes four arguments:

Accumulator
Current Value
Current Index
Source Array

Your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value. If no initial value is provided the first element will be used as the accumulator.

let arr = [1,2,3,4]
arr.reduce((acc,cur)=>{
    console.log("acc: " ,acc,"curr: ",cur)
    return acc+cur
})
//output
acc: 1 cur: 2
acc: 3 cur: 3
acc: 6 cur: 4
10

Let's now code our own implementation of filter

function myReduce(callback, initialValue) {
  let acc,curr;

  if (!this.length && !initialValue) 
    throw new Error("Can't reduce on empty array without an intial value");
  else {
    //  If initialValue is given then it is treated as the accumulator else the 0th index is the accumulator
    acc = initialValue ? initialValue : this[0];
    for (let i = 1; i < this.length; i++) {
      curr = this[i];
      acc = callback(acc, curr, i, this);
    }
  }
  return acc;
}

Array.prototype.myReduce = myReduce
arr.myReduce((acc,cur)=>acc+cur)
//output
10

All the code shown above has been executed in the console, let me know incase of any error or if you want to see similar content, go ace that interview!

Closures in JavaScript

Aryan Chopra — Mon, 31 May 2021 10:57:17 +0000

Closures are equivalent to what grammar is to English. If you don't understand closures, it's like speaking English without understanding grammar.
In JavaScript, closures are created every time a function is created. To understand them better, we first need to understand what is lexical scoping.

const outer = function(number1) {
  const inner = function(number2, number3) {
    let sum = number1+number2+number3;
    console.log(number1" + "number2" + "number3" = " + sum);
  }
  inner(3,5);
}

outer(4);
4 + 3 + 5 = 12

In the snippet above, the code inside the inner function can see the variable/binding number by the outer function. But, the bindings number2 and number3 are not visible in the outer function. Every local scope is also able to see all the local scopes outside it. The inner function is lexically bound by that of the outer function. This is lexical scoping.

Now that we have understood what lexical scopes are, we can move towards understanding what closures are.
Closures are nothing but functions bundled together with their lexical scope.
Let's understand this by an example.

function a(){
  let x = 50;
  function b(){
    console.log(x);
  }
  b();
}

What happens when we execute the function a()?
Yup, the variable x gets declared, and when we call the function b, it looks up to it's lexical environment, finds x, and logs it.

Now, consider the code below:

function a(){
  let x = 50;
  function b(){
    console.log(x);
  }
  return b;
}
let c = a();
console.log(c);

> function b(){
  console.log(x);
}

The function a returns another function b, which we are binding to c.
Now, what happens when we execute the code below?

function a(){
  let x = 50;
  function b(){
    console.log(x);
  }
  return b;
}
let c = a();
//.... More code

c();

Now, closures come into play. Remember, closures are nothing but functions bundled together with their lexical scope. Here, c is a closure which binds to the function b along with b's lexical scope, which contains the variable x. So it can access the variable x anywhere in the code.

This is the magic of JavaScript.

I hope you can figure out what the output will be when c is called.

DEV Community: Aryan Chopra

Choosing between Client Side Rendering and Server Side Rendering for your *next* project

Polyfills for common Array methods in JavaScript

Closures in JavaScript

Choosing between Client Side Rendering and Server Side Rendering for your next project