Kselax.ru

Hacker Kselax – the best hacker in the world

Menu
  • Blog
  • Contacts
  • wp plugin generator
  • English
    • Русский
Menu

react-router and server side rendering (SSR)

Posted on 28 November, 201828 November, 2018 by admin

links:

  1. 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

 

 

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • bash (1)
  • English (9)
  • JavaScript (4)
  • node.js (22)
  • photoshop (1)
  • php (3)
  • React (9)
  • sclerotic (6)
  • Ubuntu (10)
  • Uncategorized (13)
  • Wordpress (1)

Tags

Ajax apache2 automation bash chrome-extension command line editor ejs email English English-grammar framework functions git graphql handlebars hybrid app installation javascript js linux newbie node.js node.js javascript nodemailer npm objects Performance php phpmyadmin playonlinux promise rabbitmq React react-router redis reverse-proxy session shell socket.io sublime text 3 time zones ubuntu unity webpack

Recent Comments

  • damien on How to install npm and nodejs the latest versions on ubuntu
  • Cam on How to install npm and nodejs the latest versions on ubuntu
  • Pierre on socket.io with apache as a reverse proxy on the CentOS
  • admin on How to use react-router with a few languages
  • admin on How to install npm and nodejs the latest versions on ubuntu
©2021 Kselax.ru Theme by ThemeGiant