Servers are where contents of a website is hosted. The client is the laptop or phone you're using to visit the website. Whenever you visit a website, the server 'serves' up the website to you the 'client'. It's nothing but a bunch of computers that are always on for the website runs 24/7.

So what's server-side and client-side rendering? It's the method by which your website is 'rendered' or displayed on your device.

Server-side rendering is the old way of serving websites. Content is first generated on the server before being served up to the user. Client-side rendering became popular with Javascript frameworks and libraries like Angular, React, and Vue.js. The JS file is first sent to the client before the browser renders the content. Today, server-side rendering is still relevant with languages like React.

@unsplash. Server - that's where the word came from.

Server-side rendering has slightly faster load time on the first page because the HTML is precompiled at the server. Client-side rendering compiles at the user's browser. But client-side rendering is much faster after the first page because all it has to do is call data to 'fill in the blanks', or more accurately hydrate.

Server-side rendering is good if your website displays dynamic content. Every page is different and needs to be rendered differently. Client-side rendering is good if the main page looks the same while the rest of the data is called via API. All insta posts use the same photo frames no matter how many times you scroll down.

SEOs still work well with server-side rendering. But client-side rendering is catching up with frameworks like Gatsby.

Server-side rendering is not resource constrained. You can run complicated algorithms on the server without putting a strain on the mobile device. Progressive web apps that run on the client-side tend to be slower because the app runs in the browser itself. It's the difference between having your own car vs taking the bus.

The Dropbox file preview runs on server-side React to improve Time to Interactive. Before this, the browser had to download and execute PDF.js before viewing the file - which is essentially client side. Dropbox document preview.

Netflix runs the website server-side too. While users are browsing the landing page, Netflix prefetches other contents they might navigate to. Netflix Web Performance.

LinkedIn Lite runs as a server-side rendered PWA! I don't know what that means because PWAs are meant to be client-side because it's essentially an app thats powered by the browser engine instead of the device's OS. LinkedIn Lite architecture. LinkedIn Lite PWA.

Base concepts and vocab from Karan Shah while researching this topic.