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