如何在服务器端渲染中使用Mongodb

时间:2020-06-30 11:00:06

标签: node.js reactjs mongodb

我正在尝试使用React,React Router和Webpack在Express中建立基本的猫鼬连接

在Mongodb中是否有使用ssr的示例?

服务器应该是什么样?



const app = express();
app.use(express.static("./build"));
app.get("*", (req, res) => {
      const url = req.originalUrl || req.url;
      const context = {};
      const indexFile = path.resolve("./build/main.html");
      if (context.url) {
            req.header("Location", context.url);
            return res.send(302);
      }
      const css = new Set();
      const insertCss = (...styles) =>
            styles.forEach((style) => css.add(style._getCss()));
      const appContent = ReactDOMServer.renderToString(
            <StyleContext.Provider value={{ insertCss }}>
                  <StaticRouter
                        location={req.url}
                        context={context}
                  ></StaticRouter>
            </StyleContext.Provider>
      );
      fs.readFile(indexFile, "utf8", (err, data) => {
            if (err) {
                  console.log(err);
                  return res.status(500).send("ne rabotaet");
            }
            data = data.replace("__STYLES__", [...css].join(""));
            data = data.replace(
                  "<div id=app></div>",
                  `<div id=app>${appContent}</div>`
            );

            return res.send(data);
      });
});
app.listen(3000, () => {
      console.log("Listenning on port: ", 3000);
});

1 个答案:

答案 0 :(得分:0)

请参考下面的服务器模板,该模板用于通过Mongoose连接的Next Js项目(SSR)。 server.js

require('dotenv').config();
    
    const express = require('express');
    const server = express();
    const bodyParser = require('body-parser');
    const mongoose = require('mongoose');
    const next = require('next');
    
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({dev});
    
    const routes = require('./routes');
    const routerHandler = routes.getRequestHandler(app);
    
    const {config} = require('../config');
    
    const transactionRouter = require('./api/transaction');
    
    app.prepare().then(() => {
        // Parse application/x-www-form-urlencoded
        server.use(bodyParser.urlencoded({extended: false}));
        // Parse application/json
        server.use(bodyParser.json());
    
        // Allows for cross origin domain request:
        server.use(function (req, res, next) {
            res.header('Access-Control-Allow-Origin', '*');
            res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
            next()
        });
        console.log("mongodb ", config.databaseUrl);
        // MongoDB
        mongoose.Promise = Promise;
        mongoose.connect(config.databaseUrl, {useNewUrlParser: true});
        const db = mongoose.connection;
        db.on('error', console.error.bind(console, 'connection error:'));
    
        // REST API routes
        server.use('/api/transactions', transactionRouter);
    
        // Next.js page routes
        server.get('*', routerHandler);
    
        // Start server
        server.listen(config.serverPort, () => console.log(`${config.appName} running on http://localhost:${config.serverPort}/`))
    });