Question

我对服务器端渲染概念还很陌生。我正在使用react并且我只想制作一页，即服务器中呈现的主页。之后，用户应执行的任何操作都应在客户端呈现。

我正在尝试构建一个单页面应用程序，该应用程序从数据库中获取数据，但是在第一次加载时，我希望服务器将渲染的页面发送到浏览器。

Answer 1

一种选择是构建例如Express / Node应用程序或纯静态网站，然后在其中包含由React生成的脚本（带有<script>标签）。我以前做过。

编辑//这是我的客户端和服务器端应用程序的项目。 Link

例如：

import React from 'react';
import ReactDOM from 'react-dom';

import { AddEdge, AddNode } from '../components';

class Component extends React.Component {
  render() {
    const { nodes, addNode, addEdge } = this.props;

    return (
      <div>
        <AddNode
          addNodeCallback={addNode}
        />
        <AddEdge
          nodes={nodes}
          addEdgeCallback={addEdge}
        />
      </div>
    );
  }
}

export const render = (nodes, addNode, addEdge) => {
  ReactDOM.render(
    <Component
      nodes={nodes}
      addNode={addNode}
      addEdge={addEdge}
    />,
    document.getElementById('reactContainer'),
  );
};

Server side code snippet：

 app.get('/:categoryName/:pageName', async (req, res) => {
    const navData = await getNavData();
    const { categoryName, pageName } = req.params;

    const category = navData.categories
      .find(category => `${category.name}`.toLowerCase() === parseParam(categoryName));
    const page = navData.pages
      .find(page => `${page.name}`.toLowerCase() === parseParam(pageName));

    if (!category || !page) {
      res.render('notFound', { ...navData });
      return;
    }

    fs.readFile(
      path.resolve(__dirname, '..', 'content', 'md', `${category.id}_${page.templateFile}`),
      (err, data) => {
        if (err) {
          res.render('error', { ...navData, message: err.message });
          return;
        }

        res.render('page', { ...navData, category, page, markdown: data.toString().replace(/\n/g, '\\n').replace(/\r/g, '') });
      }
    )
  });

Server side HTML layout

<div class="container-fluid">
  <div class="row">
    <div class="col-sm">
      <div id="md"></div>
      <div id="reactContainer"></div>
    </div>
    <div class="col-sm">
      <div id="graphContainer" class="graph-container"></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script>
  var converter = new showdown.Converter();
  document.getElementById('md').innerHTML = converter.makeHtml('{{{markdown}}}');
</script>

<script src="{{urlBase}}/graphs/vendors.js"></script>
<script src="{{urlBase}}/graphs/{{category.id}}_{{page.jsFile}}"></script>

如何在服务器中呈现登录页面，如何在客户端中呈现其余页面？

1 个答案: