简体繁体 English

使用react-router v4进行服务器渲染并预取数据

[英]Server rendering with react-router v4 and prefetching data

原文 2017-01-22 08:25:47 3 1 javascript/ reactjs/ react-router/ server-rendering

I worked a lot with server side rendering with RR 3 so I wanted to see how it works in the context of v4. 我使用RR 3在服务器端渲染方面做了很多工作，所以我想看看它在v4的上下文中是如何工作的。 I followed the tutorial from the website, but because the rendering is happening now together with the route match, there's no way to implement prefetching data as before. 我从网站上看了教程，但由于渲染现在与路由匹配一起发生，因此无法像以前那样实现预取数据。

Here's how I used to do server rendering with v3: https://github.com/alexnm/react-seed/blob/master/server/index.js 以下是我用v3进行服务器渲染的方法： https ： //github.com/alexnm/react-seed/blob/master/server/index.js

Based on the match function, I would call all the prefetch functions from all the component tree and then wait with a Promise.all for them to finish, then trigger the renderToString function and return the html. 基于匹配函数，我将调用所有组件树中的所有预取函数，然后等待Promise.all让它们完成，然后触发renderToString函数并返回html。

In RR4, we have only the <ServerRouter> component, so the current solution I came with is duplicating the render code: https://github.com/FortechRomania/react-redux-complete-example/blob/master/src/server/index.js 在RR4中，我们只有<ServerRouter>组件，因此我附带的当前解决方案是复制渲染代码： https ： //github.com/FortechRomania/react-redux-complete-example/blob/master/src/server /index.js

I'm also using the render function on the <Match> tag to trigger the prefetch actions. 我还使用<Match>标记上的render函数来触发预取操作。 It's ugly and introduces all sorts of dependencies in the parent component of the page I want to render with prefetched data. 它很难看，并在我想用预取数据呈现的页面的父组件中引入了各种依赖项。

What am I missing here? 我在这里错过了什么？ Has anyone found a better solution for this scenario? 有没有人为这种情况找到更好的解决方案？ I haven't found anything useful yet. 我还没有找到任何有用的东西。