序文

SSRの概念とそのメリット・デメリットについては、前回のブログ「ノードサーバーサイドレンダリング(SSRコンセプト)」でもまとめており、現在はSSRフロントエンドプロジェクトの構築を実際のコードで実装する方法を学習しています。 SSR + フロントエンドフレームワークのレビュー、プロジェクト構築の概要と個人的な理解。

知らせ

目的は、大まかなコード構造、基本的な構造、コードが何に使用されるかを示すことであり、0 から完全に完成したプロジェクトまで初期化することはできません。

Nuxt.jsやNext.jsなどの SSR フレームワークは使用せず、ネイティブノード + Vue の説明

コアテクノロジースタック

Node.js + Express + Vue3

動作環境

ノード環境

プロジェクト紹介

主要な実装原則

SSR の実装の焦点は、サーバー側でページの要素 DOM を生成し、それをブラウザーに返すことです。
ここでは SSR を実装するためのフロントエンドフレームワークを組み込みます。これは大きく次の手順に分かれています。

フロントエンドフレームワークを使用して app.js スクリプトを作成し、フレームワークのコンポーネントを導入します
サーバー側で静的 HTML ページを返すためのインターフェイスを作成する
静的 HTML に、フロントエンドフレームワークのコンポーネントを追加します。
静的 HTML では、フロントエンドフレームワークのクライアントスクリプトを追加することで、フロントエンドフレームワークに静的ページを追加してインタラクティブな機能を実現できます。

プロジェクトの構造

プロジェクトディレクトリ

画像.png

Build はパッケージ化ファイルです。このプロジェクトでは、webpack パッケージ化ツールを使用してプロジェクトをパッケージ化します。

コアモジュールの紹介

「コア実装原則」ステップの手順に従ってプロジェクト構造を実行し、src の下にプロジェクトのコア SSR 構成の機能を導入します。

1.app.js (フレームワークはメインコンポーネントスクリプトを導入します)

フロントエンドフレームワークを使用して app.js を作成し、フレームワークのコンポーネントを導入する

コード

import {
    
     createSSRApp } from "vue";
import App from "./App.vue";
export default function createApp() {
    
    
  // 创建app
  const app = createSSRApp(App);
  return app;
}
// createApp(App).mount("#app");

<template>
  <div class="app" style="border: 1px solid red">
    <h1>App</h1>
    <div>count: {
   
   { count }}</div>
    <button @click="addNumber">+1</button>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const count = ref(100);
  function addNumber() {
    count.value += 1;
  }
</script>

2.サーバー（サーバー）

関数：

サーバー側で静的 HTML ページを返すためのインターフェイスを作成する
サーバーを起動します
リソースパスの構成
静的 HTML に、フロントエンドフレームワークのコンポーネントを追加します。
…

コード

import express from "express";
import createApp from "../app";
import {
    
     renderToString } from "@vue/server-renderer";

let app = express();
let App = createApp();

// 部署 静态资源
app.use(express.static("build"));

// 和注册的顺序有关系，优先匹配第一个符合的路径
app.get("/*", async (req, res) => {
    
    
  const AppContent = await renderToString(App);
  console.log(AppContent);
  res.send(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="data:;base64,=">
        <title>Document</title>
      </head>
      <body>
        <h1> Vue + Server Side Render</h1>
        <div id="app">${
      
      AppContent}</div>
        <script src="/client/client_bundle.js"></script>
      </body>
    </html>
  `);
});
app.listen(3000, () => {
    
    
  console.log("Node Server Start On 3000");
});

3.クライアント（クライアント）

関数：

静的 HTML に、フロントエンドフレームワークのクライアント側スクリプトを追加します。
インタラクティブな機能を実現するには、フロントエンドフレームワークに静的ページを追加します。
…

コード

import {
    
     createApp } from "vue";
import App from "../App.vue";
let app = createApp(App);
app.mount("#app"); // 需要在body添加id=app标签

構成モジュール

config (プロジェクトのパッケージ化構成)