python - 单页应用程序的 ReactJS 服务器端渲染

coder 2023-08-21 原文

我已经做了什么

我有一个完全使用 React.JS 构建的前端。
所有业务逻辑均由 Django 处理，并由 Django REST Framework 通过 API 公开。
我能够针对不同的移动环境(通过 Cordova 的 Android 和 iOS)进行构建
Web 应用程序可通过我的 Django 项目访问(与公开 api 的项目相同)，前端仍然是通过 webpack 捆绑的相同 ReactJS 代码。
该应用程序有一个入口点 main.js，它是我的 react.js 组件和依赖项的捆绑版本，因此我的 index.html 通常如下所示:
```
<body>
    <script type="text/javascript" src="/static/bundles/main-3997ad3476694c3c91cf.js"></script>
</body>
```

我想做什么

我想提供我的网络应用程序的服务器端渲染，让网络爬虫能够正确地在网络上为我的应用编制索引(我不是在为移动构建寻找服务器端渲染)

考虑到我的应用程序是单页应用程序这一事实，我该如何处理？我不想重新发明轮子，也不想复制我的代码。我必须编写什么样的 node.js 服务器才能实现这种自动服务器端渲染？有什么方法可以直接在 Django 中提供服务器端呈现(通过一些工具读取和解释显示在客户端的页面的最终结果并返回此原始 html 吗？)

最佳答案

你现在可能已经解决了你的问题，但我想分享我的解决方案。

我有一个非常相似的设置，到目前为止似乎运行良好。我基本上有一个带 DRF 后端 api 和同构 React/Flux javascript 应用程序的 django。我还在 python 后端服务器旁边运行了一个节点服务器，它仅充当“模板渲染”服务。本质上，替换了 django render 函数。

所以我只是用一个特殊的 IsoView 替换了 django View，它通过 http 调用节点服务器并返回呈现的 html。

from rest_framework.renderers import JSONRenderer
import requests

class IsoView(View):

    def user_json(self):
        if self.request.user.is_anonymous():
            return {'anonymous': True}
        else:
            return UserSerializer(self.request.user, context={'request': self.request}).data

    @classmethod
    def render(cls, request, template, data):
        req_data = JSONRenderer().render(data)
        try:
            headers = {'content-type': 'application/json'}
            query_params = request.GET
            resp = requests.post(_build_url(request.path), params=query_params, data=req_data, headers=headers, timeout=0.1)
            reply = resp.json()

            if resp.status_code == 302:
                return redirect(reply.get('redirect'))

            if 'error' in reply:
                raise Exception("\n\nRemote traceback: {}".format(reply.get('traceback')))

        except requests.exceptions.RequestException as err:
            logger.warn('IsoView request exception: {}'.format(err))
            reply = {}

        return render(request, template, {
            'react': reply.get('result'),
            'data': data
        })

然后像这样使用它:

class HomePage(IsoView):

    def get(self, request, *args, **kwargs):
        return self.render(request, 'app.html', {
            'user': json_data...
        })

这也假定了一个使用类似这样的东西的 django 模板

<html>
<head>
    <script>
        window.data = {{ data|json }};
    </script>
</head>
<body>{{ react|safe }}</body>
</html>

它的作用是在 body 标记中呈现从节点返回的 html，并将在客户端上引导应用程序所需的 json 数据转储到 window.data 对象中。

这是一个真正简化的系统版本，但它应该可以工作。你应该小心 window.data 位的 XSS 攻击，所以确保转义你所有的 json 数据，但除此之外，你应该一切都好。

然后节点模板服务器看起来非常类似于您可以在服务器端 React 上找到的任何在线教程。只是一个简单的 express 应用。

或者，如果您在节点中呈现完整的 ... 并将其作为字符串返回，则根本不需要弄乱 django 模板。

希望对您有所帮助。

关于python - 单页应用程序的 ReactJS 服务器端渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31728615/

有关python - 单页应用程序的 ReactJS 服务器端渲染的更多相关文章

ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
ruby-on-rails - 渲染另一个 Controller 的 View - 2
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
ruby - 在 Ruby 中编写命令行实用程序 - 2
我想用ruby编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

python - 单页应用程序的 ReactJS 服务器端渲染

有关python - 单页应用程序的 ReactJS 服务器端渲染的更多相关文章

随机推荐