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 Client sending request to get some JSX template page Node.js server getting main file containing JSX code Rendering it to plain HTML code Sending HTML response to client 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 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 I think we Python Django Seriously!! Do we need to embed JS to Python just for server side rendering? 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 , which just saved my project and made me super hero in giving more performance. React.js Proxy Rendering 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 to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server. POST Request So the main advantages that I got No need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memory Ability to keep JSX template cache, which give huge load time improvements Scale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performance 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 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 :)

Flow

Facebook

Super

Making Node.js service always alive on Ubuntu Server

React.js Efficient Server Rendering

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Reasons Why We switched from Python To Go

10 Common Sense Definitions of the Most Common Crypto Industry Terms

14 Top Node.js Open Source Projects: 2021 Edition

6 Ways A Node Developer Can Drastically Boost Their Productivity

67 Stories To Learn About Node

A Comprehensive Review of My Experiences With Leading AppChain Node Providers

5 Reasons Why We switched from Python To Go

10 Common Sense Definitions of the Most Common Crypto Industry Terms

14 Top Node.js Open Source Projects: 2021 Edition

6 Ways A Node Developer Can Drastically Boost Their Productivity

67 Stories To Learn About Node

A Comprehensive Review of My Experiences With Leading AppChain Node Providers

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps