How to inject react component into handlebar template which is loading dynamically at run time.
edit: tl;dr: This is a great question. Injecting pre-rendered React components into an html templating language (like handlebars) can improve the load times of your site and improve the "indexability" of your content for search engines (your SEO). the trick is you have to server-side render (SSR) and you don't want to load all of the code into the browser on the initial request so you need code-splitting. These can be accomplished with webpack. Until recently they have not been possible without a framework like Next.js... There are now 3 options, and the conclusion I have come to is that the only one worth using is: React-Universal-Component
If you want to learn more about the benefits you get from rendering your content into HTML before the JS assets, CSS assts, etc. are loaded, this article on Isomorphic or Universal Javascript is a good place to start. Writing Isomorphic/Universal JavaScript is about writing code that is flexible in its ability to render client-side or server-side.
There are a couple if React top-level APIs that make this easy, and a handful of transpiling/compiling/bundling libraries (I use Webpack), that are necessary (if you don't want to compile the template in the browser).
Because React components are almost always written in JSX they must be transpiled to JavaScript before they can be rendered. This is typically done with ReactDOM.render() which will call React.createElement() for us.
React also has a function, ReactDOMServer.renderToString() which takes the React element, builds the HTML (on the server-side) and converts it into a string. This is what enables us to inject pre-rendered React into html templates.
For an example of the process which I have just described, see this example, but it's out of date now.
Conclusion: Injecting a React component into a handlebar template is not worth its time because there are finally libraries to help us do this (see my first link). IMO SSR React is important for sites that need the SEO benefits, and it will also improve your load times (especially on under-powered devices) if your app properly performs SSR and code-splitting.
Related
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I have an application that is largely tables and standard pages and forms. However, I have one page this really need to be highly responsive that is probably best developed in React.js.
I would like to have a Flask + Jinja handle the delivery of most of the pages. I understand Facebook does a bit of this with PhP for the majority of the site with React.js handing the responsive components. Is there a Flask library that makes this simple?
I don't think you need to use any library for this as it's pretty straightforward.
All you need to do is:
Make that page using React.js and build the project to make bundle Javascript file which bootstraps the React.js page.
Make div inside your jinja template and import that bundle javascript file.
Here, one important thing is to assign identical 'id' to the Jinja template div and React.js rendering div.
I want to create an MTurk HTML question that uses a modern web framework, such as Vue or React. For a minute let's assume I can't use an ExternalQuestion which just points to a website I create, but rather want to use HTMLQuestion.
Is that doable? Can I include React, for example, and it will work? Amazon's surrounding HTML will not interfere with it?
Yes, you can do this. Both HTMLQuestion and ExternalQuestion are rendered in an iframe when a worker accepts your HIT. As such, they're completely isolated from any other scripts or libraries on the surrounding page.
This is more of question of if it makes sense to use Reactjs in my instance. I have an application that generates html serverside. I can not use any js based templating solutions serverside, it is a java/jsp solution blackbox.
Since the markup is already defined I am weary of using JSX to duplicate all the template logic currently only on the serverside. What is typically the best approach to integrating reactjs in to an application like this.
What will be the real advantage to using reactjs for me in this situation. Most of may app will continue to be rendered serverside go forward.
Obviously React is not designed to be used like this; but you could still do it.
Long story short: If you want to build something more complex in front-end you should do it; if you only want to get advantage of JSX templating instead of jsp, it's just a big overhead.
Advantages:
You will be able to step away from standard jQuery approach of handling javascript in .jsp.
You will get all the benefit of a client-side framework, so you are able to handle more complex scenarios in front-end as you would do with standard javascript.
You could hide some business logic in the java side (servlets) and making it available to React world.
Disadvantages:
Probably it's a pain to prepare the development environment mode (webpack, hot-reload, etc.); e.g. you'll need to recompile the jsp on the fly on every js change.
You can't use client-side routing (so you'll have like one SPA per page).
Probably it's really hard to make server side rendering work (for the React part)
Pardon my English, it is a second language. The whole point of an isomorphic app, as opposed to a regular client-side SPA is so the client doesn't have to download the whole JS file initially which results in really slow initial load time.
I've been trying to teach myself server-side rendered React, and after watching countless videos around the concept and following countless tutorials on the actual implementation, I still can't get my head around this (at least this is how I understand it):
Despite the server conditionally rendering pages and sending props to the client on url change, the client side still uses a router that includes all the entry points for the app (by requiring all of them, and then loading the file based on the url location). Doesn't that means all the files are included in the main client JS file anyways since it's already been required by the client-side router? Doesn't that defeat the whole purpose of server-rendered React? Or am I thinking about this the wrong way?
In short, how does an isomorphic React app really works with a client-side router that includes (by requiring them) all of the app's entry points?
I'm not sure that "The whole point of an isomorphic app [...] is so the client doesn't have to download the whole JS file initially which results in really slow initial load time" is necessarily true. I think the primary reason people do this is for SEO reasons and to improve perceived load time. You still get the benefit of showing the users the page before they have to load all the JavaScript (e.g. yes, they have to load all the JS, but it's OK because they already have most/all of the content). The app upgrades to an SPA transparently, providing a seamless experience for the user.
That said, you can implement a system where you don't have to load all the JS at once with something like webpack's code splitting. There's even a simple React Router example that does this.