Perenderan sisi pelayan (SSR) menggunakan rangka kerja JavaScript

Dalam persekitaran pembangunan web yang pantas hari ini, menyampaikan tapak web yang berprestasi tinggi dan mesra enjin carian adalah penting. Satu cara yang berkesan untuk mencapai ini ialah melalui pemaparan sisi pelayan (SSR). Dalam artikel ini, kami akan meneroka cara melaksanakan SSR menggunakan rangka kerja JavaScript dan memberikan contoh kod, penjelasan dan output untuk membantu anda merealisasikan potensi penuh SSR dalam projek anda.

Ketahui tentang pemaparan sebelah pelayan

Perenderan sisi pelayan melibatkan penjanaan kandungan HTML pada pelayan dan menghantarnya kepada pelanggan, di mana ia dipaparkan serta-merta. Pendekatan ini berbeza dengan pemaparan sisi klien (CSR), di mana penyemak imbas mendapatkan semula HTML minimum daripada pelayan dan kemudian memaparkan kandungan pada bahagian klien menggunakan JavaScript.

Faedah Rendering Sisi Pelayan

• Prestasi yang dipertingkatkan − SSR meminimumkan masa untuk cabutan pertama yang bermakna kerana pelayan menghantar HTML yang telah diberikan kepada pelanggan. Ini meningkatkan masa pemuatan halaman dan memberikan pengalaman pengguna yang lebih baik.

• Pengoptimuman SEO−Enjin carian boleh merangkak dan mengindeks halaman yang diberikan pelayan dengan mudah, dengan itu meningkatkan kedudukan enjin carian dan meningkatkan kebolehtemuan.

• Perkongsian Media Sosial − Halaman yang diberikan pelayan menyediakan kandungan yang kaya untuk platform media sosial, memastikan pautan yang dikongsi memaparkan pratonton yang tepat dan melibatkan pengguna dengan berkesan.

Gunakan rangka kerja JavaScript untuk melaksanakan pemaparan sebelah pelayan

Mari kita mendalami pelaksanaan praktikal SSR menggunakan rangka kerja JavaScript yang popular.

React.js dan Next.js

Buat projek React baharu menggunakan Apl Buat React. Buka terminal dan jalankan arahan berikut -

npx create-react-app my-ssr-app

Ini akan mencipta direktori baharu yang dipanggil my-ssr-app yang mengandungi struktur projek React asas.

Tukar ke direktori projek -

cd my-ssr-app

Pasang Next.js sebagai kebergantungan -

npm install next react react-dom

Contoh

Gantikan kandungan fail src/index.js menggunakan kod berikut−

import React from 'react';

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

export default Home;

Buat direktori baharu halaman bernama dalam direktori src projek−

mkdir src/pages

Alihkan fail src/index.js ke direktori src/pages−

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

Buka fail package.json dan gantikan bahagian "skrip" sedia ada dengan kod berikut -

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

Simpan perubahan dan jalankan arahan berikut dalam terminal untuk memulakan pelayan pembangunan -

npm run dev

Buka penyemak imbas anda dan navigasi ke http://localhost:3000.

Output

Vue.js dan Nuxt.js

Serupa dengan React, Vue.js juga menyediakan rangka kerja SSR yang berkuasa dipanggil Nuxt.js.

Buat projek Nuxt.js baharu dengan membuka terminal dan jalankan arahan berikut -

npx create-nuxt-app my-ssr-app

Ini akan membuat direktori baharu yang dipanggil my-ssr-app yang mengandungi struktur projek asas Nuxt.js.

Tukar ke direktori projek−

cd my-ssr-app

Contoh

Buka fail pages/index.vue dan gantikan kandungan sedia ada yang mengandungi kod berikut −

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

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

Simpan perubahan dan pelayan pembangunan akan dimuat semula secara automatik dengan kandungan yang dikemas kini.

Mulakan pelayan pembangunan dengan menjalankan arahan berikut−

npm run dev

Segarkan penyemak imbas dan lawati http://localhost:3000.

Output

Sudut dan Sudut Universal

Angular ialah rangka kerja JavaScript komprehensif yang menyediakan Angular Universal untuk melaksanakan pemaparan sebelah pelayan.

Mula-mula, pasang Angular Universal menggunakan npm −

npm install --save @nguniversal/express-engine

Contoh

Seterusnya, buat fail baharu src/app/ home.component.ts dan tambah kod berikut -

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 文件 − 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 {}

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

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

Atas ialah kandungan terperinci Perenderan sisi pelayan (SSR) menggunakan rangka kerja JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!