#8 Enhance Your Nuxt App's Performance with these caching techniques, server components and auto-imports

In this edition of NuxtDojo, we explore key performance-enhancing features like aliases, auto-imports, caching strategies & Server Components. Learn how these tools can help streamline your Nuxt app.

Sep 30, 2024

🌟 Welcome to NuxtDojo Newsletter #8! 🌟

If we were to break down Nuxt’s features into broad categories, I’d say they mostly fall into two: Performance Optimisation and Developer Experience (DX).

In this edition of NuxtDojo, we'll dive into some performance-focused features like Nuxt aliases, auto-imports, different caching methods (both server-side and client-side), and even touch on Server Components. What ties all these features together is their ability to boost your app's performance in one way or another. Whether it's trimming down the bundle size, cutting out unnecessary JavaScript, or speeding up page loads, Nuxt has your back!

So, let’s dive in.

Nuxter’s Corner

1️⃣ Nuxt Aliases and Auto-Imports

Managing imports in Nuxt can greatly affect the structure, performance, and maintainability of your application. Nuxt offers several features, such as auto-imports, aliases, and manual imports, to help streamline and optimise the way imports are handled.

Here are the key concepts in managing imports in Nuxt:

Aliases: Aliases allow you to define shorthand paths to directories or files, reducing the use of long relative paths in your imports.
Auto-Imports: Nuxt can automatically import commonly used utilities, components, and composables, reducing the need for manual import statements.
Manual Imports: Despite the convenience of auto-imports, manual imports are sometimes preferred for better control over code bundling and performance.
Third-Party Package Imports: Nuxt can automatically or manually import utilities from third-party libraries, streamlining external dependencies management.

To scope out these topics for my Nuxt book, I have written these two articles detailing types of aliases, and ways to use auto-imports in Nuxt.

By combining auto-imports, aliases, and manual imports, you can strike the right balance between convenience and control, leading to a clean, performant, and scalable Nuxt application.

2️⃣ Caching Strategies in Nuxt.js

Caching is an essential aspect of optimising performance in Nuxt.js applications. Both server-side and client-side caching mechanisms are available in Nuxt, and they can be used in combination to significantly improve load times, reduce server load, and enhance the overall user experience.

While diving into the Nuxt documentation to explore caching strategies, I learned that there was a lot more to it than I initially expected. What started out as a single article ended up splitting into two—one focused on server-side caching and the other on client-side caching. The really cool part is that these two approaches aren’t mutually exclusive; in fact, they complement each other beautifully.

By combining these server-side and client-side caching strategies, you can significantly improve the performance of your Nuxt.js applications.

As I worked through to explore different approaches to caching, it got me thinking about how I should structure the chapters of my book. For certain features or concepts, like types of Nuxt Routes or Layouts, project-based chapters make sense, as they allow readers to follow along step-by-step and see the feature in action within the context of a full project.

On the other hand, for topics that are more about exploring multiple techniques or options, like caching, a listicle or recipe-style format might be more appropriate, because it is impossible to include all caching techniques into a single project-based chapter. I am thinking these recipe-style chapters could be bite-sized and offer actionable solutions for common problems, making it easier for readers to pick and choose strategies depending on their needs.

3️⃣ Server Components in Nuxt.js

When I started writing this book, a lot of Nuxt features felt fresh—like that 'just released in Nuxt 3' kind of new. But now, those features have become part of my everyday Nuxt projects, except for Server Components. Due to time constraints, I used the popular markdown component as an example to show how they work.

Server Components in Nuxt.js

Yet, I still find myself searching for more situations where Server Components truly stand out. So, I did what anyone would do in my place these days. I asked ChatGPT, and it gave me some interesting ideas that I think I will explore next and see how I go.

Generating graphs or charts using libraries that are heavy or not suitable for client-side rendering.
Incorporating legacy code or libraries that aren't compatible with client-side rendering.
Creating PDFs on the server for reports, invoices, or other documents.
Generating email templates that need to be sent directly from the server.
Implementing feature flags or A/B testing on the server side allows for dynamic rendering without client-side logic. (This could be super interesting to implement!)

If these chapter ideas have piqued your interest and left you eager for more, I invite you to subscribe to NuxtDojo newsletter. By subscribing, you'll gain access to exclusive updates about the progress of my book, as well as the opportunity to be among the first to receive the early release of each chapter.

Author’s Corner

It's been a while since I last updated my Asciidoctor project. One thing I love about working with Asciidoctor is that when you're deep in writing mode, it feels just like writing in Markdown—you almost forget you're working in an Asciidoctor project at all.

For the future edition, I'm planning to share a starter Asciidoctor project template, so anyone can clone it and jump right into writing technical books without any hassle. With that idea in mind, I quickly found myself diving back into book themes and Ruby again!

Here’s how you can customise the default page layout using the basic Ruby extension.

Ruby Script to customise the page layout

To customise the page layout for title pages, part-title, and chapter-title in Asciidoctor PDF using a Ruby script, you will extend the functionality of Asciidoctor PDF. Asciidoctor PDF allows limited customisation through themes, but for more complex layout modifications, you can write a custom Ruby extension.

Step-by-Step Guide: Here’s how you can build a custom Ruby script to customise the layout of specific page elements like the title page, part-title, and chapter-title.

Step 1: Install Required Gems
Make sure you have Asciidoctor PDF installed by running:
```
gem install asciidoctor-pdf
```

Step 2: Create a Ruby Extension

This script will modify how the title page, part-title, and chapter-title are rendered. Save this Ruby script as custom_page_layout.rb.

require 'asciidoctor-pdf'

class CustomPdfConverter < Asciidoctor::PDF::Converter
  register_for 'pdf'

  # Customise the title page layout
  def layout_title_page(doc)
    start_new_page
    font 'Helvetica', size: 48, style: :bold
    # ... 
  end

  # Customise the part-title layout
  def layout_part_title(part)
    start_new_page
    font 'Helvetica', size: 36, style: :bold
    text part.title, align: :center, valign: :center
    # ...
  end

  # Customise the chapter-title layout
  def layout_chapter_title(chapter, opts = {})
    # Start new chapter page
    # ...
  end
end

Step 3: Use the Custom Ruby Script
Once you have saved the script, you can pass it to the `asciidoctor-pdf` command to generate the PDF with custom page layouts. Run the following command:
```
asciidoctor-pdf -r ./custom_page_layout.rb my_document.adoc
```

This custom Ruby script modifies the page layout for title pages, part-title, and chapter-title in Asciidoctor PDF. You can tweak the design to fit your needs, such as adding logos, custom fonts, or different page orientations. The combination of a Ruby script and an Asciidoctor PDF theme gives you comprehensive control over the document layout.

Keep an eye on my future newsletter to get the Github Repo of the Asciidoctor starter project.

Thank you for joining me on this adventure, and I hope you find inspiration and enlightenment within these pages.

🚀 How You Can Participate:

📚 Read Along: Subscribe to the newsletter to receive updates, diagrams, and behind-the-scenes content.
🤝 Community Interaction: Share topic suggestions for the book, questions, and insights here on NuxtDojo Substack.
🚀 Spread the Word: Let others know about NuxtDojo – share on social media and among your developer circles.

Warm regards,
Krutie @ NuxtDojo 🚀📚

NuxtDojo