Как получить данные при реагировании на стороне сервера рендеринга на основе пути динамической маршрутизации

Question

Допустим, у меня есть компонент, как показано ниже.

User extends React.Component {
  componentDidMount() {
    this.props.fetchUserDetails(this.props.params.userSlugName);
    // this slug name is coming from route params (ex: path is /users/:userSlugName)
  }
  // Other lifecycle methods
}

User.loadData = () => {
  // some data fetching logic for backend
}

Я использую response-router v4 с настройками response-router-config. У меня заканчиваются идеи. Как получить userSlugName внутри сервера.

Теперь, как я могу предварительно получить эти данные на сервере для правильной работы SSR.

Answer 1

Включение асинхронной логики в рендеринг на стороне сервера немного сложно. Когда вы вызываете renderToString(), вы получите html для начального render(). Что вам нужно, это HTML для последующего render (), который происходит, когда данные поступают.

Основная идея заключается в следующем:

• Выполнить вызовы API
• Подождите, пока они закончат
• Вернуть HTML для окончательного рендеринга ()

Вы можете попробовать подход, упомянутый на сайте Redux ( https://redux.js.org/recipes/server-rendering) или в этом руководстве ( https://www.sitepoint.com/asynchronous-apis-server-rendered-react/).

Я предпочитаю последнее, оно более общее, и вам не нужен разный код извлечения для каждого компонента. Возможно, вы захотите настроить код, чтобы сделать его проще. Подробнее о контекстном API реагирующего маршрутизатора здесь: https://medium.freecodecamp.org/how-to-protect-your-routes-with-react-context-717670c4713a

function handleRender(req, res) {
    const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
    console.log('fullUrl: ', fullUrl);
    console.log('req.url: ', req.url);

    // Create a new Redux store instance
    const store = createStore(reducerFn);
    const context = {};    // Store stuff here

    const urlToRender = req.url;
    // Render the component to a string
    const html1 = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={context}>
                {routes}
            </StaticRouter>
        </Provider>
    );

    // Get promises from context, wait for all of them to finish
    // Render again
    const html = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={context}>
                {routes}
            </StaticRouter>
        </Provider>
    );
    const helmet = Helmet.renderStatic();

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(helmet, html, preloadedState));
}

Я поделюсь кодом для https://www.heloprotocol.in/ когда у меня будет шанс.