A hands-on guide for a Server-Side Rendering React app
In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by converting Create React App to a server-side rendered application.
In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by converting Create React App to a server-side rendered application.
Terminologies
What is client-side rendering (CSR)?
It is a technology that a browser downloads the minimal HTML page, which uses JavaScript to render and fills the content.
CSR may take longer for the initial page loading, but the subsequent loading would be faster. It off-loads the server and relies on the power of JavaScript libraries. However, it is hard for Search Engine Optimization (SEO) as there is no static content to be crawled upon.
What is server-side rendering (SSR)?
It is a technology that a browser downloads the complete HTML page, which has been rendered by the server.
The advantage of SSR is for SEO. The initial page loading is faster. But it needs the full page reloading for the subsequent changes. This may overload the server.
What is single-page application (SPA)?
It is a an application that uses the client-side rendering. Instead of having a different HTML page per route, it renders each route dynamically and directly in the browser.
What is universal (isomorphic) JavaScript?
It is a Javascript application that runs on both the client and the server. It renders HTML on the client as SPA, and it also renders the same HTML on the server side and then sends it to the browser to display.
We write React code for CSR. The same code base can be used for SSR. React is universal JavaScript.
SSR exists before CSR. Today, it is revived with universal JavaScript. When SSR is mentioned today, it likely means SSR with universal JavaScript.
Create React App and CSR
Install Create React App, and run npm start.
From the Elements tab, it shows the JavaScript rendered HTML (JSX) for the spinning logo and some text information.
This is a typical CSR, where HTML content is rendered by JavaScript. From the Network tab, we can read what is downloaded from the server.
The HTML’s body has a bunch of JavaScript files, but no actual content. It is hard for SEO to get any meaningful information.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script>
<script src="/static/js/0.chunk.js">
</script><script src="/static/js/main.chunk.js"></script>
</body>web-development programming javascript react server-side-rendering react native
Bootstrap 5 Complete Course with Examples
Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners
Nest.JS Tutorial for Beginners
Hello Vue 3: A First Look at Vue 3 and the Composition API
Building a simple Applications with Vue 3
Deno Crash Course: Explore Deno and Create a full REST API with Deno
How to Build a Real-time Chat App with Deno and WebSockets
Convert HTML to Markdown Online
HTML entity encoder decoder Online
How native is React Native? | React Native vs Native App Development
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Hire Dedicated React Native Developer
Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...
Hire Dedicated React Native Developers - WebClues Infotech
WebClues Infotech is a expert in building iOS, Android Apps, Web apps , Websites, Enterprise solutions. We have crafted many complex and innovative projects that meets our customer expectations.
Top Rated React Native Development Agency
AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!
Hire Top-Notch React Native App Developers in USA
AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!