React.js Efficient Server Rendering – Hacker Noon

  • React.js Efficient Server RenderingFor 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 oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis 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.
  • 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.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + 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, FalseWhich 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 gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

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…

@jxpert_: “React.JS Efficient Server Rendering” by @tigranbs #React #NodeJS #reactjs #javascript…

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

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.

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.

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

def get_html(filename, props):

try:

, headers={‘Content-Type’: ‘application/json’})

return r.text, props_str

except Exception as e:

to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.

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 🙂

React.js Efficient Server Rendering – Hacker Noon