Server-Side Rendering (SSR) with JavaScript Frameworks

In today's fast-paced web development landscape, delivering highly performant and search engine-friendly websites is crucial. One effective approach to achieve this is through Server-Side Rendering (SSR). In this article, we will explore how to implement SSR using JavaScript frameworks, along with code examples, explanations, and outputs, to help you harness the full potential of SSR in your projects.

Understanding Server-Side Rendering

Server-Side Rendering involves generating HTML content on the server and sending it to the client, where it is displayed immediately. This approach stands in contrast to Client-Side Rendering (CSR), where the browser retrieves minimal HTML from the server and then renders the content using JavaScript on the client-side.

Benefits of Server-Side Rendering

• Improved Performance − SSR minimizes the time to first meaningful paint, as the server sends pre-rendered HTML to the client. This results in faster page load times and a better user experience.

• SEO Optimization − Search engines can easily crawl and index server-rendered pages, leading to better search engine rankings and improved discoverability.

• Social Media Sharing − Server-rendered pages provide rich content to social media platforms, ensuring that shared links display accurate previews and engage users effectively.

Implementing Server-Side Rendering with JavaScript Frameworks

Let's dive into practical implementations of SSR using popular JavaScript frameworks.

React.js with Next.js

Create a new React project using Create React App. Open your terminal and run the following command −

npx create-react-app my-ssr-app

This will create a new directory named my-ssr-app with a basic React project structure.

Change into the project directory −

cd my-ssr-app

Install Next.js as a dependency −

npm install next react react-dom

Example

Replace the content of the src/index.js file with the following code −

import React from 'react';

const Home = () => {
   return (
      <div>
         <h1>Welcome to SSR with React and Next.js!</h1>
      </div>
   );
};

export default Home;

Create a new directory named pages under the project's src directory −

mkdir src/pages

Move the src/index.js file into the src/pages directory −

mv src/index.js src/pages/index.js

Open the package.json file and replace the existing "scripts" section with the following code −

"scripts": {
   "dev": "next dev"
},

Save the changes, and in your terminal, run the following command to start the development server −

npm run dev

Open your browser and navigate to http://localhost:3000.

Output

Vue.js with Nuxt.js

Similar to React, Vue.js also offers a powerful SSR framework called Nuxt.js.

Create a new Nuxt.js project by opening your terminal and running the following command −

npx create-nuxt-app my-ssr-app

This will create a new directory named my-ssr-app with a basic Nuxt.js project structure.

Change into the project directory −

cd my-ssr-app

Example

Open the pages/index.vue file and replace the existing content with the following code −

<template>
   <div>
      <h1>Welcome to SSR with Vue and Nuxt.js!</h1>
   </div>
</template>

<script>
export default {
   name: 'Home',
};
</script>

Save the changes, and the development server will automatically reload with the updated content.

Start the development server by running the following command −

npm run dev

Refresh your browser at http://localhost:3000.

Output

Angular with Angular Universal

Angular, a comprehensive JavaScript framework, provides Angular Universal to enable server-side rendering.

First, install Angular Universal using npm −

npm install --save @nguniversal/express-engine

Example

Next, create a new file, src/app/home.component.ts, and add the following code −

import { Component } from '@angular/core';

@Component({
   selector: 'app-home',
   template: `
      <div>
         <h1>Welcome to SSR with Angular and Angular Universal!</h1>
      </div>
  `,
})
export class HomeComponent {}

Update the src/app/app.module.ts file with the following code −

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
   imports: [BrowserModule],
   declarations: [AppComponent, HomeComponent],
   bootstrap: [AppComponent],
})
export class AppModule {}

Finally, run the following command to start the development server −

npm run dev:ssr

Navigate to http://localhost:4000 in your browser, and you'll see the server-rendered output.

Output

Conclusion

Server-Side Rendering offers significant advantages in terms of performance, SEO, and social media sharing. JavaScript frameworks such as React.js with Next.js, Vue.js with Nuxt.js, and Angular with Angular Universal provide robust SSR solutions.

By harnessing the power of SSR, developers can enhance user experiences, improve search engine visibility, and deliver highly optimized websites. With the code examples and explanations provided in this article, you now have a solid foundation for implementing SSR with JavaScript frameworks in your projects. Start exploring SSR today and unlock the full potential of your web applications.