Server-side rendering (SSR) using JavaScript frameworks

In today's fast-paced web development environment, delivering a high-performing and search engine-friendly website is critical. One effective way to achieve this is through server-side rendering (SSR). In this article, we'll explore how to implement SSR using a JavaScript framework and provide code examples, explanations, and output to help you realize 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 immediately displayed. This approach contrasts with client-side rendering (CSR), in which the browser retrieves minimal HTML from the server and then renders the content on the client side using JavaScript.

Benefits of server-side rendering

• Improving performance − SSR minimizes the time to first meaningful draw because the server sends pre-rendered HTML to the client. This improves page load times and provides a better user experience.

• SEO Optimization − Search engines can easily crawl and index server-rendered pages, thereby improving search engine rankings and improving discoverability .

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

Use JavaScript framework to implement server-side rendering

Let’s dive into a practical implementation of SSR using a popular JavaScript framework.

React.js and Next.js

Use Create React App to create a new React project. Open a terminal and run the following command -

npx create-react-app my-ssr-app

This will create a new directory called my-ssr-app that contains the basic React project structure.

Switch to the project directory -

cd my-ssr-app

Install Next.js as a dependency -

npm install next react react-dom

Example

Replace the contents 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 in the project's src directory−

mkdir src/pages

Move the src/index.js file to 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 run the following command in the terminal to start the development server -

npm run dev

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

Output

Vue.js and Nuxt.js

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

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

npx create-nuxt-app my-ssr-app

This will create a new directory called my-ssr-app that contains the basic Nuxt.js project structure.

Switch to 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 your changes and the development server will automatically reload the updated content.

Start the development server by running the following command−

npm run dev

Refresh the browser and visit http://localhost:3000.

Output

Angular and Angular Universal

Angular is a comprehensive JavaScript framework that provides Angular Universal for server-side rendering.

First, use npm to install Angular Universal −

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 {}

使用以下代码更新 src/app/app.module.ts 文件 −

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 {}

最后，运行以下命令启动开发服务器−

npm run dev:ssr

在浏览器中导航到 http://localhost:4000，您将看到服务器渲染的输出。

输出

结论

服务器端渲染在性能、SEO 和社交媒体共享方面提供了显着的优势。 React.js 与 Next.js、Vue.js 与 Nuxt.js 以及 Angular 与 Angular Universal 等 JavaScript 框架提供了强大的 SSR 解决方案。

通过利用 SSR 的强大功能，开发人员可以增强用户体验、提高搜索引擎可见性并提供高度优化的网站。通过本文中提供的代码示例和说明，您现在已经为在项目中使用 JavaScript 框架实现 SSR 奠定了坚实的基础。立即开始探索 SSR 并释放 Web 应用程序的全部潜力。

The above is the detailed content of Server-side rendering (SSR) using JavaScript frameworks. For more information, please follow other related articles on the PHP Chinese website!