namecheap · StyleT · Feb 4, 2022 · Jan 21, 2022 · Jan 21, 2022 · Jan 24, 2022
diff --git a/docs/assets/routes/introduction-demo.png b/docs/assets/routes/introduction-demo.png
diff --git a/docs/assets/routes/navigation-example.png b/docs/assets/routes/navigation-example.png
diff --git a/docs/assets/routes/navigation-example2.png b/docs/assets/routes/navigation-example2.png
diff --git a/docs/routing/introduction.md b/docs/routing/introduction.md
@@ -0,0 +1,37 @@
+# Introduction
+
+Most JavaScript frameworks come with a dedicated routing solution
+like `angular/router` or `vue-router`. They make it possible to
-like `angular/router` or `vue-router`. They make it possible to
+like `angular/router` or `vue-router`. They allow you to
-like `angular/router` or `vue-router`. They make it possible to
+like `angular/router` or `vue-router`. They allow you to
+navigate through different pages of an application without having to
+do a full page refresh on every link click.
-navigate through different pages of an application without having to
-do a full page refresh on every link click.
+navigate through pages of an application without a full page refresh on every click.
-navigate through different pages of an application without having to
-do a full page refresh on every link click.
+navigate through pages of an application without a full page refresh on every click.
+Since we no longer have one monolithic application that handles all routes, instead we have several independent applications, we need to solve an important issue, namely routing.
+
+The following describes how this is handled in the ILC, but first let's clear up the terminology:
+
-
+
+## Routing basics
+
-
+
+## Routing basics
+
+ - Hard transitions - A transition handled by ILC routing, with such a transition, the application on the page changes to another one.
+
+ - Soft transitions - A transition handled by own routing of some application at the page, with such a transition, only the content inside the application changes.
+
+ ![Introdaction demo](../assets/routes/introduction-demo.png)
- ![Introdaction demo](../assets/routes/introduction-demo.png)
+![Introduction demo](../assets/routes/introduction-demo.png)
- ![Introdaction demo](../assets/routes/introduction-demo.png)
+![Introduction demo](../assets/routes/introduction-demo.png)
+
+#
+
+Now, let's talk a little about the theory, after which we will move on to practical examples:
+
+ In ILC, we can use one HTML template for all of our applications. With this approach, SSR occurs once when the page is first loaded, then all navigation occurs through CSR. So let's look at navigation in more detail:
+
+ For clarity, here is the routing table:
+ ![Routing table](../assets/routes/route.png)
+
+ Let's go to the `/people/` route, it will be a `hard transitions` because we render a new application on the `/people/*` route.
+
+ ![Navigation example](../assets/routes/navigation-example.png)
+
+Now let's pick someone from the list:
+
+ ![Navigation example](../assets/routes/navigation-example2.png)
+
+ Now our route looks like this: `/people/?selected=4/`, this time it's a `soft transition` because `/?selected=4/` is navigation within the app.
+
+Now let's recap:
-Now let's recap:
+Conclusion
-Now let's recap:
+Conclusion
+Due to the fact that we use one HTML template for all pages, SSR occurs only once, then all navigation happens with the help of CSR and uses both hard and soft transitions, depending on the situation.