by Simone Busoli

通过西蒙娜·布索利(Simone Busoli)

使用React和axios设置服务器端渲染的最简单方法 (The easiest way to set up server-side rendering with React and axios)

Server-side rendering (SSR) is a double-edged sword. It’s terribly important for certain applications that require SEO support and meeting certain performance requirements, but it’s nasty to implement properly.

服务器端渲染(SSR)是一把双刃剑。 对于需要SEO支持并满足某些性能要求的某些应用程序而言，这非常重要，但是正确实施很麻烦。

Some of the major difficulties revolve around user authentication and data pre-loading, especially because there are no established patterns around these.

一些主要的困难围绕着用户身份验证和数据预加载，特别是因为围绕它们没有建立的模式。

When building a SPA, often you would use JWT for user authentication, sent via HTTP headers to the server. For data loading instead, you may use React component hooks like componentWillMount. But none of these work when rendering your component tree on the server.

构建SPA时，通常会使用JWT进行用户身份验证，并通过HTTP标头将其发送到服务器。 对于数据加载，您可以使用React组件挂钩，例如componentWillMount 。 但是，在服务器上渲染组件树时，这些都不起作用。

？ 这个主意 (? The idea)

You may have heard that not so long ago React introduced support for a new feature called hooks. This is particularly interesting because hooks are executed whenever the component renders, which opens up a scenario that wasn’t possible until now.

您可能听说过，不久前React引入了对称为hooks的新功能的支持。 这特别有趣，因为无论何时组件呈现，都会执行钩子，这打开了迄今为止尚无法实现的方案。

If hooks are executed when the component which uses them is rendered, it means that they’re executed both when rendering on the client and on the server. As a consequence of this, if a hook does an HTTP request and the library we use for doing that works both on the client and on the server, it means that we get HTTP requests on the client and on the server for free! ?

如果在使用钩子的组件被渲染时执行了钩子，则意味着在客户端和服务器上渲染时都执行了钩子。 结果，如果一个钩子发出一个HTTP请求，而我们用来执行该操作的库在客户端和服务器上均有效，则意味着我们可以在客户端和服务器上免费获得HTTP请求！ ？

axios is one such library, besides being my favorite one.

除了是我最喜欢的图书馆之外， axios就是这样一个图书馆。

⚙️实施 (⚙️ The implementation)

It turns out that the idea has a reasonably straightforward implementation.

事实证明，该想法具有相当简单的实现方式。

Let’s assume that you have already implemented Server Side Rendering in your React application.

假设您已经在React应用程序中实现了服务器端渲染。

If you haven’t done so already, there are plenty of tutorials and examples out there. My favorite is found in the Redux documentation.

如果您还没有这样做，那么这里有很多教程和示例。 我最喜欢的可以在Redux 文档中找到。

Let’s assume we now create a hook called useAxios. In its simplest form, it would look something like this:

假设我们现在创建一个名为useAxios的钩子。 最简单的形式如下所示：

If you’ve used hooks this shouldn’t look too complicated.

如果您使用过钩子，那么看起来应该不会太复杂。

We’re using a React.useState hook to keep the value of the axios response, and a React.useEffect hook to trigger the axios request.

我们使用React.useState钩子来保持axios响应的值，并使用React.useEffect钩子来触发axios请求。

Using this hook would be as simple as this:

使用此钩子将像这样简单：

If you think this is cool, wait until you figure out - like I did - that this approach makes it super easy to implement data loading during Server Side Rendering.

如果您认为这很酷，请等到像我一样找出它，这种方法可以使在Server Side Rendering期间实现数据加载超级容易。

If you think about it, what’s the complexity involved in pre-loading data on the server?

如果您考虑一下，在服务器上预加载数据会涉及什么复杂性？

All that is involved is:

所有涉及的是：

