Node服务器端渲染(一)

最新推荐文章于 2023-08-17 20:40:37 发布

KIKIo_

最新推荐文章于 2023-08-17 20:40:37 发布

阅读量276

点赞数

分类专栏： nuxt3 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_46738453/article/details/129413682

版权

nuxt3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、SPA
二、搜索引擎的优化（SEO）
三、静态站点生成（SSG）
四、SSR

一、SPA

1、什么是SPA

在这里插入图片描述

2、SPA的优缺点

在这里插入图片描述

3、爬虫工作流程

在这里插入图片描述

二、搜索引擎的优化（SEO）

在这里插入图片描述

三、静态站点生成（SSG）

在这里插入图片描述

四、SSR

1、什么是SSR

在这里插入图片描述

spa流程

在这里插入图片描述

SSR流程

2、SSR优缺点

SSR优缺点

3、后端渲染demo

npm init -y
npm i express
npm i –D nodemon
npm i -D webpack webpack-cli webpack-node-externals
+

在这里插入图片描述

server/index.js

let express = require("express");

let app = express();

app.get("/", (req, res) => {
  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" />
        <title>Document</title>
      </head>
      <body>
        Hello Node Server
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log("监听3000端口");
});

config/wp.config.js

let path = require("path");
let nodeExternals = require("webpack-node-externals");

module.exports = {
  // 指定打包的目标应用是node还是web
  target: "node",
  //   development production
  mode: "development",
  entry: "./src/server/index.js",
  output: {
    // 输出文件名
    filename: "server_bundle.js",
    // 输出目录
    path: path.resolve(__dirname, "../build/server"),
  },
  //   打包的时候排除node_modules目录中的文件
  externals: [nodeExternals()],
};