The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Server-Side Rendering (SSR) with Nuxt.js

Next ►
►

Introduction

Server-Side Rendering (SSR) is a technique used to render web pages on the server instead of the client. This can improve the performance and SEO of your web applications. Nuxt.js is a powerful framework built on top of Vue.js that simplifies the process of creating SSR applications.

Key Concepts

  • Server-Side Rendering (SSR): Rendering web pages on the server before sending them to the client.
  • Nuxt.js: A framework for creating Vue.js applications with SSR capabilities.
  • Universal Applications: Applications that can run both on the server and the client.

Setting Up Nuxt.js

Installation

To get started with Nuxt.js, you need to install it using npm or yarn.

# Using npm
npm install nuxt

# Using yarn
yarn add nuxt

Creating a Nuxt.js Project

You can create a new Nuxt.js project using the create-nuxt-app command.

npx create-nuxt-app my-nuxt-app

Follow the prompts to set up your project. This will create a new directory called my-nuxt-app with the necessary files and dependencies.

Project Structure

A typical Nuxt.js project has the following structure:

my-nuxt-app/
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── static/
├── store/
├── nuxt.config.js
└── package.json
  • assets/: Contains uncompiled assets such as Sass, Less, or JavaScript files.
  • components/: Contains Vue.js components.
  • layouts/: Contains layout components.
  • middleware/: Contains middleware functions.
  • pages/: Contains Vue.js components for each page.
  • plugins/: Contains JavaScript plugins to be run before mounting the root Vue.js application.
  • static/: Contains static files that are directly served.
  • store/: Contains Vuex store files.
  • nuxt.config.js: Configuration file for Nuxt.js.

Creating Pages

In Nuxt.js, pages are created by adding Vue components to the pages/ directory. Each file in this directory automatically becomes a route.

Example: Creating a Home Page

Create a file named index.vue in the pages/ directory:

<template>
  <div>
    <h1>Welcome to My Nuxt.js App</h1>
  </div>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

<style scoped>
h1 {
  color: #2c3e50;
}
</style>

This will create a home page accessible at the root URL (/).

Configuring SSR

Nuxt.js enables SSR by default. You can configure SSR settings in the nuxt.config.js file.

Example: Customizing SSR Settings

export default {
  // Enable SSR
  ssr: true,

  // Global page headers
  head: {
    title: 'my-nuxt-app',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  // Global CSS
  css: [],

  // Plugins to run before rendering page
  plugins: [],

  // Auto import components
  components: true,

  // Modules for dev and build (recommended)
  buildModules: [],

  // Modules
  modules: [],

  // Build Configuration
  build: {}
}

Fetching Data

Nuxt.js provides a fetch method to fetch data before rendering the page. This method is called on the server-side during SSR.

Example: Fetching Data in a Page

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  async fetch() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    this.posts = await response.json()
  }
}
</script>

Deploying Nuxt.js Applications

Building for Production

To build your Nuxt.js application for production, run the following command:

npm run build

This will create a .nuxt directory with the compiled files.

Starting the Production Server

To start the production server, run:

npm run start

This will start the server and serve your application.

Conclusion

In this section, you learned about Server-Side Rendering (SSR) with Nuxt.js. You set up a Nuxt.js project, created pages, configured SSR settings, fetched data, and learned how to build and deploy your application. SSR can significantly improve the performance and SEO of your web applications, making Nuxt.js a valuable tool in your development toolkit.

Next, you will explore the Vue 3 Composition API, which provides a new way to write and organize Vue.js components.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved