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

WBOY

发布时间：2023-08-25 11:05:02

1401人浏览过

来源于tutorialspoint

转载

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

了解服务器端渲染

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

服务器端渲染的好处

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

立即学习“Java免费学习笔记（深入）”；

使用 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 (
      
         Welcome to SSR with React and Next.js!
      
   );
};

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。

shangfan(商范商城H5+PC)

shangfan商范商城是面向转型电子商务业务的企业、二次开发工程师群体推出的B2B2C商城系统，商城覆盖H5、PC、小程序、android、ios全端，内含自主轻量MVC框架，无需跟随第三方开发框架升级，不挑剔PHP版本、扩展及服务器环境，PHP5.4以上+mysqli扩展即可安装使用，开发目录分离，可跟随官方版本升级，业务代码高效简洁，逻辑清晰，扩展方便， H5(手机端)+PC(电脑端)源

下载

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

npx create-nuxt-app my-ssr-app

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

切换到项目目录−

cd my-ssr-app

示例

打开pages/index.vue文件并替换包含以下代码的现有内容 −

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

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

npm run dev

刷新浏览器，访问 http://localhost:3000。

输出

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

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: `
      
         Welcome to SSR with Angular and Angular Universal!
      
  `,
})
export class HomeComponent {}

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

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

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