(react + express) 服务器上的 DOM - 返回网页 (SSR)答案

【问题标题】：(react + express) DOM on server - Return web pages (SSR)(react + express) 服务器上的 DOM - 返回网页 (SSR)
【发布时间】：2021-11-26 06:09:56
【问题描述】：

我有一个与从节点 js 渲染 HTML 相关的问题。

我正在创建动态 HTML（他们目前正在使用 Reactj 概念），但我不知道如何像 Reactjs 在我的节点 js 服务器上那样做。 https://es.reactjs.org/docs/rendering-elements.html

我用过：

const express = require ('express')
const app = express ()
const port = 3000
// app.use (express.static ("public"))
app.listen (port, () => {
  console.log (`Example app listening at http: // localhost: $ {port}`)
})

我已经读到，如果你使用 app.use (express.static ..，它只会加载静态文件。

所以我决定添加一个端点，将网站转换为动态：

app.get ("/", (req, res) => {
  res.send ("<html> <head> </head> <body> <h1> .... </h1> </body> </html>");
});

问题是我需要将“index.html”传递给纯文本，用 DOM 读取它并通过 DOM 添加或删除元素（文本）最后返回整个html页面。

1 - Pass the html to text.
2 - Cycle that text by dom
3 - Add or remove items
3.1 - Add divs inside other containers "through an id" by DOM

app.get ("/", (req, res) => {
  res.send (stringTextHtmlWebPage); 
// The problem is that I have to return the entire directory like 
// app.use(express.static ("public")) does; but with the modified file.
});

在 Reactj 中，他们做了类似的事情。他们用 ReactDOM.render 注入。他们有一个：

index.js
function App () {
  return (<div className = "container mt-5"> ... </div>);
  // I was surprised by this line, it goes without any quotes ... and it works ...
}

ReactDOM.render (
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById ('root') // element from public / index.html
);

Index.html
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id = "root"> </div>

在我的情况下，如何返回整个 HTML 页面。使用我指示的步骤？

编辑：

我必须返回整个目录的文件。（但有些修改有些没有）例如：我修改了 index.html，但它关联了一个 css、js、bootstrap ...... 它必须像“app.use (express.static (" public "));”一样工作但有一些修改过的文件。简单来说就是使用node js修改一个文件然后调用app.use(express.static("public"));并且这个文件被修改了。（类似于 React 所做的）

// Modify file
// calls app.use (express.static ("public")); (with the modification)

或者有什么方法可以将代码注入到我的“app”变量中？一些风格

app.injectPath ("public / index.html"). Tour_the_DOM (tag ["tag1"]) = "<div> add this div </div>";

就像 React 一样？

我不能使用模板（pug、manillar...），因为页面的源代码写在别处。

我也读过： https://es.reactjs.org/docs/add-react-to-a-website.html 但是不知道怎么和app.use(express.static("public"))集成起来

这就是我要找的。 https://tech-wiki.online/es/react-server-side-rendering.html 但它不起作用。有什么解决方案可以做到这一点吗？

提前致谢。

【问题讨论】：

标签： javascript html node.js reactjs dom

【解决方案1】：

对不起，我要离开 Node js。使用节点 js 的“简单错误”太多。我尝试了两个月来“非常关注”node js。

我必须调用许多库来相互链接，并且渲染是手动的，并且有无数简单的错误。

我将使用 PHP 来实现。

PHP 让您免于头疼并解决了我的问题。如果是旧的。但它的力量太大了。

PHP 是迄今为止最好的后端语言。对不起这个论坛上的节点js。但真相很伤人

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

我不确定我是否完全理解您在此处尝试执行的操作，但 DOM 操作由浏览器处理，因此它发生在客户端，而不是服务器端。

当您使用 express 时，您可以使用 sendFile() 将文件发送到浏览器并执行 DOM 操作。

例如

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
</head>
<body>
    <div id="results"></div>   
  <script>
    const div = document.getElementById('results');
      div.innerHTML = 'Adding Text Here';
  </script>
</body>
</html>

app.js

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.sendFile('index.html', { root: __dirname })
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

【讨论】：

您的代码错误。您不能在页面内呈现后端本身。也不是所要求的。
你测试过我的代码吗？它当然有效，你的批评也不清楚。后端代码在 app.js 中，而不是像您错误声称的那样“在页面内呈现” 您正确的一件事是，这不是所要求的，但在我的辩护中，自从 OP 制作以来，已经进行了多次编辑我确实说过我不确定这是否是您要求的。