在多页网站上做出反应

Question

I created a React App on a multi page website, but I don't know how to integrate it on our website.

Explanation of the problem

1. The user load the website "/" (no react code is involved at the first loading)

2. The user click on a link "/appReact"

3. The _"/appReact" page loads the page and the React app code

4. The React app sends ajax requests to the server

5. Finally the React app gets the data and render itself

The step 3 and 4 makes the loading very slow. The step 3 delay is caused by the multipage nature of the website. The step 4 delay is caused by the response of the server

Possible solutions

I can try many different solutions or combine them, but I'm not sure if is the right way to proceed.

Optimize the react app to makes the ajax loader faster

In my case I can do that but is not the real problem.

Load the React app when the user load the website ("/")

This could improve the step 4, but we carry on the React app all around the website.

Use react router in conjunction of the multipage website

I don't know if is possible to do that. React-router can handle the url to load different apps, but I don't know if is possible to do in a multi site page without affect the site.

A trick using jquery

I have this temptation to bind the click (step 2) and hide the content of the page to run the react app. This will simulate a Single Page Application, but is a patch. I would like something more reliable.

Any suggestion?

Answer 1

You could try React Habitat

That way you can pass properties to your React App directly on page load and not need the additional ajax request.