If most of your front-end is built using components, it makes sense to use the same code to render your views from the backend. This , i.e. not waiting for your to load in the web browser before components get rendered, is particularly important for SEO. Luckily, React provides functionality to render components into an HTML string, which can then be returned from the web server. However, React is a Javascript library, and therefore a Javascript runtime environment is required. If you’re using NodeJS for your backend, you’re good to go. But if you use Ruby on Rails, Go, Django, or any other non-Javascript environment, you won’t be able to use React’s server-side rendering functions directly. React pre-rendering Javascript Enter . preact-rpc Preact-rpc is three things packaged into one: An RPC server that fulfills React component rendering requests by clients connected to it. A library to register React components in your Javascript bundle so that the RPC server can find them. A collection of language specific libraries to connect with the RPC server and send render requests to it. The basic idea is this. Run a NodeJS socket server that can render React components on behalf of clients and return the HTML string. This method is pretty efficient because the server loads the Javascript bundle containing the components at start and keeps it in memory. The overall system is quite simple, but lets walk through an example to make things crystal clear. Assume that our backend is a Go app, and we would like to render React components from there. Lets say we have a simple component like this: It is a simple component that takes a prop and prints out a Hello message. toWhat Now lets install the module: npm install preact-rpc Next, we need to our components so that our RPC server knows how to identify a particular React component given some sort of ID/name. To do this, we modify our Javascript as follows: register We’ve registered the component Hello with the name ‘hello’. We’ll use this name when we want to send render requests later. Even though I’ve only used a single component in the example above, you can register as many components as you need. In practice, you’d create a Webpack bundle that includes all the required components. Your Javascript is now ready. We can now start the RPC server with this Javascript file: This will start a server with a UNIX socket. You can use a TCP socket by providing a number for the port command line argument. After the server starts, it is ready to fulfill component rendering requests. The protocol is very simple. The request is in the form of JSON: The server expects requests to end in a special sequence of bytes. By default this is defined as: \r\n. We can now write a client to connect to the server in the language of our choice. You can write this code yourself if you wish, or you could use one of the helper libraries included with preact-rpc. For Go, the package is included. Here is our Go backend that uses this package to connect to the RPC server started earlier: github.com/musawirali/preact-rpc/goclient Run the app and see our simple Hello component rendered. In its current state, the preact-rpc package is functional, but still quite minimal. A number of things are in the pipeline to flesh out the system: Seamless continuity of React component lifecycle from backend to front-end when the front-end Javascript is loaded. Support for Redux stores. Build out helper libraries for more languages/environments. Hope this project is helpful to the community. Contributions are welcome! is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Server-side React Rendering From non-Node Environments

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

104 Stories To Learn About Go

10 Questions for Aswin Ganesh, Noonie Nominee for Functional Programming

3 Golang Pitfalls Every Developer Needs to Know

207 Stories To Learn About Golang

2 Error-Free Options for Decimal handling in Golang

5 Advanced Go Testing Techniques

104 Stories To Learn About Go

10 Questions for Aswin Ganesh, Noonie Nominee for Functional Programming

3 Golang Pitfalls Every Developer Needs to Know

207 Stories To Learn About Golang

2 Error-Free Options for Decimal handling in Golang

5 Advanced Go Testing Techniques

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps