如何使用服务器端渲染将我的react服务器与django服务器结合起来？

Question

当我部署我的django项目时

python manage.py runserver，以及我对npm start的反应，

我不知道哪一个是我的“真实项目”。我认为这个问题归结为客户端渲染与服务器端渲染，现在我想用服务器端渲染，因为我比django更熟悉，而不是我的反应。这意味着我必须使用django / drf正确设置网址和视图？如果是这样，我的问题如下......

1. 每当我访问网址时，我如何“调用”反应（例如，website.com /）。我想在一个格式很好的html文件中返回我所有项目的列表。我怀疑这与path（）函数中的模板参数有关。
2. 如何阻止用户访问api视图（website.com/api/items），这是我用django-rest-framework处理api调用的url，但我不希望别人看到这个但又想要反应“看到”这个。
3. 因为我正在进行服务器端渲染，除了对我的api urls进行正确的http调用并使我的html模板看起来漂亮之外，还有什么我的反应应用需要做的事吗？

非常感谢你。任何答案/在线资源都非常感谢。

项目网址：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('App.urls')),
    path('api/',include('App.api.urls'))
]

应用网址：

urlpatterns = [
    path('', views.index, name='index'), #nothing much here yet
]

Api网址：

urlpatterns = [
    path('item',views.ListItem.as_view())
]

我的基本React App.js只抓取所有项目并显示它们

class App extends Component {
    state = {
    items: []
    };
   async componentDidMount(){
    try{
    const res = await fetch('http://127.0.0.1:8000/api/item');
    const items = await res.json();
    this.setState({
        items});
    }
    catch (e){
        console.log(e);}
   }
    render(){
        return(
            <div>
                {this.state.items.map(item =>(
                    <div key={item.id}>
                        <h1>{item.item}</h1>
                        <h1>{item.price}</h1>
                         <span>{item.description}</span>
                    </div>
                ))}
             </div>
         );
        }

}
export default App;

Answer 1

如果您想要服务器端渲染您的反应应用程序，您必须在django应用程序的模板视图中设置您的JavaScript。现在，您正在不同的服务器上运行您的react应用程序和django应用程序，因此这就是为什么您没有为反应应用程序获取服务器端呈现。这将涉及创建与webpack或起搏器的反应。

我要做的是将反应应用程序捆绑在django视图中，这样就是服务器端渲染。

我希望这是有道理的。