Server side UI framework POC

[carcruz]

As the OpenTargets development team, we want to explore the benefits and cons of server-side rendering (SSR) because of our need to improve page loading and SEO capabilities.

Background

We are currently building our UIs using client-side rendering with a standard ViteJS bundler as a single-page application. This technique has some downsides:

• Not Search Engine Optimization (SEO)
• Initial page load takes quite extra time because JavaScript handles most web page lifecycle-related tasks.

Task

To explore different options for implementing SSR, I encourage you to build a study case using one of our pages platform (either Drug or Disease) and rebuild it using React server-side frameworks. NextJS is a good start since it has been growing fast in the front-end ecosystem.

Note: Be careful with NextJS 13, at the moment, is an unstable version.

Another interesting framework to test is Remix.

References

• React rendering techniques: https://dev.to/sjsouvik/rendering-strategies-csr-ssr-ssg-isr-4c5k
• NextJS
  • NextJS Getting stater: https://nextjs.org/docs/getting-started
  • React Tutorial - Build A Blog With GraphQL and NextJS: https://www.youtube.com/watch?v=Dc7LAgqy1_E
• Remix
  • https://remix.run/docs/en/v1
  • Why Remix over other React frameworks? https://kentcdodds.com/calls/01/22/why-remix-over-other-react-frameworks

[LucaFumis]

I'll be documenting the process here: https://docs.google.com/document/d/1Ztrcbz7ShgizC8zrnPsYffselKAT2rLNeXWoWO-zRng/