Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      AdviceWorks
      AdviceWorks
      Bridgestone
      Bridgestone
      NatWest Markets
      NatWest Markets
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      Academy Sports & Outdoors
      Academy Sports & Outdoors

      Case Studies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Laravel Mobile App Embedded & Hardware

      Industries

      Information Technology BFSI Education Marketing & Advertising Manufacturing Retail Logistics & Transportation
      Healthcare eCommerce Public Services Travel & Hospitality Cloud Telecommunications Real Estate
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      SAP Solutions

      SAP Consultation

      Innovate

      Robotic Process Automation Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combat Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

12+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Case Studies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
      Industries
      • Information Technology
      • BFSI
      • Education
      • Marketing & Advertising
      • Manufacturing
      • Retail
      • Logistics & Transportation
      • Healthcare
      • eCommerce
      • Public Services
      • Travel & Hospitality
      • Cloud
      • Telecommunications
      • Real Estate
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      SAP Solutions
      • SAP Consultation
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combat
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
reactjs efficient server rendering

React.js Efficient Server Rendering (Using Node.js as a Proxy Server)

Chandresh Patel
Chandresh Patel CEO and Agile Coach
Last Updated on January 2, 2023 | Written By: RadhaKotecha
May 10, 2019 3 min read

Don’t you just love how React.js works? The simplicity that it creates in the front-end code. How we can write code in JSX Components instead of function calls or create JSX Components using functions (HOOKS API YAAYYYYYYY)! Creating Web Applications has never been easier than it is now. And this also leads to more posts in recruitment site on “hire React.js developers.” The Market is crazy right now for it.

But in some scenarios, such as if we require better performance in load time for a frontend page or we need to implement SEO with dynamic JSX content. The primary way of serving up the frontend (pushing up the code on the server and running ‘npm run start’ or ‘yarn start’) is not the optimum way to do so. And it is for such cases that Facebook developers have enabled us to serve the build-up using basic Node Js Functionality.

To-do so, we follow the following steps:

1. The Client sends a request to get the JSX code.

2. The server (which we build up using Node.js) will get the main file containing the JSX code.

3. Then we will render it to plain browser understandable HTML code.

4. We will, well actually the Node.js server will send the HTML response back to the clientele.

5. With the help of HTML Markup, the client loads React.js client-side code to add dynamic logic to the rendered HTML.

What this does is help us acquire the goals that we had — first is reducing the time taken for React to render the Components. It will load the HTML content much faster, and it will help in providing content to Search Engine bots or the website crawlers.

That great!! Isn’t it? But do we develop all servers using Node.js?

Not, so what to do if we have a large-scale project that uses Python Django and React.js in the frontend. Or should I just change and create the applications in native HTML? Will your “hire ReactJS developer” posts go to waste? Or should I stick to Node.js for all backend code that requires server-side rendering?

Well, we cannot do either of those. There are some options to embed some JS engines in Python that quenches our desire for the server-side rendering. So, should we embed JS engines to Python? Just for the server-side rendering? I don’t think so.

The workaround for this is to create a proxy server in Node.js, just for the purpose to serve up the React.js JSX template and nothing else. We build up a standalone Node.js server. The Python server will make a proxy request the Node.js server. The Node.js server will then render the JSX content and prove native HTML code back to the Python Django template. Using this approach will surely help you in the goals for a faster serving of the HTML pages and providing content to Search Engine Bots.

Proxy Rendering?? How Will We Implement It?

Don’t worry; I have you guys covered. Here is a code snippet that will help you in proxy rendering for Python.


import requests
import json

ProxyAddress = 'http://127.0.0.1:3000/'

def recieve_html(file, prop):
   Try:
       props_str = json.dumps(prop)
       r = requests.post(url=ProxyAddress + file
                         , data=props_str
                         , headers={'Content-Type': 'application/json'})
       if r.status_code == 200:
           return r.text, props_str
   except Exception as exp:
       print(exp)
   return False, False

What this code does is, it makes a POST request to the Node.js server. And in response receives the HTML code, rendered by the Node.js server.

The main profit points:

1. No need to integrate Node.Js or use Js engines in Python.

2. The ability to keep the JSX cache. It helps reduce the load time even more.

3. You can scale the backend services without scaling the rendering service. Thus, it will give you the ability to have multiple servers with a single cached rendering service to attain better performance.

4. Huge flexibility in writing the code. Just need to pass an object to the Node.js server in order to receive the HTML.

Proxy Rendering In Producation

In production, the proxy server runs without any excessive memory or CPU consumption and without the need to restart. The average page rendering for the initial time is 600ms. But due to the Node.js require caching and service caching, the average time is reduced to 10ms.

This tool helps in other languages as well. Like in Go, Ruby or Java but still allows me to use fancy frontend frameworks and tools.


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

React Design Patterns
Dipal Bhavsar

August 11, 2023

React JS

React Design Patterns: Everything You Should Know

By : Dipal Bhavsar

Quick Summary: Explore tried-and-tested strategies to develop streamlined, intuitive user interfaces and maintainable applications with React design patterns. From component reusability to state management, our...

< 1 Minute Read
Read More
Voice UI in Web
Divyesh Maheta

July 13, 2023

Web Development

How Can You Leverage Voice User Interface in Web Development?

By : Divyesh Maheta

Quick Summary: There was a time when people used to interact with computers using Character User Interface or CUI; wherein people used to type text...

< 1 Minute Read
Read More
React Carousel
Ritwik Verma

July 4, 2023

React JS

15 Top React Carousel Component Libraries and their Usage Trends

By : Ritwik Verma

Summary: React is a popular and robust JavaScript library for creating user interfaces that help build dynamic, interactive, and responsive web applications. To make it...

< 1 Minute Read
Read More

How Can We Help You?

india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solutions
  • Careers
  • Testimonials
  • Tutorials
  • QandA
  • Contact Us
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.8
    bacancy goodfirms review
    iso
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation