使用 JavaScript 框架的服务器端渲染 (SSR)

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

了解服务器端渲染

服务器端渲染涉及在服务器上生成 HTML 内容并将其发送到客户端，并在客户端立即显示。此方法与客户端渲染 (CSR) 形成鲜明对比，在客户端渲染 (CSR) 中，浏览器从服务器检索最少的 HTML，然后在客户端使用 JavaScript 渲染内容。

服务器端渲染的好处

• 提高性能 − SSR 最大限度地缩短了首次有意义绘制的时间，因为服务器将预渲染的 HTML 发送到客户端。这可以缩短页面加载时间并提供更好的用户体验。

• SEO 优化 − 搜索引擎可以轻松抓取服务器呈现的页面并为其编制索引，从而提高搜索引擎排名并提高可发现性。

• 社交媒体共享 − 服务器渲染的页面为社交媒体平台提供丰富的内容，确保共享链接显示准确的预览并有效吸引用户。

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

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

React.js 与 Next.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。

输出

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。

输出

Angular 与 Angular Universal

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

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

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 应用程序的全部潜力。

以上是使用 JavaScript 框架的服务器端渲染 (SSR)的详细内容。更多信息请关注PHP中文网其他相关文章！