This is a big undertaking and one that we have to be able to do incrementally whilst we continue to build new features. That means it’s not practical for us to completely drop our server side templates in one fell swoop and that lead to us building a bridge between our React application and our server side templates.
We’re using this library to move from purely server side templated HTML to web components in our templates (for us that’s Django templates, but swap Django for your backend library of choice):
<!-- all of the nav code here --><!-- all of the other old Django code here -->
<!-- all of the other old Django code here -->
One of the main goals of the library is to not tightly couple the React components to the fact that they are being used within a custom element - you should be able to write React components just like you would normally. We took this approach because ultimately we don’t see ourselves using Custom Elements forever, but as a useful bridge into a client-side driven experience.
You can find installation instructions, examples and thorough documentation in the project’s README, and please open an issue if you have any problems with the package.