SEO友好的React-Redux应用程序

Question

React apps render components on the fly, dynamically, so it makes it impossible for search engines to index pages, and complicates social sharing. What is the best practice to handle such issues, and make a React-Redux app SEO-friendly?

Answer 1

We Need Server-Side Rendering to do SEO for a React App!

Let's split up the application's architecture into three parts: an API server that provides data, a web server that will share code with the client-side and also render HTML, and finally the client ie the code that gets run in the browser.

Basically, Server-Side Rendering will allow part of your code to be ran on your web server first. This means the server will first obtain the data from your API that is needed to render on the initial page's HTML, and then it will package and send this data to the client as HTML.

After the client gets the initial page HTML and the required data, it will continue the whole JavaScript rendering business, but it already has all the required data. So, using the small example above, a client-side rendering SPA would have to start from scratch, but a server-side rendering SPA would be at a starting point where they already have all the data. Thus, this solves the SEO and slow initial loading problems that SPAs share).

This seems like a rather intuitive idea, but it was only taken more seriously when React came out, since React allows you to do server-side rendering in an elegant manner.

To sum up, server-side rendering can be broken down into 3 steps:

(1) Obtain the data needed to render the initial loading page.

(2) Render the HTML using this data.

(3) Package the HTML and send it to the client side.

For more follow this link:

https://www.codementor.io/reactjs/tutorial/redux-server-rendering-react-router-universal-web-app