From 327b93ae26a5d51d35fc565fda2702bd6da4d9ef Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 9 Aug 2022 23:41:05 +0400
Subject: [PATCH] Add content for SSR

---
 .../content/102-ecosystem/102-ssr/100-quasar.md      | 11 ++++++++++-
 .../content/102-ecosystem/102-ssr/101-nuxt-js.md     | 11 ++++++++++-
 .../105-vue/content/102-ecosystem/102-ssr/readme.md  | 12 +++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/100-quasar.md b/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/100-quasar.md
index e940ffaf5..3216ea813 100644
--- a/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/100-quasar.md
+++ b/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/100-quasar.md
@@ -1 +1,10 @@
-# Quasar
\ No newline at end of file
+# Quasar
+
+Quasar Framework is an open-source Vue.js based framework for building apps, with a single codebase, and deploy it on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://quasar.dev/'>Official Website: Quasar</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=opmng7llVJ0&list=PLAiDzIdBfy8iu_MZrq3IPuSFcRgCQ0iL0'>Quasar Framework: Vue.js Cross Platform App</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=czJIuHyPPXo'>How to Build an App using Quasar Framework</BadgeLink>
+
+
diff --git a/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/101-nuxt-js.md b/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/101-nuxt-js.md
index 7e0303e9c..98d9a55e5 100644
--- a/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/101-nuxt-js.md
+++ b/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/101-nuxt-js.md
@@ -1 +1,10 @@
-# Nuxt js
\ No newline at end of file
+# Nuxt.js
+
+Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://nuxtjs.org/'>Nuxt Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nuxtjs.org/docs/get-started/installation'>Nuxt Docs</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://explorers.netlify.com/learn/get-started-with-nuxt'>Get Started with Nuxt</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://vueschool.io/courses/nuxtjs-fundamentals'>Nuxt.js Fundamentals</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://nuxtjs.org/tutorials'>Nuxt Tutorials</BadgeLink>
diff --git a/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/readme.md b/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/readme.md
index d2ae9d2e0..fdb6257e7 100644
--- a/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/readme.md
+++ b/content/roadmaps/105-vue/content/102-ecosystem/102-ssr/readme.md
@@ -1 +1,11 @@
-# Ssr
\ No newline at end of file
+# Server-side rendering
+
+Server-side rendering refers to the process that the service side completes the HTML structure splicing of the page, sends it to the browser, and then binds the status and events for it to become a fully interactive page.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.educative.io/answers/what-is-server-side-rendering'>what is server side rendering</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f'>When should I Server-Side Render?</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://vuejs.org/guide/scaling-up/ssr.html'>Server-Side Rendering (SSR)</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GQzn7XRdzxY'>what is server side rendering?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=okvg3MRAPs0'>What is server-side rendering for web development?</BadgeLink>