links:
- react-router the official documentation link
Content table:
#How does react-router work
Here are good articles A simple V4 react tutorial and How single page applications work. The most interesting it’s how SPAs works. So I’ll say in own words. There are two kinds of SPA, The first that change its state depending on location (URL) and that always has the same URL.
#Why is react-router used for?
The question is very simple to show different views with an SPA, without routing the app will have a single URL and a single view that means when we refresh the browser we lost our SPA state. And with react-router, we’ll refresh the page for different views the app will render different state correspondingly to the URLs.
In the origin, they are both single page apps therefor Google will not index the pages. The main purpose of using react-router it shows different views by URLs. It will help a user reach immediately a needed view. Any SPA isn’t SEO friendly at all. Nowadays, this probably isn’t important because Google is a single search engine and around plenty of sites who want to appear on the first page. To make an SPA more SEO friendly there is a server-side rendering about which we’ll speak later
#What is server-side rendering (SSR) used for
The SSR is a rendering javascript code on a server and passing the result to a client. Why? Because the client rendering isn’t SEO friendly. The search engines will see only one block <div id=”root”></div> (it with a React case) that is not what some users wanted to see. Suppose we build the whole site by React and the whole site will be looking in Google as <div id=”root”></div> that is not appropriate. To avoid this we use SSR
Assume we have an SPA where are a few pages such as Main, About, Contact. We wanted they be available on the google with their full content, So at first, we do React rendering on the server and the string of HTML code will return to the client. For such pages, we will do so. Google will index such pages as normal HTML and it’s what we want.
Remained to implement the scheme. Here is a tutorial Server rendering with React and react-router, looks as though it isn’t bad. In the tutorial is youtube video and code on GitHub. You can follow the tutorial of those links or I’ll do the new a lot simpler tutorial on my own. In my tutorial, we’ll be created a simple site with a few pages like About, Contacts that should be server-side rendered. All the remained app will use a client-side rendering.
the end