top of page

What is server-side rendering?

Updated: Jul 23, 2020


Whenever a web page is requested, the fully generated page should be returned to the user with fast response time. In response to a user’s HTTP call, an HTML page is received as the result of the browser. But this became futile with the boom of the web applications generated by JavaScript.

Let's say we have a typical PHP website where we try to retrieve data from the database. With the old server-side rendering solutions, the server compiles everything and delivers a fully rendered HTML page to the viewer which is fast. But each time the viewer navigates to another route, the server has to do the work all over again which increases the page load time and some web crawlers are unable to index the site.user

Let us explore in this article about how SSR comes in to deliver faster responsive JavaScript sites.

What is server-side rendering?

Server-Side Rendering (SSR) - SSR is the ability of a JavaScript application to render on the server-side rather than in the browser. SSR is a process of taking a client-side JavaScript framework website and rendering to static HTML and CSS on the server. SSR helps in the faster website rendering(Fast First Render).

The browser first receives HTML documents like images, CSS, and JavaScript and collects them. Then parses and downloads these documents. So with just HTML and CSS files the browser can render the page and does it very fast and while the JavaScript files are getting downloaded in the background.

The Server-side sends a fully rendered HTML page to the client and while the client’s JavaScript bundle takes over and allows the SPA framework to operate and have quick development time for subsequent navigation.

Advantages of SSR

  • Performance

adding a webpage’s content into Google. It allows your site to have a faster first page load time, which is the key to good user experience means there is no need for the initial load.

  • SEO

Search engines cannot efficiently and correctly add a webpage content into it (Indexing) that can exclusively render the client-side, despite the latest improvement to indexing the search engines. Google favors sites with fast load times. Google crawls web apps built with JavaScript, so it is better to have server-side rendered content ready for Google and other search engines to crawl your site. So with SSR, you get the benefits of traditional websites SEO since the entire page can now be crawled by bots.

  • Social Media Optimization -

People can easily share a page of your site on social media and they can gather the metadata (images, title, descriptions) easily required to share the links faster.

  • Use Experience -

The Fast First Render allows a server to store information on the current site of the user and send different responses based on that information which helps when the user has a slow internet connection or outdated devices.

What is Next.js?

Next.js is a minimalistic framework for rendering server-side React applications. It is a technology to render a framework on the server-side and is a tool for creating web applications. Next.js could be configured to generate static assets for a site using automatic static optimization and static HTML export. Next.js benefits greatly from the JavaScript module.

Main Features -

  • Server Rendering - Next.js is a great React framework that can be used for server-rendered sites and statically pre-built sites or both. Before sending the HTML to the client we can Render components on the server-side

  • Hot Reloading functionality- as it uses a web pack based Dev environment, so the server will auto-reload after you save the code which speeds up development. So it reloads the page on detecting the saved changes.

  • Automatic Code Splitting and lazy loading which gives great performance boost since it prevents loading of unnecessary codes, as application optimization becomes easy.

  • Automatic Routing - Simple file-based (page) routing, so for simpler pages there is no need to map your routes and for more complex situations you do have the ability to map your routes.

  • Built-in CSS support - bundled with styled JSX which gives full scoped and friendly CSS-in-JS support.

  • Deployment is extremely simple with Next.js, we can run the build command to build out your files or static assets and host applications anywhere.

Contact Us to Know More

bottom of page