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
