A complete renewal based on Node, NextJs and React of the TV Publica frontend

This year we started to build an entirely new site for our TV Channel based on a state of the art tech stack.

A complete renewal based on Node, NextJs and React of the TV Publica frontend

The time to modernize the TV Pública main site and some of their web services finally come! With started this journey with some fine and clear objectives that we would try to achieve.  These goals were:

  • Overall better user experience based on:
    • Speedup the load times
    • Faster and more responsive user interface especially on mobile devices
    • Beautify the UI
    • Continuous video play across the navigation
    • Make the search function quicker and more accurate
    • Possibility to add personalized experiences any time soon
  • Make better and more efficient the development work:
    • Decouple the backend and frontend systems:
    • The backend manages all the content of the CMS and exposes API
    • The frontend takes the API endpoints and builds the pages
    • Use a modern tech stack to build the frontend
    • Handle all the frontend dependencies with a package manager
    • Standardize the code compilation and minification

After researching about the frontend stack and their possibilities, I proposed to go with Node, NextJs and React. We went for this options because some the features of this stack fitted our needs, mainly:

  • Simple and clear but very customizable solution to implement React in both server and client empowering code reusing.
  • Server Side Rendering (SSR) to make the first pages load fast
  • Client Side Rendering to fetch new pages without reloading, giving us the possibility to deliver a continuous video play across the navigation
  • Standardized code bundling with Webpack 4
  • Automatic code splitting
  • Static CDN support

You can see the site in production at: https://www.tvpublica.com.ar