JavaScript 进行服务器端渲染（SSR）

在今天快节奏的网络开发环境中，交付高性能和搜索引擎友好的网站至关重要。通过服务器端渲染（SSR）是实现这一目标的有效方法之一。在本文中，我们将探讨如何使用JavaScript框架来实现SSR，包括代码示例、解释和输出，以帮助您充分发挥SSR在项目中的潜力。

了解服务器端渲染

服务器端渲染是指在服务器上生成HTML内容并将其发送到客户端，客户端立即显示该内容。这种方法与客户端渲染（CSR）形成对比，后者是浏览器从服务器获取最少的HTML，然后使用JavaScript在客户端渲染内容。

服务器端渲染的好处

改进性能 - SSR将首次有意义的绘制时间最小化，因为服务器将预渲染的HTML发送给客户端。这可以加快页面加载速度，提供更好的用户体验。
SEO优化 - 搜索引擎可以轻松抓取和索引服务器端渲染的页面，从而提高搜索引擎排名和发现性。
社交媒体分享 - 服务器端渲染的页面提供丰富的内容给社交媒体平台，确保共享链接显示准确的预览并有效地吸引用户。

使用JavaScript框架实现服务器端渲染

让我们深入了解使用流行的JavaScript框架实现SSR的实际示例。

使用Next.js的React.js

使用Create React App创建一个新的React项目。打开终端并运行以下命令-

npx create-react-app my-ssr-app

将会创建一个名为my-ssr-app的新目录，其中包含一个基本的React项目结构。

进入项目目录-

cd my-ssr-app

将Next.js作为依赖项安装-

npm install next react react-dom

示例

将src/index.js文件的内容替换为以下代码

import React from 'react';

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

export default Home;

在项目的src目录下创建一个名为pages的新目录

mkdir src/pages

将src/index.js文件移动到src/pages目录中。

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

打开package.json文件，并使用以下代码替换现有的“scripts”部分−

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

保存更改，在终端中运行以下命令启动开发服务器：

npm run dev

打开您的浏览器并导航到http://localhost:3000。

输出

JavaScript 进行服务器端渲染（SSR）

Vue.js与Nuxt.js

与React类似，Vue.js还提供了一个强大的SSR框架Nuxt.js。

通过打开终端并运行以下命令来创建一个新的Nuxt.js项目 –

npx create-nuxt-app my-ssr-app

这将创建一个名为my-ssr-app的新目录，其中包含一个基本的Nuxt.js项目结构。

切换到项目目录

cd my-ssr-app

示例

打开 pages/index.vue 文件，将原有内容替换为以下代码

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

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

保存更改，开发服务器将自动重新加载更新的内容。

通过运行以下命令启动开发服务器−

npm run dev

刷新浏览器地址为http://localhost:3000。

输出

JavaScript 进行服务器端渲染（SSR）

使用Angular Universal的Angular

Angular，一个全面的JavaScript框架，提供了Angular Universal来实现服务器端渲染。

首先，使用npm安装Angular Universal。 –

npm install --save @nguniversal/express-engine

示例

接下来，创建一个新文件，src/app/home.component.ts，并添加以下代码−

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

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