React SSR 替代方案答案

【问题标题】：React SSR alternativesReact SSR 替代方案
【发布时间】：2021-03-21 10:56:59
【问题描述】：

我目前正在处理一个其他人构建的项目，我被要求实现服务器端渲染，这是一个巨大的项目，它使用基于“构建器 JSON”的自定义路由系统，该主组件选择哪个基于路由渲染的组件，旨在保持应用动态并适应多个客户的需求。

我一直在到处寻找答案，但我是 SSR 新手，这是一个很大的挑战。

我目前正在测试一种使用 express 的方法，如下所示：

import 'babel-polyfill';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router';
import bodyParser from 'body-parser';

import { App } from '../src/App';

const app = express();
const PORT = process.env.PORT || 8000;

app.use(bodyParser.json());
app.use(express.static('ssrBuild'))

app.get('*', (req, res) => {
    const context = {}
    const content = ReactDOMServer.renderToString(
        <StaticRouter location={req.url} context={context}>
            <App />
        </StaticRouter>
    );

    const html = `
    <html>
        <head>
        </head>
        <body>
            <div id="root">
                ${content}
            </div>
        </body>
    </html>
    `;
    res.send(html);
});

app.listen(PORT, () => {
    console.log(`App running on port ${PORT}`);
});

我目前遇到的问题是 App 组件从 node_modules 中的另一个存储库调用“复杂路由组件”（也由它们构建），我的 webpack 配置正在获取 App 组件并找到 jsx，这显然不能在服务器中运行。

Webpack 配置：

const path = require('path');
const webpackNodeExternals = require('webpack-node-externals');

module.exports = {
    target: 'node',
    entry: {
        server: './ssr/server.js',
        
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '..', 'ssrBuild'),
        publicPath: '/ssrBuild'
    },
    module: {
        rules: [
            {
                test: /\js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/',
                options: {
                    presets: [
                        '@babel/react',
                        ['@babel/preset-env', {
                            targets: { browsers: ['last 2 versions'] }
                        }]
                    ],
                    plugins: [
                        ['@babel/plugin-proposal-decorators', { 'legacy': true }],
                        '@babel/plugin-proposal-class-properties',
                        '@babel/plugin-syntax-function-bind',
                        '@babel/plugin-transform-async-to-generator',
                        '@babel/plugin-proposal-export-default-from',
                        'babel-plugin-jsx-control-statements',
                        'react-hot-loader/babel',
                        'lodash',
                    ]
                }
            }
        ]
    },
    externals: [webpackNodeExternals()]
}

有没有办法告诉 webpack “随时随地”转换 node_modules 文件夹中的 jsx？还有什么其他的解决方案？

另外，这个项目的重点是改进这些应用程序的 SEO，我只需要对索引页面和其中的任何内容的直接链接进行 SSR。不需要对整个应用进行 SSR 有没有办法做到这一点？

我还想知道，如果仅对索引页面和任何直接链接进行重构，是否值得将整个应用程序重构为使用 Next.js。

提前谢谢你！

【问题讨论】：

也许如果您创建一个最小的可运行示例，它会更容易为您提供帮助。 #1 你的 react app 经典构建过程是否正常工作（npm run build）？ #2 你需要用特定的路线构建你的反应应用吗？ #3 SSR 是强制性的，还是为什么不能选择经典水疗？
你能看看my post

标签： reactjs next.js server-side-rendering render-to-string

【解决方案1】：

如果团队负担得起，那么您绝对应该去尝试一个框架。从长远来看，这将使我更易于维护。我建议您尝试 Next.js 而不是 Gatsby，两者都是不错的选择，但在我看来 Next 有两个或三个优点，例如增量静态再生（如果您的内容不断变化，则重新生成），或者您可以选择使用 Server Sider 或基于静态生成你的路线。例如，您可以在仪表板上使用 SSR，在主页和登录页面上使用 SSG。

如果您不需要任何类型的预渲染，您可以只使用客户端，即使这样，Next 也会进行一些优化，以加快您的网站速度。

从长远来看，它将为您节省大量时间，并且易于维护

【讨论】：