• triggering HTTP requests触发HTTP请求
• waiting for responses等待回应
• sending the data to the client along with the generated markup将数据与生成的标记一起发送到客户端
• make the client load the data so that it won’t execute those HTTP requests again, but simply bind the data to the components that need it使客户端加载数据，以便它不会再次执行那些HTTP请求，而只是将数据绑定到需要它的组件

Now, even though the concept is simple, it requires a bit of coding, hence why I built a library which encapsulated all this logic. It’s basically an extension to the simple implementation seen above, but rather than a dozen lines of code it’s ~100. Considering the features it provides and that using it is still pretty much a one-liner, I find it very exciting!

现在，即使概念很简单，它也需要一些编码，因此为什么我建立了一个封装了所有这些逻辑的库。 它基本上是对上述简单实现的扩展，但不是十几行代码，而是约100行。 考虑到它所提供的功能，并且使用它仍然几乎是一种方法，我发现它非常令人兴奋！

？ 建立轴距钩 (? Building axios-hooks)

You can check out the code already. The library is called axios-hooks and you can install it with:

您已经可以签出代码了。 该库称为axios-hooks ，您可以使用以下命令进行安装：

npm install axios-hooks

npm install axios-hooks

You will find several examples in the documentation, with accompanying codesandbox.io demos to get you started quickly. The usage is very simple but what I’m more interested in explaining is how it works, especially because it’s something that can be applied to many other hooks.

您将在文档中找到几个示例，并附带了codesandbox.io演示，以快速入门。 用法很简单，但是我更感兴趣的是解释它是如何工作的，尤其是因为它可以应用于许多其他的钩子。

Using it on the client is already useful, because it takes away the pain of using React lifecycle hooks and component state. That’s unless you use a higher-order state management library, in which case you’re probably solving this problem in a different way altogether.

在客户端上使用它已经很有用，因为它消除了使用React生命周期挂钩和组件状态的痛苦。 除非您使用高阶状态管理库，否则您可能会以完全不同的方式解决此问题。

The biggest benefit, though, is combining it with Server Side Rendering. Here’s how it works:

不过，最大的好处是将其与服务器端渲染相结合。 运作方式如下：

1. The server renders the component tree, i.e. via the renderToString function of the react-dom/server package

   服务器渲染组件树，即通过react-dom/server包的renderToString函数

2. useAxios hooks are triggered and HTTP requests started

   useAxios挂钩被触发并启动HTTP请求

3. axios-hooks keeps a list of all the requests and caches the responses as they come back

   axios-hooks保留所有请求的列表，并在返回时缓存响应

4. The server code awaits for those requests to complete and extracts a serializable representation of them, which can be rendered along with the markup generated by rendering the component tree. This is sent back to the client服务器代码等待这些请求完成，并提取它们的可序列化表示形式，该表示形式可以与通过渲染组件树生成的标记一起渲染。 这被发送回客户端

5. The client, before hydrating the component tree, fills the axios-hooks cache with the data returned by the server

   在对组件树进行水合作用之前，客户端使用服务器返回的数据填充axios-hooks缓存

6. The client hydrates the component tree and useAxios hooks are triggered again. Because the data is already there, no actual HTTP request is made on the client

   客户端对组件树进行水化处理，并再次触发useAxios挂钩。 因为数据已经存在，所以在客户端上没有实际的HTTP请求

The concept is astonishingly simple, as is the implementation.

这个概念和实现都非常简单。

Checkout ? axios-hooks today and post your feedback!

退房 ？ 今天xios-hooks ，并发表您的反馈！

学分 (Credits)

Credits for the original idea of leveraging React hooks in Server Side Rendering scenarios go to the cool guys at NearForm, who built the awesome graphql-hooks library.

在服务器端渲染场景中利用React钩子的最初想法值得称赞 ， 归功于NearForm的很棒的人，他们建立了很棒的graphql-hooks库。

翻译自: https://www.freecodecamp.org/news/the-easiest-ssr-with-react-and-axios-f36ed9392a8c/