The Mysteries of Server Side Rendering

Server Side Rendering. Is it friend or Foe?

Let's discuss this a little more and look at the basics

Everyone and their brother is building applications now using React, Vue, and other JavaScript frameworks. These are great in terms of performance, but have not had a great track record in terms of SEO. One of the key reasons is server side rendering vs client side rendering.

What Is Server Side Rendering?

Whenever you visit a website, your browser makes requests to the server that serves the contents of the website. Requests usually only takes a few milliseconds, but that ultimately depends on a multitude of factors (Internet speed, proximity of server, how many users are trying to access the site, and so on). Modern websites have hundreds of lines of code and are complex. Imagine browsing a website and waiting for each and every page to render when navigating the site. If you have ever visited a WordPress site, you have seen how slow they can be.

Server-side rendering is great for SEO. Your content is present before you get it, so search engines are able to index it and crawl it just fine. Something that is not so with client-side rendering. At least not without some effort.

What Is Client Side Rendering?

Rendering content in the browser using JavaScript. Instead of getting all the content from the HTML document, we get an HTML document with a JavaScript file that will render the rest of the site using the browser.

This is radically different from using server-side rendering because the server is now only responsible for loading the main boilerplate. Everything else is handled by a client-side JavaScript library. This is much faster since you are only loading a very small section of the page to fetch the new content, instead of loading the entire page.

The upside and the downside

Upside to SSR

• Search engines can crawl the site for better SEO.
• The initial page load is fast.
• Great solution for static sites.

Downside to SSR

• Frequent server requests.
• Full page reloads with each request.
• Overall slower page rendering.

Upside to CSR

• Rich site interactions
• Faster website rendering and overall performance
• Maintainability and portability.
• Security and scale.

Downside to CSR

• Low SEO if not implemented correctly.
• In most cases, requires an external library.

Moving forward I expect to see a lot of success leveraging Jamstack architecture. I believe using the Jamstack is the best way to build websites and apps today.

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity. Check it out here.