React.js Efficient Server Rendering

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.

But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages. And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.

So the flow is almost similar to this one

1. Client sending request to get some JSX template page
2. Node.js server getting main file containing JSX code
3. Rendering it to plain HTML code
4. Sending HTML response to client
5. Using HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTML

This is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.

But What If You Don’t Have Node.JS backend?

This is the real questing that was standing for me when I’ve started working on large Python Django project. I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering. At that time I found some solutions which are embedding some JS engines to Python and giving server side rendering to Python, but Seriously!! Do we need to embed JS to Python just for server side rendering? I think we really don’t need!

And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template. It’s like a basic proxy server for JSX rendering.

So after few hours of testing and breaking all the things I made a project React.js Proxy Rendering, which just saved my project and made me super hero in giving more performance.

Proxy Rendering? What is that?

So using basic principle of proxy requests I just made very simple code for Python

import requestsimport json

PROXY_RENDER_ADDRESS = 'http://localhost:3000/'

def get_html(filename, props):try:props_str = json.dumps(props)r = requests.post(url=PROXY_RENDER_ADDRESS + filename, data=props_str, headers={'Content-Type': 'application/json'})

    if r.status\_code == 200:  
        return r.text, props\_str  
except Exception as e:  
    print(e)  

return False, False

Which is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.

So the main advantages that I got

1. No need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memory
2. Ability to keep JSX template cache, which give huge load time improvements
3. Scale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performance
4. Huge flexibility in writing code. No I know that I need just to pass an object to proxy rendering tool and receive HTML back, and I don’t need to worry about state variables or server side code execution in JS
5. Finally it’s daemon beautiful strategy to move different parts separately :)

Proxy Rendering In Production

In production Proxy Rendering tools is running almost 3 months without any restart and Memory, CPU usage minimal. Avg page rendering for the first time is taking about 600MS, but after first time Avg HTML response time is 10MS, it’s because of Node.js require caching and service caching itself.

This tool helped me a lot to continue development with Python, Go, Ruby or Java but still use fancy frontend frameworks and tools. Hope you also wouldn’t stay at Node.js jail :)