add blog post for nuxt3 rendering modes

[bimalghartimagar]

Before submitting a pull request, make sure to complete the following checklist:

• [x] Include attribution for anything you don't own. This means images, but also code snippets or quotes you didn't write. Even if you do use your own image, please add an HTML comment with attribution so we know where it came from.
• [x] Make sure you have the latest upstream changes: git fetch upstream && git rebase upstream/main
• [x] Clean up your repo. Once you are done with all changes, including from reviewers, squash any commits you have into a single commit. Make sure you don't have any leftover commits from old blog posts. It saves time when the keepers of the blog don't need to rebase and squash your commits. If you need help with this, reach out to a keeper of the blog (who are listed in the End Point internal wiki under the page of that name).
• [x] Push all changes from your local repo to your fork on GitHub.
• [x] Create a pull request draft, then request review from your technical and style reviewers on your pull request (you should also message them on company chat, as not everyone checks their GitHub notifications regularly). If you have already had people review it, mention that in the pull request description. You can have your reviewers look at your post directly in GitHub, which will convert the Markdown nicely and even parse the frontmatter into a little table! See this example
• Incorporate changes based on your reviewers' input.
  • [x] Complete technical review
  • [x] Complete style review
• [x] When you are done incorporating feedback and making any other changes, contact a keeper of the blog for final review and publishing. You can message on company chat or in a comment on your pull request (make sure to tag Seth @sethjensen1).

Once your blog post has been published to the world, proofread it again. You often see mistakes after publishing that you didn't notice before, and it's not too late to fix them!

[darius-endpoint]

Corrected 7

Nuxt is a free and open source framework which helps us build performant full-stack web applications and websites with Vue.js. Nuxt is built on top of Vue.js, so it is also called a meta framework. Nuxt uses conventional style directory structure to streamline repetitive tasks and allow developers to focus on more important operational tasks. The configuration file can be used to customize the default behaviors.

[darius-endpoint]

12 Nuxt generates routes based on the vue files and folder structure within the pages/ directory. For example, if we have a file pages/contact.vue, it will generate a corresponding route at /contact. It also supports dynamic routing which can be defined in a folder structure like pages/product/[sku].vue, which supports the route /product/APPLE, where [sku].vue SFC will have access to value APPLE.

[darius-endpoint]

17 Server-side rendering: Nuxt has built-in SSR support, without having to configure server. It has many benefits such as loading pages quickly, improved search engine optimization, caching and many more. We will talk more about other rendering methods later below.

[darius-endpoint]

26

The process of interpreting JavaScript code to convert Vue.js components to HTML elements is called rendering. This can happen both in the browser and the server. Nuxt supports the following rendering modes and we will discuss them more in detail :

[darius-endpoint]

29 This is the default rendering mode which provides a better user experience, performance and optimized search engine indexing. The Rendering mode can be switched by changing ssr value in nuxt.config file.

[darius-endpoint]

31 In this mode, the server returns a fully rendered HTML page to the browser on request. Nuxt runs the Vue.js code in the server, which produces HTML content. Users get the content of web application which can be displayed in browser.

[darius-endpoint]

33 After the page is loaded from the server, the browser loads the JS code to make content interactive and dynamic. The browser again interprets the Vue.js code to enable interactivity. This process of making a page interactive in the browser is called Hydration.

[darius-endpoint]

35

Universal rendering provides quick page load times while preserving the benefits of client-side rendering and also enhancing SEO because HTML content is already present for crawling.

[darius-endpoint]

38

Performance: Browsers display static content faster hence users can see the page content immediately. Nuxt also preserves the interactivity of the web application using hydration.

[darius-endpoint]

42 Development constraints: Some of the APIs don't work both in the browser and and the server side like a window object. It can be time consuming to write code that runs on both sides. Nuxt does provide guidelines and variables to help with this.

[darius-endpoint]

50

Cheaper: The code can be hosted on a simple web server just for hosting the files, and can run on the browser so it can reduce the cost.

• Offline: The code only runs on the browser, so the web application can keep working even if there is no internet.

[darius-endpoint]

54

Performance: Because the browser has to first download files and then run JavaScript files to generate the HTML document, the process can be slow depending on the network speed for downloading files and also depending on the performance of the user's device for executing the JS code. This can reduce the performance and impact user's experience.

• SEO: Crawlers takes more time indexing and updating the content delivered using client-side rendering. Based on the above performance drawback, the crawler may not wait for the interface until the interface is fully rendered.

[darius-endpoint]

68

Hybrid rendering allows different caching rules per route using Route Rules which can dictate the server response for each new request.

please review this rewording: Without hybrid rendering all the routes/pages of the application used the same rendering mode either universal or client-side. With hybrid rendering, there may be various cases where some pages which have static content can be generated at build time while pages which have dynamic content like dashboard and orders page can be generated client side.

[darius-endpoint]

101

This generates pages based on routes at build time and serves them as static pages.

[darius-endpoint]

103

There are many more properties that we can use to define how each route will act.

[darius-endpoint]

109

/prerender/country and /prerender/university routes are defined as prerendered or SSG, which means the pages are generated at build time. The server time shows the time when the build was run to generate the pages.

[darius-endpoint]

110

/prerender/country/{countries starting from a to m} routes are defined as prerendered which means the countries whose name starts with a to m are generated at build time. We can browse any of the prerendered countries page like /prerender/country/Canada, we see server times are the same as build times, however if we browse non prerendered countries page like /prerender/country/Nigeria we see server times are just the same as browser times .. the time we use to browse the page.

[bimalghartimagar]

@darius-endpoint thank you for you feedback.

@sethjensen1 this PR is now ready.

[sethjensen1]

This is now live. Thanks @bimalghartimagar!