What is Nuxt.js?

- [Narrator] Nuxt is The Intuitive Vue Framework for building web applications, with improved performance and a great developer experience. It is similar to NuxtJS, but used with Vue applications. Nuxt uses Vue.js under the hood with the benefits of taking care of all the configurations that you would typically need to do when building a Vue app, like setting up your route, project structure, configuration, and building support for search engine optimization. This allows you focus on what really matters which is building your application. One core problem faced by Vue developers is how difficult it is to get SEO working with a single page Vue application or an SPA. This is because a standard SPA is only rendered on the client side or on the browser. The browser first downloads and passes all the JavaScript code needed to render a page before it renders a fully interactive page. This method is suitable for applications like an admin dashboard or SA application, where there are no calls to the server for an initial page to load, load leading to no page reloads. But the downside to this approach is that with SPA mode being used such engine optimization becomes harder to achieve. Now, if you're building a website that needs to be indexed by search engines, like a blog or a marketing website then it's important to take into consideration the best possible way of indexing your sites. Nuxt solves this problem for us with a feature called Universal Rendering. Universal rendering in Nuxt means that your application is rendered both on the client side and the server side. This means that when the browser requests a URL, with universal mode enabled, a fully rendered HTML page is displayed on the browser. Now behind the scenes, Nuxt runs JavaScript on the server, which produces a fully rendered HTML page document to the browser. This reduces the time it takes for a user to see something appear on the screen and makes it easy for crawlers to index the websites before the page is fully loaded. You still get all the benefits of a client side rendered application like no initial page reloads and smooth page transitions. And the JavaScript code that runs on the server is then loaded by the browser in the background to make the page fully interactive. The process of making a static page interactive on the browser is called hydration. Once this whole step is complete the page becomes fully interactive. Another solution that Nuxt offers is pre-rendering your application using Static Side Generation. With Static Side Generation your code is pre-rendered into static HTML files and build time and is then deployed to a static hosting platform which helps with SEO because the pages are all rendered with meta tags, making it crawlable by search engines alongside these benefits, Nuxt also ships with additional features like file system routing data fetching component auto-imports and a modules ecosystem Nuxt's goal is to enable developers build applications that are fast in performance with a seamless developer experience by providing features and an extensive modules ecosystem to help you achieve this goal.