In late 2015, following the Series G, Pinterest began migrating their web experience to React, primarily because they “found React rendered faster than our previous template engine, had fewer obstacles to iterating on features and had a large developer community.”
The legacy setup consistent of Django, Python and Jinja on the backend, with Nunjucks handling template rendering on the client side. They wanted to move to React for handling template rendering across the board, but if they “switched the client-side rendering engine from Nunjucks to React, [they’d] also have to switch [their] server-side rendering, so they could share the same template syntax.”
They decided on an iterative approach that consolidated a single template rendering engine between client and server, since “If the server could interpret JavaScript, and use Nunjucks to render templates and share our client-side code, we could then move forward with an iterative migration to React.” The team decided to stand up a Node process, behind Nginx, and interpret JavaScript server-side.
Now, when a user agent makes a request, a latent module render requests that it needs data via an API call. Concurrently, a separate network call is made “to a co-located Node process to render the template as far as it can go with the data that it has.”
Node then responds with rendered templates, and along with a “holes” array to indicate what data was still needed to complete the render. Finally, the Python webapp makes an API call to fetch the remaining data, and each module is sent back to Node as completely independent module requests/in parallel/.
With this framework in place, Pinterest developers are in the process of replacing Nunjucks code with React components throughout the codebase.
