SEO Compatible Rendering

[Archmonger]

Current Situation

Currently, sites built in ReactPy are not SEO compatible. This is a fairly common issue with JavaScript frameworks such as ReactJS.

Prior discussion: #486
Prior Issue: reactive-python/reactpy-django#93

Proposed Actions

To resolve this, there needs to be an initial HTTP render, followed by a JavaScript re-render.

It may be worth considering using Preact's hydrate API, but this would likely require ReactPy to have a database backend. However, a simpler design involves

1. Use the template tag to render the initial component as raw HTML.
2. When the JavaScript client requests it, re-render the component.

[Archmonger]

In order to take advantage of why users want SSR (namely SEO), IDOM might need to be modified to use HTTP instead of websockets.

[rmorshea]

So my thinking on this is that only the initial page needs the be rendered in HTML. Subsequent updates could be communicated via websockets. Then again, React has a way to do this, so if we can do server-side rendering with a traditional React solution and communicate via sockets on localhost then that could be an option too. The latter is a bit more complicated with respect to the tooling, but less work with respect to actual implementation, so I'd probably lean towards the latter assuming it's possible.

[Archmonger]

I did some investigation and here's what I came up with.

The Ugly

• The currently accepted "best methods" for SSR within React seems to rely frameworks such as NextJS, Razzle, or NodeJS.
  • These frameworks are used to render only the initial page server-side.
  • As you mentioned, that's the preferred behavior.
• If we want native SSR that relies on existing JS frameworks, we might end up relying on transpiling.
  • I can't think of a good way to propagate renders from IDOM Server Side -> Any JS Framework Server Side (transpiled?) -> React Client Side
  • Unless we can figure out a cross-platform way to make that work, I don't recommend going down this path.

Suggested Approach

• My suggested solution is to do this within Python.
• In theory, it's currently possible to immediately develop SSR for Django IDOM due to template tags.
  • We would need to render the component's initial HTML as a string within the template tag and then pass that into body of the component div.
  • mountViewToElement's behavior of wiping the div on WS connect will need to change.
    • Component Initial HTML reactpy-django#27 (comment)
  • Enabling or disabling SSR would configurable through settings.py:IDOM_SSR: bool = False
• There are a few things to consider with this design...
  • To avoid wasteful "double rendering" (SSR render + WS render), we need a way to signal mountViewToElement that the initial render has already been server-side rendered.
    • Likely just a ssr boolean parameter within mountViewToElement.
  • Rehydrating hook values from the SSR render into the WS render will be difficult and come with big limitations/hurdles.
    • We can't really store these values client side due to having to protect against value spoofing.
    • Will likely need to serialize and store the component's hook attributes within a database.
    • This limits SSR capabilities to web frameworks with integrated database capabilities.
    • This limits hooks' initial values to those serializable by dill.pickle.
    • On web frameworks without databases, we can fallback to "double rendering" the component.
    • Alternatively to database storage, we can use redis. But I'm personally not a huge fan of IDOM forcing redis usage.
• This template tag system should be replicated to all other frameworks we support.
  • Embedding ReactPy via Template Tags #653

---

Resources

• https://blog.logrocket.com/why-you-should-render-react-on-the-server-side-a50507163b79/
• https://asperbrothers.com/blog/server-side-rendering-in-react/#:~:text=What%20is%20Server%2DSide%20Rendering,with%20all%20the%20static%20elements.
• https://www.freecodecamp.org/news/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e/