Dealing with Asynchronous APIs in Server-rendered React

Summary of key points

• Server-side rendering of React code helps reduce loading times and improve SEO flexibility, but handling asynchronous APIs can be challenging because of the need to render the application before you know the required data.
• Existing solutions, such as Next.js, Redux Connect, and react-frontload, have their own advantages and disadvantages when dealing with asynchronous APIs in server- rendered React code.
• Customized solutions can be implemented by performing two server-side renderings: the first time handles API calls and asynchronous operations, and the second time uses the acquired data for final page rendering.
• Customization solutions require careful handling of different states in the component, including prefetch, postfetch, pre-render and back-end rendering. This can be achieved through complex if statements in component code.
• Customized solutions also require changing the index.html file to send prefetched data as part of the page request and add it to search and replace. If you use script tags, you need base-64 encoding.

If you've ever made a basic React app page, it can have poor SEO and performance issues, especially on slower devices. You can add traditional web server rendering (usually using NodeJS), but this is not an easy process, especially when dealing with asynchronous APIs.

The two main benefits of server-side rendering code are:

• Speed ​​up loading speed
• Improving SEO flexibility

Remember that Google will wait for your JavaScript to load, so simple content such as title content will change without problems. (I can't say what happens with other search engines, though, or how reliable this is.)

In this article, I will discuss how to get data from an asynchronous API when using server-rendered React code. React code has an entire application structure built into JavaScript. This means that unlike traditional MVC mode with controllers, you don't know what data you need before the application renders. With a framework like Create React App, you can quickly create high-quality working applications, but it requires you to handle rendering only on the client side. This has performance issues, as well as SEO/data issues, where you can change the header as needed.

Question

React mainly synchronizes rendering, so if you don't have data, the loading screen will be rendered and waiting for the data to arrive. This doesn't work well on the server side because you don't know what you need before rendering, or you know what you need, but you've rendered it.

View this standard rendering method:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

Question:

1. This is a DOM rendering looking for root elements. This doesn't exist on my server, so we have to separate it.
2. We cannot access anything outside the main root element. We cannot set Facebook tags, titles, descriptions, various SEO tags, and we cannot control the rest of the DOM outside the element, especially the headers.
3. We provide some states, but the server and client have different states. We need to consider how to deal with this state (in this case Redux).

So I've used two libraries here and they are very popular so hopefully it can be applied to other libraries you use.

Redux: The state of the storage server and client synchronization is a nightmare problem. It is very expensive and often leads to complex errors. On the server side, ideally you don't want to do anything with Redux except that it's enough to make things work and render correctly. (You can still use it as usual; just set enough state to make it look like a client.) If you want to try it, check out the various distributed system guides as a starting point.

React-Router: FYI, this is the v4 version, which is the default installed version, but it will be very different if you have an older existing project. You need to make sure that you handle routing on the server side and client side and use v4 – it's excellent in this regard.

After all, what if you need to make a database call? This suddenly becomes a big problem because it is asynchronous and is located inside your component. Of course, this is not a new question: view it in the official React repository.

You have to render to determine which dependencies are needed—these dependencies need to be determined at runtime—and to get these dependencies before being provided to the client.

Existing solutions

Below, I will review the currently provided solutions for this problem.

Next.js

Before we start, Next.js is ideal for you if you want server-side rendered React code or universal application for your production environment. It is effective, concise, and has Zeit support.

However, it is opinionated, you have to use their toolchain, and the way they handle asynchronous data loading is not necessarily that flexible.

View this direct copy of the content in the Next.js repository document:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

getInitialProps is the key, it returns a promise that resolves to an object filled with props and is only on the page. Best of all, this is just built into their toolchain: add it to work without any work!

So how to obtain database data? You make an API call. You don't want to? OK, that's awful. (Okay, you can add custom content, but you have to implement it completely yourself.) However, if you think about it, this is a very reasonable and generally good practice because otherwise, your client will still be The same API calls are made and the latency on the server is almost negligible.

What you can also access is limited - almost just the request object; again, this seems to be good practice because you can't access your state, which is inherently different on the server and client. Oh, and if you haven't noticed it before, it only works with top-level page components.

Redux Connect

Redux Connect is a very opinionated server-side renderer with a nice idea, but this may not be for you if you don't use all the tools they describe. This package has a lot of content, but it is very complex and has not been upgraded to React Router v4. There are many settings, but let's look at the most important part, just to learn some lessons:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

Decorators are not standard in JavaScript. At the time of writing, they are in Phase 2, so use with caution. This is just another way to add higher-order components. The idea is simple: the key is what is passed to your props, and then you have a series of promises that will parse and pass in. This looks good. Maybe another option is this:

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

This can be done with JavaScript without too many problems.

react-frontload

The react-frontload repository does not have a lot of documentation or explanations, but the best understanding I can get may come from testing (such as this one) and reading the source code. When something is mounted, it is added to the promise queue, and when the queue is parsed, it is served. What it does is very good, although it is difficult to recommend something that is not well documented, maintained or used:

// 1. 连接您的数据，类似于 react-redux @connect
@asyncConnect([{
  key: 'lunch',
  promise: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
  render() {
    // 2. 将数据作为 props 访问
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

Looking for better solutions

None of the above solutions really fits my expectations for the flexibility and simplicity of the library, so I will now introduce my own implementation. The goal is not to write packages, but to give you an idea of ​​how to write your own packages based on your use case.

The repository of this example solution is located here.

Theory

The idea behind it is relatively simple, although it will eventually produce quite a lot of code. This is to outline the ideas we are discussing.

The server must render the React code twice, and we will only use renderToString for this. We want to keep the context between the first and second renderings. In our first render, we tried to eliminate any API calls, promises, and asynchronous operations. In our second render, we want to take all the data we get and put it back into our context, rendering our working page for distribution. This also means that the application code needs to perform actions based on the context (or not performing operations), such as whether it is on the server or on the browser, and in either case whether the data is being fetched.

In addition, we can customize it as needed. In this case, we change the status code and header according to the context.

First rendering

In your code, you need to know whether you are working on the server or on the browser, ideally you want to have complex control over it. With React Router you can get a static context prop, which is great, so we will use it. Currently, we're just adding a data object and requesting data, as we've learned from Next.js. Our APIs vary between server and client, so you need to provide a server API that is better to have a similar interface to your client API:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

Second render

After the first rendering, we will get those pending promises and wait for these promises to complete, then re-render, updating the context:

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

App

Quickly jump from our server to application code: In any of our components with router connections, we can get it now:

// 1. 连接您的数据，类似于 react-redux @connect
@asyncConnect([{
  key: 'lunch',
  promise: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
  render() {
    // 2. 将数据作为 props 访问
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

Wow, there is a lot of complicated code. At this stage, you may want to take a more relayed approach where you separate the data fetch code into another component.

This component consists of components you may be familiar with - rendering steps and componentWillMount steps. Four-stage if statements handle different states—prefetch, postfetch, pre-render and back-end rendering. We also add the data to the header after it is loaded.

Finally, there is another step to get the data. Ideally, your API and your database have the same API, which makes the execution the same. You may want to put these into actions in Thunk or Saga to make them more scalable.

View the article "Server React Rendering" and Repository React Server Rendering for more information. Remember, you still need to handle the state where the data is not loaded! You will only do server-side rendering when the first loading, so you will display the loading screen on subsequent pages.

Change index.html to add data

We need to send any prefetched data as part of the page request, so we will add a script tag:

@asyncConnect([{
  lunch: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])

Service

Then we need to add it to our search and replacement. However, HTML uses a very basic script tag finder, so if you have script tags you need to base-64 encoding it. Also, don't forget our head labels!

const App = () => (
  <frontload>isServer</frontload>
    <component1> entityId='1' store={store}></component1>
  >
)

return frontloadServerRender(() => (
  render(<app></app>)
)).then((serverRenderedMarkup) => {
  console.log(serverRenderedMarkup)
})

We also handle status code changes – for example, for 404 – so if you have a 404 page, you can do this:

const context = {data: {}, head: [], req, api}
const store = configureStore()
renderToString(
  <provider> store={store}></provider>
    <staticrouter> location={req.url} context={context}>
      <app></app>
    >
  >
)

Summary

If you are not sure what you are doing, just use Next.js. It's designed for server-side rendering and universal applications, or if you want the flexibility to do everything manually, you can do it the way you want. An example might include you doing data fetching in a child component rather than at the page level.

I hope this article can help you get started! Don't forget to check out the GitHub repository for a viable implementation.

FAQs (FAQs) about asynchronous APIs and server-side rendering React

What is the difference between server-side rendering and client-side rendering in React?

Server-side rendering (SSR) and client-side rendering (CSR) are two different ways to render web pages. In SSR, the server generates the full HTML of the page in response to the request and then sends it to the client. This results in faster initial page load times and is beneficial for SEO. However, this can cause page conversion to be slower, as the entire page needs to be rendered with each request. CSR, on the other hand, means that rendering is done in the browser using JavaScript. This causes the initial page loading time to slow down, but the page conversion is faster because only the necessary components need to be re-rendered.

How to make a server-side request in a React application rendered by my client?

To make server-side requests in a client-side rendered React application, you can use libraries such as fetch API or axios. You can make a request in the componentDidMount lifecycle method or in the useEffect hook when using the function component. The response can then be set to state and used in your component.

Why are my global variables executed twice in React?

This may be due to the way React batch state updates. If you update global variables within a React component, it may be updated twice due to the asynchronous nature of setState. To avoid this, you can use the function form of setState, which ensures that the state update is based on the previous state, not the current state.

How to use an asynchronous API in server-side rendered React?

To use the asynchronous API in server-side rendered React, you can use the async/await syntax in server-side code. This allows you to wait for the API response before rendering the page. You can use libraries such as axios to make API requests.

What are the benefits of server-side rendering in React?

Server-side rendering has many benefits in React. It improves initial page loading time, which can lead to a better user experience. It also improves SEO because search engine crawlers can index server-side rendered content more easily. Additionally, it allows for a more consistent initial state, as the same code runs on both the server and the client.

How to handle errors when using an asynchronous API in server-rendered React?

You can use the try/catch block to handle errors in an asynchronous function. This allows you to capture any errors that occur when making API requests and handle them appropriately, such as by rendering error messages.

Can I use hooks in server-side rendered React?

Yes, you can use hooks in server-rendered React. However, remember that hooks can only be used in function components, not in class components. Also, some hooks (e.g. useEffect) won't run on the server, so you need to make sure your code can handle this situation.

How to improve the performance of server-side rendered React applications?

There are many ways to improve the performance of React applications for server rendering. You can use code segmentation to load only the necessary code for each page. You can also use cache to avoid re-rendering of unchanged pages. Additionally, optimizing server-side code can help improve performance.

How to test my server-side rendered React application?

You can use test libraries such as Jest and React Testing Library to test your server-side rendered React applications. These libraries allow you to isolate test components and make sure they render correctly.

Can I use server rendering with Next.js?

Yes, Next.js is a framework for React that supports server-side rendering out of the box. It provides a simple server-side rendering API, and also supports static site generation and client rendering.

The above is the detailed content of Dealing with Asynchronous APIs in Server-rendered React. For more information, please follow other related articles on the PHP Chinese website!