SSR or Server Side Rendering is the process where server sends data directly to the browser to draw layout. Browser doesn't need to call any api to fetch data from any source and manipulate the DOM(Document Object Model). So, no api calls, still all required data pre-loaded in browser. So you might ask why is it important. After all, you care if data is visible to you or not. So what makes the difference if data is coming directly or through api. Yes. To you it matters nothing. But google, bing, yahoo all major search engines crawl your website or app. And they depend on data which directly comes from server. Because, they rely on data loaded on first 8 seconds. Their crawlers can run javascript and fetch data from api.but if it takes time, it ignores that data. So, if you want skyrocketing SEO(Search Engine Optimization), you need to render web pages from Server.
When do you need it
If you are building front pages of your company or your product, then you need score high on SEO. If you offer a product which offers data to public without login, you need SSR. Suppose you are building a property listing website or a product catalog or a marketplace, e-commerce website like Amazon or Flipkart, you need SSR.
How ReactJS comes in the scene
Reactjs is a popular javascript library for front-end development, we all know it. Mostly it is used for populating user data to users through API. It's not quite familiar for Server side rendering. But React offers vast features and development flexibility beyond data rendering. Its router library is awesome. Simple but powerful. Vast state management capability with or without other state management libraries like mobx or redux makes developers throw themselves into react. We, at appradius are very much fond of React. 70% of our projects are based in ReactJS. Coming to the point, how ReactJS helps you to build a SSR website.
Introduction to React SSR
By default, React has no method for rendering things directly from server. It always depends on service or REST apis to bring and show data. But there's a process. If we create.a Node js project and keep ReactJS as rendering engine, we can achieve that. We will be able to use all powerful modules of ReactJS along with SSR. But for that, your project will be a NodeJs project instead of ReactJS project. Although, ReactJS is almost everything in this. From fetching data from external api to rendering layout. Node js ensures that data will be through of it and passed through a React component. Is it simple task to build? No. You need expertise in React, Redux. Mainly you need to know how reducer works.
Next.js at Rescue
If you think that development effort is too much, then best thing is there is a popular framework for React SSR. It's called Next.js. Built by a company named Zeit. Next.js makes React SSR development simple. A Next.js website is fast, secure and scalable. Loadless routing through pages feel very smooth. World's greatest companies have already started using Next.js as their primary framework for building front pages. Here is the gallery.
Deployment option
Next.js’s parent company, Zeit gives you option to host entire Next.js website. Otherwise, you can go for any NodeJS enabled server for Next.js project deployment. We typically run our projects in a digital ocean server. We run several projects under several ports and we use proxies to ensure everything can be accessible with a domain.
How can we help you
We have built more than 10 websites including dynamic product in React SSR. Even this website is also built on Next.js. Browse it through. Feel it's flexibility and efficiency. Click on Start project. See how fast it loads. If you want same for yourself, feel free to Schedule a Meeting with us.
If you are building things for next generation users, go for React SSR. It won't dissapoint you.